composited-element-movement.html (1387B)
1 <!DOCTYPE html> 2 <title>Layout Instability: element with compositing layer hint</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 6 #shift { 7 position: relative; 8 width: 500px; 9 height: 200px; 10 background: yellow; 11 } 12 #container { 13 position: absolute; 14 width: 350px; 15 height: 400px; 16 right: 50px; 17 top: 100px; 18 background: #ccc; 19 } 20 .promote { will-change: transform; } 21 22 </style> 23 <div id="container" class="promote"> 24 <div id="space"></div> 25 <div id="shift" class="promote"></div> 26 </div> 27 <script src="/resources/testharness.js"></script> 28 <script src="/resources/testharnessreport.js"></script> 29 <script src="resources/util.js"></script> 30 <script> 31 32 promise_test(async () => { 33 const watcher = new ScoreWatcher; 34 35 // Wait for the initial render to complete. 36 await waitForAnimationFrames(2); 37 38 // Induce a shift. 39 document.querySelector("#space").style = "height: 100px"; 40 41 // #shift is 400x200 after viewport intersection with correct application of 42 // composited #container offset, and 100px lower after shifting, so impact 43 // region is 400 * (200 + 100). 44 const expectedScore = computeExpectedScore(400 * (200 + 100), 100); 45 46 // Observer fires after the frame is painted. 47 assert_equals(watcher.score, 0); 48 await watcher.promise; 49 assert_equals(watcher.score, expectedScore); 50 }, "Element with compositing layer hint."); 51 52 </script>