translate-counter-layout-shift.html (1272B)
1 <!DOCTYPE html> 2 <title>Layout Instability: no layout shift if translate change counters location change</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 body { margin: 0; } 6 #transformed { position: relative; translate: 20px 0; width: 100px; height: 100px; background: blue; } 7 #child { width: 400px; height: 400px; } 8 </style> 9 <div id="transformed"> 10 <div id="child"></div> 11 </div> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="resources/util.js"></script> 15 <script> 16 17 promise_test(async () => { 18 const watcher = new ScoreWatcher; 19 20 // Wait for the initial render to complete. 21 await waitForAnimationFrames(2); 22 23 // Modify the transform and the location at the same time, and the values 24 // cancel each other visually, for which no shift should be reported. 25 transformed.style.translate = '0 100px'; 26 transformed.style.top = '-100px'; 27 transformed.style.left = '20px'; 28 // Change size of child, for which no shift should be reported, either. 29 child.style.width = '300px'; 30 31 await waitForAnimationFrames(2); 32 // No shift should be reported. 33 assert_equals(watcher.score, 0); 34 }, 'no layout shift if translate change counters location change'); 35 36 </script>