rtl-distance.html (995B)
1 <!DOCTYPE html> 2 <title>Layout Instability: movement distance uses starting corner</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 6 #shifter { position: relative; width: 100px; height: 100px; direction: rtl; background: blue; } 7 8 </style> 9 <div id='shifter'></div> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="resources/util.js"></script> 13 <script> 14 15 promise_test(async () => { 16 const watcher = new ScoreWatcher; 17 18 // Wait for the initial render to complete. 19 await waitForAnimationFrames(2); 20 21 // Move the left edge rightward by 10px and the right edge leftward by 20px. 22 document.querySelector("#shifter").style = "width: 70px; left: 10px"; 23 24 // The movement distance should use the displacement of the right edge. 25 const expectedScore = computeExpectedScore(100 * 100, 20); 26 27 await watcher.promise; 28 assert_equals(watcher.score, expectedScore); 29 }, 'RTL element.'); 30 31 </script>