src/third_party/WebKit/LayoutTests/transforms/2d/set-transform-and-top.html

   1 <html>
   2 <head>
   3 <style>
   4 .box {
   5     width: 100px;
   6     height: 100px;
   7     background-color: red;
   8     position: absolute;
   9     top: 60px;
  10     left: 40px;
  11 }
  12 </style>
  13 <script type="text/javascript">
  14
  15 function checkPosition(id) {
  16     var element = document.getElementById(id);
  17     var y = element.getBoundingClientRect().top;
  18
  19     var resultString = '';
  20     if (y > 250) {
  21         resultString += "PASS - Element " + id + " moved past y=250px";
  22     } else {
  23         resultString += "FAIL - Element " + id + " still at y=" + y + "px";
  24     }
  25
  26     var div = document.createElement("div");
  27     div.appendChild(document.createTextNode(resultString));
  28     document.body.appendChild(div);
  29 }
  30
  31
  32 function runTest() {
  33     checkPosition("a");
  34     checkPosition("b");
  35
  36     if (window.testRunner) {
  37         window.testRunner.dumpAsText();
  38         window.testRunner.notifyDone();
  39     }
  40 }
  41 </script>
  42 </head>
  43 <body>
  44
  45 <div class="box" id="a">A</div>
  46 <div class="box" id="b">B</div>
  47
  48 <script>
  49     if (window.testRunner)
  50         window.testRunner.waitUntilDone();
  51
  52     setTimeout(move, 10);
  53     function move() {
  54         document.getElementById('a').style.top = "300px";
  55         document.getElementById('a').style.webkitTransform = "rotate(45deg)";
  56         document.getElementById('b').style.top = "300px";
  57         document.getElementById('b').style.webkitTransform = "rotate(90deg)";
  58         setTimeout(runTest, 0);
  59     }
  60 </script>
  61 </body>
  62 </html>