sources-maximpact.html (1735B)
1 <!DOCTYPE html> 2 <title>Layout Instability: source attribution prioritization</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 #a, #b, #c, #d, #e, #f { 11 display: inline-block; 12 background: gray; 13 min-width: 10px; 14 min-height: 10px; 15 vertical-align: top; 16 } 17 #a { width: 30px; height: 30px; } 18 #b { width: 20px; height: 20px; } 19 #c { height: 50px; } 20 #d { width: 50px; } 21 #e { width: 40px; height: 30px; } 22 #f { width: 30px; height: 40px; } 23 </style> 24 <div id="grow"></div> 25 <div id="a"></div 26 ><div id="b"></div 27 ><div id="c"></div 28 ><div id="d"></div 29 ><div id="e"></div 30 ><div id="f"></div> 31 <script> 32 33 let $ = id => document.querySelector(id); 34 35 promise_test(async () => { 36 const watcher = new ScoreWatcher; 37 38 // Wait for the initial render to complete. 39 await waitForAnimationFrames(2); 40 41 $("#grow").style.height = "50px"; 42 await watcher.promise; 43 44 cls_expect(watcher, {sources: [ 45 { 46 node: $("#e"), 47 previousRect: [110, 0, 40, 30], 48 currentRect: [110, 50, 40, 30] 49 }, 50 { 51 node: $("#f"), 52 previousRect: [150, 0, 30, 40], 53 currentRect: [150, 50, 30, 40] 54 }, 55 { 56 node: $("#a"), 57 previousRect: [0, 0, 30, 30], 58 currentRect: [0, 50, 30, 30] 59 }, 60 { 61 node: $("#c"), 62 previousRect: [50, 0, 10, 50], 63 currentRect: [50, 50, 10, 50] 64 }, 65 { 66 node: $("#d"), 67 previousRect: [60, 0, 50, 10], 68 currentRect: [60, 50, 50, 10] 69 } 70 ]}); 71 }, "Source attribution prioritizes by impact."); 72 73 </script>