body-display-change.html (1180B)
1 <!DOCTYPE html> 2 <title>Layout Instability: shift accompanied by body display change</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 6 body { margin: 0; } 7 #cont { 8 background: white; 9 width: 300px; 10 height: 200px; 11 } 12 #ch { 13 background: blue; 14 position: relative; 15 width: 300px; 16 height: 100px; 17 top: 100px; 18 } 19 20 </style> 21 <style id="s"></style> 22 <div id="cont"> 23 <div id="ch"></div> 24 </div> 25 <script src="/resources/testharness.js"></script> 26 <script src="/resources/testharnessreport.js"></script> 27 <script src="resources/util.js"></script> 28 <script> 29 30 promise_test(async () => { 31 const watcher = new ScoreWatcher; 32 await waitForAnimationFrames(2); 33 34 document.querySelector("#s").innerHTML = ` 35 body { 36 display: flex; 37 flex-direction: column; 38 } 39 #ch { top: 0; } 40 `; 41 42 // An element of size (300 x 100) has shifted by 100px. 43 const expectedScore = computeExpectedScore(300 * (100 + 100), 100); 44 45 // Observer fires after the frame is painted. 46 assert_equals(watcher.score, 0); 47 await watcher.promise; 48 assert_equals(watcher.score, expectedScore); 49 }, 'Shift accompanied by body display change.'); 50 51 </script>