src/third_party/WebKit/LayoutTests/fast/repaint/offset-change-wrong-invalidation-with-float.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="resources/text-based-repaint.js"></script>
   5 <style>
   6 #menu {
   7     float: left;
   8     position: relative;
   9 }
  10
  11 #watches {
  12     float: left;
  13     transform: scale(1,1);
  14 }
  15
  16 #placeholder {
  17     position: relative;
  18     backface-visibility: hidden;
  19 }
  20
  21 #submenu {
  22     position: absolute;
  23     top: -200px;
  24     background: red;
  25 }
  26 </style>
  27
  28 </head>
  29 <body>
  30 <div>This test has passed if there is no red rectangle below.</div>
  31 <ul>
  32     <li id="watches"><span id="placeholder"></span></li>
  33     <li id="menu">
  34         <ul id="submenu">
  35             <li></li>
  36         </ul>
  37     </li>
  38 </ul>
  39
  40 <script>
  41 if (window.testRunner)
  42     testRunner.waitUntilDone();
  43 window.testIsAsync = true;
  44
  45 var submenu = document.getElementById("submenu");
  46 function repaintTest()
  47 {
  48     submenu.style.top = "-200px";
  49     finishRepaintTest();
  50 }
  51
  52 window.requestAnimationFrame(function() {
  53     submenu.style.top = "50px";
  54     window.requestAnimationFrame(function() {
  55         runRepaintTest();
  56     });
  57 });
  58 </script>
  59
  60 </body>
  61 </html>