move-distance-clamped.html (1489B)
1 <!DOCTYPE html> 2 <title>Layout Instability: distance fraction not more than 1.0</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 #shifter { 11 position: relative; 12 width: 100vw; 13 height: 100vh; 14 left: -2000vw; 15 top: -2000vh; 16 background: blue; 17 } 18 </style> 19 <div id="shifter"></div> 20 <script> 21 22 promise_test(async () => { 23 const watcher = new ScoreWatcher; 24 25 // Wait for the initial render to complete. 26 await waitForAnimationFrames(2); 27 28 // Modify the position of the div. 29 document.querySelector("#shifter").style = "left: 0; top: 0"; 30 31 const docElement = document.documentElement; 32 const viewWidth = docElement.clientWidth; 33 const viewHeight = docElement.clientHeight; 34 35 // An element the size of the viewport has shifted by a huge distance, but 36 // the move distance is effectively the viewport width or height (whichever 37 // is larger) as the distance fraction is limited to a maximum of 1.0. 38 const expectedScore = computeExpectedScore( 39 viewWidth * viewHeight, 40 Math.max(viewWidth, viewHeight)); 41 42 // Observer fires after the frame is painted. 43 cls_expect(watcher, {score: 0}); 44 await watcher.promise; 45 cls_expect(watcher, {score: expectedScore}); 46 }, "Distance fraction not more than 1.0."); 47 48 </script>