| <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true internal:AsyncFrameScrollingEnabled=true ] --> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src='../../../resources/ui-helper.js'></script> |
| <script src='../../../resources/basic-gestures.js'></script> |
| <meta name=viewport content='width=device-width'> |
| <style> |
| body, html { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| } |
| |
| #target { |
| width: 320px; |
| height: 160px; |
| } |
| </style> |
| <script> |
| |
| jsTestIsAsync = true; |
| function rectsAreEqual(rects, otherRects) |
| { |
| if (rects.length != otherRects.length) |
| return false; |
| |
| for (let i = 0; i < rects.length; ++i) { |
| if (rects[i].top != otherRects[i].top |
| || rects[i].left != otherRects[i].left |
| || rects[i].width != otherRects[i].width |
| || rects[i].height != otherRects[i].height) |
| return false; |
| } |
| |
| return true; |
| } |
| |
| async function waitForSelectionRectsToChange(fromRects) |
| { |
| let rects = fromRects; |
| while (rectsAreEqual(rects, fromRects)) |
| rects = await UIHelper.getUISelectionViewRects(); |
| return rects; |
| } |
| |
| addEventListener('load', async function() { |
| description('This test verifies that a selection in an iframe area is kept up to date after scrolling. To test manually, tap the frame and scroll the editable area down; the selection move to account for the new scroll position.'); |
| |
| const iframe = document.getElementById('scrollingiframe'); |
| |
| await UIHelper.activateElementAndWaitForInputSession(iframe); |
| selectionRectsBefore = await waitForSelectionRectsToChange([]); |
| |
| await UIHelper.immediateScrollElementAtContentPointToOffset(100, 400, 0, 50); |
| selectionRectsAfter = await waitForSelectionRectsToChange(selectionRectsBefore); |
| |
| shouldBe('selectionRectsBefore[0].top', '74'); |
| shouldBe('selectionRectsBefore[0].width', '184'); |
| shouldBe('selectionRectsBefore[0].left', '10'); |
| shouldBe('selectionRectsBefore[0].height', '19'); |
| shouldBe('selectionRectsBefore[1].top', '93'); |
| shouldBe('selectionRectsBefore[1].width', '167'); |
| shouldBe('selectionRectsBefore[1].left', '10'); |
| shouldBe('selectionRectsBefore[1].height', '20'); |
| |
| shouldBe('selectionRectsAfter[0].top', '24'); |
| shouldBe('selectionRectsAfter[0].width', '184'); |
| shouldBe('selectionRectsAfter[0].left', '10'); |
| shouldBe('selectionRectsAfter[0].height', '19'); |
| shouldBe('selectionRectsAfter[1].top', '43'); |
| shouldBe('selectionRectsAfter[1].width', '167'); |
| shouldBe('selectionRectsAfter[1].left', '10'); |
| shouldBe('selectionRectsAfter[1].height', '20'); |
| |
| finishJSTest(); |
| }); |
| </script> |
| </head> |
| |
| <body> |
| <iframe width="200" height="500" scrolling="yes" srcdoc=" |
| <div id='editor' contenteditable> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| <p id='select-target'>The quick brown fox jumped over the lazy dog.</p> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| <p>The quick brown fox jumped over the lazy dog.</p> |
| </div> |
| <script> |
| addEventListener('click', event => { |
| getSelection().selectAllChildren(document.getElementById('select-target')); |
| event.preventDefault(); |
| }); |
| </script> |
| " id="scrollingiframe"></iframe> |
| <div id="description"></div> |
| |
| </body> |
| </html> |
