gradients-em-stops-repaint-expected.html 826 B

1234567891011121314151617181920212223242526272829303132333435
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css" media="screen">
  5. .box {
  6. display: inline-block;
  7. height: 120px;
  8. width: 300px;
  9. margin: 10px;
  10. border: 1px solid black;
  11. background-repeat: no-repeat;
  12. font-size: 12pt;
  13. }
  14. .em-units > .box {
  15. background-image: -webkit-linear-gradient(left, yellow, yellow 5em, green 5em);
  16. background-image: -moz-linear-gradient(left, yellow, yellow 5em, green 5em);
  17. }
  18. .indicator {
  19. background-color: black;
  20. height: 20px;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="em-units">
  26. <div id="box3" class="box"><div class="indicator" style="width: 5em;"></div></div>
  27. <div id="box4" class="box" style="font-size: 36pt"><div class="indicator" style="width: 5em"></div></div>
  28. </div>
  29. </body>
  30. </html>