<!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>