third_party/WebKit/LayoutTests/fast/repaint/transform-absolute-child.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3 <html lang="en">
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6   <title>Transform with Abs. Pos child</title>
   7   <style type="text/css" media="screen">
   8      #box {
   9         position: relative;
  10         margin: 50px;
  11         width: 200px;
  12         height: 200px;
  13         border: 2px solid black;
  14         transform: rotate(0deg);
  15      }
  16      #box.rotated {
  17         transform: rotate(40deg);
  18      }
  19      #child {
  20         position: absolute;
  21         width: 400px;
  22         height: 50px;
  23         top: 75px;
  24         left: 75px;
  25         background-color: gray;
  26      }
  27   </style>
  28   <script src="resources/text-based-repaint.js" type="text/javascript" charset="utf-8"></script>
  29   <script type="text/javascript" charset="utf-8">
  30     function repaintTest()
  31     {
  32       document.getElementById('box').className = 'rotated';
  33     }
  34   </script>
  35 </head>
  36 <body onload="runRepaintTest()">
  37 <div id="box">
  38     <div id="child">
  39     </div>
  40 </div>
  41 </body>
  42 </html>