inline-flow-shift-one-line.html (1526B)
1 <!DOCTYPE html> 2 <title>Layout Instability: inline/text movement is detected</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/util.js"></script> 7 <div style="width: 200px; font-size: 20px; line-height: 25px"> 8 1AAAAAAA<br> 9 2AAAAAAA<br> 10 3AAAAAAA<br> 11 <div id="inline-block" style="display: inline-block">4AAAAAAA</div><br> 12 <div id="shift" style="display: inline-block"></div>5AAAAAAA<br> 13 6AAAAAAA<br> 14 7AAAAAAA<br> 15 </div> 16 <script> 17 18 promise_test(async () => { 19 const watcher = new ScoreWatcher; 20 21 // Wait for the initial render to complete. 22 await waitForAnimationFrames(2); 23 24 // Modify the width of |shift|. 25 document.querySelector("#shift").style.width = '50px'; 26 27 // Only the line after |shift| is shifted right by 50px. 28 // The implementation may measure the real width of the shifted text 29 // or use the available width (i.e. width of the containing block). 30 // Also tolerate extra 10% error. 31 const text_width = document.querySelector("#inline-block").clientWidth; 32 const expectedScoreMin = computeExpectedScore((text_width + 50) * 20, 50) * 0.9; 33 const expectedScoreMax = computeExpectedScore(200 * 25, 50) * 1.1; 34 35 // Observer fires after the frame is painted. 36 assert_equals(watcher.score, 0); 37 await watcher.promise; 38 assert_between_exclusive(watcher.score, expectedScoreMin, expectedScoreMax); 39 }, 'Inline flow movement.'); 40 41 </script>