| <!DOCTYPE html> |
| <title>Layout Instability: element with compositing layer hint</title> |
| <link rel="help" href="https://wicg.github.io/layout-instability/" /> |
| <style> |
| |
| #shift { |
| position: relative; |
| width: 500px; |
| height: 200px; |
| background: yellow; |
| } |
| #container { |
| position: absolute; |
| width: 350px; |
| height: 400px; |
| right: 50px; |
| top: 100px; |
| background: #ccc; |
| } |
| .promote { will-change: transform; } |
| |
| </style> |
| <div id="container" class="promote"> |
| <div id="space"></div> |
| <div id="shift" class="promote"></div> |
| </div> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="resources/util.js"></script> |
| <script> |
| |
| promise_test(async () => { |
| const watcher = new ScoreWatcher; |
| |
| // Wait for the initial render to complete. |
| await waitForAnimationFrames(2); |
| |
| // Induce a shift. |
| document.querySelector("#space").style = "height: 100px"; |
| |
| // #shift is 400x200 after viewport intersection with correct application of |
| // composited #container offset, and 100px lower after shifting, so impact |
| // region is 400 * (200 + 100). |
| const expectedScore = computeExpectedScore(400 * (200 + 100), 100); |
| |
| // Observer fires after the frame is painted. |
| assert_equals(watcher.score, 0); |
| await watcher.promise; |
| assert_equals(watcher.score, expectedScore); |
| }, "Element with compositing layer hint."); |
| |
| </script> |