| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/text-based-repaint.js"></script> |
| <style> |
| #menu { |
| float: left; |
| position: relative; |
| } |
| |
| #watches { |
| float: left; |
| transform: scale(1,1); |
| } |
| |
| #placeholder { |
| position: relative; |
| backface-visibility: hidden; |
| } |
| |
| #submenu { |
| position: absolute; |
| top: -200px; |
| background: red; |
| } |
| </style> |
| |
| </head> |
| <body> |
| <div>This test has passed if there is no red rectangle below.</div> |
| <ul> |
| <li id="watches"><span id="placeholder"></span></li> |
| <li id="menu"> |
| <ul id="submenu"> |
| <li></li> |
| </ul> |
| </li> |
| </ul> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| window.testIsAsync = true; |
| |
| var submenu = document.getElementById("submenu"); |
| function repaintTest() |
| { |
| submenu.style.top = "-200px"; |
| finishRepaintTest(); |
| } |
| |
| window.requestAnimationFrame(function() { |
| submenu.style.top = "50px"; |
| window.requestAnimationFrame(function() { |
| runRepaintTest(); |
| }); |
| }); |
| </script> |
| |
| </body> |
| </html> |
