gradients-em-stops-repaint.html 1002 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  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: linear-gradient(to right, yellow, yellow 5em, green 5em);
  16. }
  17. .indicator {
  18. background-color: black;
  19. height: 20px;
  20. }
  21. </style>
  22. <script type="text/javascript" src="resources/text-based-repaint.js"></script>
  23. <script type="text/javascript">
  24. function repaintTest()
  25. {
  26. document.getElementById("box4").style.fontSize = "36pt";
  27. }
  28. </script>
  29. </script>
  30. </head>
  31. <body onload="runRepaintAndPixelTest();">
  32. <div class="em-units">
  33. <div id="box3" class="box"><div class="indicator" style="width: 5em;"></div></div>
  34. <div id="box4" class="box"><div class="indicator" style="width: 5em;"></div></div>
  35. </div>
  36. </body>
  37. </html>