third_party/WebKit/LayoutTests/fast/repaint/gradients-em-stops-repaint.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     .box {
   7       display: inline-block;
   8       height: 120px;
   9       width: 300px;
  10       margin: 10px;
  11       border: 1px solid black;
  12       background-repeat: no-repeat;
  13       font-size: 12pt;
  14     }
  15
  16     .em-units > .box {
  17       background-image: -webkit-linear-gradient(left, yellow, yellow 5em, green 5em);
  18       background-image: -moz-linear-gradient(left, yellow, yellow 5em, green 5em);
  19     }
  20
  21     .indicator {
  22       background-color: black;
  23       height: 20px;
  24     }
  25   </style>
  26   <script type="text/javascript" src="resources/text-based-repaint.js"></script>
  27   <script type="text/javascript">
  28       function repaintTest()
  29       {
  30           document.getElementById("box4").style.fontSize = "36pt";
  31       }
  32   </script>
  33   </script>
  34 </head>
  35 <body onload="runRepaintTest();">
  36
  37   <div class="em-units">
  38     <div id="box3" class="box"><div class="indicator" style="width: 5em;"></div></div>
  39     <div id="box4" class="box"><div class="indicator" style="width: 5em;"></div></div>
  40   </div>
  41
  42 </body>
  43 </html>