attribution-rectangles-css-pixels.html (2350B)
1 <!DOCTYPE html> 2 <title>Layout Instability: attribution rectangles pixel units</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 6 body { margin: 10px; } 7 #shifter { position: relative; width: 100px; 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 and size of the div. 26 shifter.style = "top: 60px; left: 10px; width: 200px; height: 200px"; 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 35 // Test that attribution rectangles are in CSS pixels 36 assert_equals(strrect(source.previousRect), "[10,10,100,100]", 37 "previousRect should be in CSS pixels"); 38 assert_equals(strrect(source.currentRect), "[20,70,200,200]", 39 "currentRect should be in CSS pixels"); 40 }, "Attribution rectangles should be in CSS pixels."); 41 42 // Test fractional pixel values 43 promise_test(async () => { 44 const watcher = new ScoreWatcher; 45 const shifter = document.querySelector("#shifter"); 46 47 // Wait for the initial render to complete. 48 await waitForAnimationFrames(2); 49 50 // Test with fractional CSS pixel values 51 shifter.style.cssText = 'position: relative; width: 100.5px; height: 75.25px; background: blue;'; 52 await waitForAnimationFrames(2); 53 54 shifter.style.top = '10.5px'; 55 shifter.style.left = '15.75px'; 56 await watcher.promise; 57 58 const sources = watcher.lastEntry.sources; 59 assert_equals(sources.length, 1); 60 61 const source = sources[0]; 62 assert_equals(source.node, shifter); 63 64 // Test that fractional CSS pixel values are preserved 65 assert_equals(source.previousRect.width, 100.5, "previousRect.width should preserve fractional CSS pixels"); 66 assert_equals(source.previousRect.height, 75.25, "previousRect.height should preserve fractional CSS pixels"); 67 }, "Fractional pixel values should be handled correctly."); 68 69 </script>