| Steve Kobes | d0b09af | 2020-05-08 21:02:26 | [diff] [blame] | 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: $("#a"), |
| 47 | previousRect: [0, 0, 30, 30], |
| 48 | currentRect: [0, 50, 30, 30] |
| 49 | }, |
| 50 | { |
| 51 | node: $("#f"), |
| 52 | previousRect: [150, 0, 30, 40], |
| 53 | currentRect: [150, 50, 30, 40] |
| 54 | }, |
| 55 | { |
| 56 | node: $("#c"), |
| 57 | previousRect: [50, 0, 10, 50], |
| 58 | currentRect: [50, 50, 10, 50] |
| 59 | }, |
| 60 | { |
| 61 | node: $("#d"), |
| 62 | previousRect: [60, 0, 50, 10], |
| 63 | currentRect: [60, 50, 50, 10] |
| 64 | }, |
| 65 | { |
| 66 | node: $("#e"), |
| 67 | previousRect: [110, 0, 40, 30], |
| 68 | currentRect: [110, 50, 40, 30] |
| 69 | } |
| 70 | ]}); |
| 71 | }, "Source attribution prioritizes by impact."); |
| 72 | |
| 73 | </script> |
