third_party/WebKit/LayoutTests/fast/repaint/transform-absolute-in-positioned-container.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>Relative Position Transform Redraw</title>
   5   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   6   <style type="text/css">
   7     #container {
   8       position: relative;
   9       left: 10px;
  10       top: 60px;
  11       padding: 20px;
  12       background-color: #DDD;
  13     }
  14     #box {
  15       position:relative;
  16       top: 100px;
  17       left: 100px;
  18       height: 200px;
  19       width: 200px;
  20       background-color: #CCC;
  21       border: 1px solid black;
  22       transform: rotate(0deg);
  23     }
  24
  25     #box.rotated {
  26       transform: rotate(45deg);
  27     }
  28   </style>
  29   <script src="resources/text-based-repaint.js" type="text/javascript" charset="utf-8"></script>
  30   <script type="text/javascript" charset="utf-8">
  31     function repaintTest()
  32     {
  33       document.getElementById('box').className = 'rotated';
  34     }
  35   </script>
  36 </head>
  37 <body onload="runRepaintTest()">
  38   <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=17840">https://bugs.webkit.org/show_bug.cgi?id=17840</a>. The rotated box should be correctly redrawn.</p>
  39
  40   <span id="container">
  41     Container
  42     <div id="box"></div>
  43   </span>
  44 </body>
  45 </html>