sources-enclosure.html (1719B)
1 <!DOCTYPE html> 2 <title>Layout Instability: source attribution with redundant enclosure</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/test-adapter.js"></script> 7 <script src="resources/util.js"></script> 8 <style> 9 body { margin: 0; } 10 #shifter { 11 position: relative; background: #def; 12 width: 300px; height: 200px; 13 } 14 #inner { 15 position: relative; background: #f97; 16 width: 100px; height: 100px; 17 } 18 #absfollow { 19 position: absolute; background: #ffd; opacity: 50%; 20 width: 350px; height: 200px; left: 0; top: 160px; 21 } 22 .stateB { top: 160px; } 23 .stateB #inner { left: 100px; } 24 .stateC ~ #absfollow { top: 0; } 25 </style> 26 <div id="shifter" class="stateA"> 27 <div id="inner"></div> 28 </div> 29 <div id="absfollow"></div> 30 <script> 31 32 promise_test(async () => { 33 const watcher = new ScoreWatcher; 34 let shifter = document.querySelector("#shifter"); 35 let absfollow = document.querySelector("#absfollow"); 36 37 // Wait for the initial render to complete. 38 await waitForAnimationFrames(2); 39 40 shifter.className = "stateB"; 41 await watcher.promise; 42 43 // Shift of #inner ignored as redundant, fully enclosed by #shifter. 44 cls_expect(watcher, {sources: [{ 45 node: shifter, 46 previousRect: [0, 0, 300, 200], 47 currentRect: [0, 160, 300, 200] 48 }]}); 49 50 shifter.className = "stateC"; 51 await watcher.promise; 52 53 // Shift of #shifter ignored as redundant, fully enclosed by #absfollow. 54 cls_expect(watcher, {sources: [{ 55 node: absfollow, 56 previousRect: [0, 160, 350, 200], 57 currentRect: [0, 0, 350, 200] 58 }]}); 59 60 }, "Sources with redundant enclosure."); 61 62 </script>