| <!DOCTYPE html> |
| <title>Layout Instability: no shift in mouse moves with a button pressed</title> |
| <link rel="help" href="https://wicg.github.io/layout-instability/" /> |
| <style> |
| |
| body { margin: 0; height: 2000px; } |
| #draggable { |
| top:50px; |
| left:50px; |
| width:50px; |
| height:50px; |
| background-color:blue; |
| position:absolute |
| } |
| |
| </style> |
| <div id="draggable" ></div> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="resources/util.js"></script> |
| <script> |
| |
| const draggable = document.getElementById("draggable"); |
| draggable.addEventListener('mousemove', function(event) { |
| // Move the element when the mouse moves. |
| draggable.style.top = event.pageY - 25 + 'px'; |
| event.preventDefault(); |
| }, false); |
| |
| generateMouseMoveSequence = () => new test_driver.Actions() |
| .pointerMove(0, 0, {origin: draggable}) |
| .pointerDown() |
| .pointerMove(0, 15, {origin: draggable}) |
| .pause(100) |
| .pointerMove(0, 30, {origin: draggable}) |
| .pause(100) |
| .pointerMove(0, 45, {origin: draggable}) |
| .pause(100) |
| .pointerUp() |
| .pause(100); |
| |
| promise_test(async () => { |
| |
| const watcher = new ScoreWatcher; |
| |
| // Wait for the initial render to complete. |
| await waitForAnimationFrames(2); |
| |
| // Send pointer events for a sequence of mouse actions, mouse down, mouse moves and mouse up. |
| await generateMouseMoveSequence().send(); |
| |
| // Mouse moves which drag the objects should be counted as the excluding inputs |
| // for the layout shift. |
| assert_greater_than(watcher.score, 0); |
| assert_equals(watcher.scoreWithInputExclusion, 0); |
| |
| }, "No layout shift when mouse moves with a button pressed."); |
| |
| </script> |
