third_party/WebKit/LayoutTests/fast/repaint/transform-repaint-descendants.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4   <title>Transform Repaint Descendants</title>
   5   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   6   <style type="text/css">
   7     #box {
   8       position:relative;
   9       top: 100px;
  10       left: 100px;
  11       height: 200px;
  12       width: 200px;
  13       background-color: #CCC;
  14       border: 1px solid black;
  15     }
  16
  17     #box > div {
  18       position: absolute;
  19       height: 50px;
  20       width: 400px;
  21       top: 75px;
  22       left: 75px;
  23       background-color: #555;
  24     }
  25   </style>
  26   <script src="resources/text-based-repaint.js" type="text/javascript" charset="utf-8"></script>
  27   <script type="text/javascript" charset="utf-8">
  28     var gAngle = 20;
  29     function incrementAngle()
  30     {
  31       document.getElementById('box').style.webkitTransform = 'rotate(' + gAngle + 'deg)';
  32       gAngle += 3;
  33     }
  34
  35     function repaintTest()
  36     {
  37       incrementAngle();
  38     }
  39
  40     function startTest()
  41     {
  42       incrementAngle();
  43       runRepaintTest();
  44     }
  45   </script>
  46 </head>
  47 <body onload="startTest()">
  48   <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=22088">https://bugs.webkit.org/show_bug.cgi?id=22088</a>. The rotated box should be correctly redrawn.</p>
  49   <div id="box"><div></div></div>
  50 </body>
  51 </html>