| Steve Kobes | fc58248 | 2019-11-05 21:14:23 | [diff] [blame] | 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 | |
| Xianzhu Wang | 48e5e3c | 2021-03-13 00:30:33 | [diff] [blame^] | 6 | #shifter { position: relative; width: 100px; height: 100px; direction: rtl; background: blue; } |
| Steve Kobes | fc58248 | 2019-11-05 21:14:23 | [diff] [blame] | 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> |
