inert-focus-in-frames.html (3105B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=author href="mailto:falken@chromium.org"> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> 5 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=242848"> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <iframe height=400 width=600 id="main-iframe"> 12 <frameset rows="*" cols="50,50"> 13 <frame src="resources/inert-focus-in-frames-frame1.html"> 14 <frame src="resources/inert-focus-in-frames-frame2.html"> 15 </frameset> 16 </iframe> 17 18 <script> 19 let framesLoadedResolver = null; 20 const framesLoadedPromise = new Promise(resolve => framesLoadedResolver = resolve); 21 framesLoaded = 0; 22 numFrames = 4; 23 24 function frameLoaded() { 25 framesLoaded++; 26 if (framesLoaded == numFrames) 27 framesLoadedResolver(); 28 } 29 var mainIframe = document.getElementById('main-iframe'); 30 mainIframe.contentDocument.write(mainIframe.textContent); 31 mainIframe.contentDocument.close(); 32 mainIframe.contentWindow.frames[1].window.onload = frameLoaded; 33 window.onload = frameLoaded; 34 35 promise_test(async () => { 36 await framesLoadedPromise; 37 // Chrome and edge auto-focus the URL bar when the browser is launched. 38 // This is needed to ensure the 'focus' events fire below. 39 await test_driver.click(document.documentElement); 40 41 function testFocus(element, expectFocus) { 42 let focusedElement = null; 43 element.addEventListener('focus', function() { focusedElement = element; }, false); 44 element.focus(); 45 if (expectFocus) { 46 assert_equals(focusedElement, element, element.id); 47 } else { 48 assert_not_equals(focusedElement, element, element.id); 49 } 50 } 51 52 // Opening a modal dialog in frame1. It blocks other nodes in its document. 53 const frame1 = mainIframe.contentWindow.frames[0].document; 54 frame1.querySelector('dialog').showModal(); 55 56 testFocus(frame1.querySelector('.target'), false); 57 const iframe = frame1.querySelector('#iframe1').contentDocument; 58 testFocus(iframe.querySelector('.target'), true); 59 60 // Even a modal dialog in the iframe is blocked by the modal dialog in the parent frame1. 61 iframe.querySelector('dialog').showModal(); 62 testFocus(iframe.querySelector('button'), false); 63 64 // An iframe within a modal dialog can still be focused. 65 var dialogIframe = frame1.querySelector('#iframe-in-dialog').contentDocument; 66 testFocus(dialogIframe.querySelector('.target'), true); 67 68 // A modal dialog does not block nodes in a sibling frame. 69 var frame2 = mainIframe.contentWindow.frames[1].document; 70 testFocus(frame2.querySelector('.target'), true); 71 72 // Closing the dialog in frame1. The modal dialog in the iframe does not block nodes in its parent. 73 frame1.querySelector('dialog').close(); 74 testFocus(iframe.querySelector('.target'), false); 75 testFocus(frame1.querySelector('.target'), true); 76 77 }, 'Tests inert node focusing across frames and iframes.'); 78 </script>