sources.html (1126B)
1 <!DOCTYPE html> 2 <title>Layout Instability: sources attribute</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 6 body { margin: 10px; } 7 #shifter { position: relative; width: 300px; height: 100px; background: blue; } 8 9 </style> 10 <div id="shifter"></div> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="resources/util.js"></script> 14 <script> 15 16 strrect = r => `[${r.x},${r.y},${r.width},${r.height}]`; 17 18 promise_test(async () => { 19 const watcher = new ScoreWatcher; 20 const shifter = document.querySelector("#shifter"); 21 22 // Wait for the initial render to complete. 23 await waitForAnimationFrames(2); 24 25 // Modify the position of the div. 26 shifter.style = "top: 60px; left: 10px"; 27 await watcher.promise; 28 29 const sources = watcher.lastEntry.sources; 30 assert_equals(sources.length, 1); 31 32 const source = sources[0]; 33 assert_equals(source.node, shifter); 34 assert_equals(strrect(source.previousRect), "[10,10,300,100]"); 35 assert_equals(strrect(source.currentRect), "[20,70,300,100]"); 36 }, "Sources attribute."); 37 38 </script>