focus-contenteditable-element-in-iframe-scroll-into-view.html (2259B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>focus contenteditable element in iframe scroll into view</title> 7 <script src=/resources/testharness.js></script> 8 <script src=/resources/testharnessreport.js></script> 9 <style> 10 11 iframe { 12 position: absolute; 13 left: 250vw; 14 } 15 16 .spacer { 17 width: 100vw; 18 height: 250vh; 19 } 20 21 </style> 22 </head> 23 <body> 24 <div id="focusable-1" class="editor" contenteditable="true">focusable 1</div> 25 <div class="spacer"></div> 26 <iframe srcdoc="<div id='focusable-2' contenteditable='true'>focusable 2</div>"></iframe> 27 <div class="spacer"></div> 28 </body> 29 <script> 30 31 function waitForLoad(w) { 32 return new Promise(resolve => w.addEventListener('load', resolve)); 33 } 34 35 function waitForFrame() { 36 return new Promise(resolve => { 37 requestAnimationFrame(() => requestAnimationFrame(() => resolve())); 38 }); 39 } 40 41 promise_test(async (t) => { 42 await waitForLoad(window); 43 const focusable_1 = document.getElementById("focusable-1"); 44 const iframeDocument = document.querySelector("iframe").contentDocument; 45 const focusable_2 = iframeDocument.getElementById("focusable-2"); 46 47 focusable_1.focus(); 48 focusable_2.focus(); 49 await waitForFrame(); 50 const firstScrollX = window.scrollX; 51 const firstScrollY = window.scrollY; 52 53 assert_greater_than(firstScrollX, window.innerWidth, "scroll X is greater than window.innerWidth"); 54 assert_greater_than(firstScrollY, window.innerHeight, "scroll Y is greater than window.innerHeight"); 55 56 window.scroll(0, 0); 57 assert_equals(window.scrollX, 0, "scroll X is reset to 0"); 58 assert_equals(window.scrollY, 0, "scroll Y is reset to 0"); 59 60 focusable_1.focus(); 61 focusable_2.focus(); 62 await waitForFrame(); 63 const secondScrollX = window.scrollX; 64 const secondScrollY = window.scrollY; 65 66 // Ensure that both scroll positions are within +/- 1 67 assert_approx_equals(firstScrollX, secondScrollX, 1.0, 68 "scroll X is within +/- 1 of a element in an iframe"); 69 assert_approx_equals(firstScrollY, secondScrollY, 1.0, 70 "scroll Y is within +/- 1 of a element in an iframe"); 71 }, "Check contenteditable element in an iframe scroll into view on second focusing"); 72 73 </script> 74 </html>