| <!DOCTYPE html> |
| <link rel=author href="mailto:jarhar@chromium.org"> |
| <link rel=author href="mailto:falken@chromium.org"> |
| <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> |
| <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=242848"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <iframe height=400 width=600 id="main-iframe"> |
| <frameset rows="*" cols="50,50"> |
| <frame src="resources/inert-focus-in-frames-frame1.html"> |
| <frame src="resources/inert-focus-in-frames-frame2.html"> |
| </frameset> |
| </iframe> |
| |
| <script> |
| let framesLoadedResolver = null; |
| const framesLoadedPromise = new Promise(resolve => framesLoadedResolver = resolve); |
| framesLoaded = 0; |
| numFrames = 4; |
| |
| function frameLoaded() { |
| framesLoaded++; |
| if (framesLoaded == numFrames) |
| framesLoadedResolver(); |
| } |
| var mainIframe = document.getElementById('main-iframe'); |
| mainIframe.contentDocument.write(mainIframe.textContent); |
| mainIframe.contentDocument.close(); |
| mainIframe.contentWindow.frames[1].window.onload = frameLoaded; |
| window.onload = frameLoaded; |
| |
| promise_test(async () => { |
| await framesLoadedPromise; |
| |
| function testFocus(element, expectFocus) { |
| let focusedElement = null; |
| element.addEventListener('focus', function() { focusedElement = element; }, false); |
| element.focus(); |
| if (expectFocus) { |
| assert_equals(focusedElement, element, element.id); |
| } else { |
| assert_not_equals(focusedElement, element, element.id); |
| } |
| } |
| |
| // Opening a modal dialog in frame1. It blocks other nodes in its document. |
| const frame1 = mainIframe.contentWindow.frames[0].document; |
| frame1.querySelector('dialog').showModal(); |
| |
| testFocus(frame1.querySelector('.target'), false); |
| const iframe = frame1.querySelector('#iframe1').contentDocument; |
| testFocus(iframe.querySelector('.target'), true); |
| |
| // Even a modal dialog in the iframe is blocked by the modal dialog in the parent frame1. |
| iframe.querySelector('dialog').showModal(); |
| testFocus(iframe.querySelector('button'), false); |
| |
| // An iframe within a modal dialog can still be focused. |
| var dialogIframe = frame1.querySelector('#iframe-in-dialog').contentDocument; |
| testFocus(dialogIframe.querySelector('.target'), true); |
| |
| // A modal dialog does not block nodes in a sibling frame. |
| var frame2 = mainIframe.contentWindow.frames[1].document; |
| testFocus(frame2.querySelector('.target'), true); |
| |
| // Closing the dialog in frame1. The modal dialog in the iframe does not block nodes in its parent. |
| frame1.querySelector('dialog').close(); |
| testFocus(iframe.querySelector('.target'), false); |
| testFocus(frame1.querySelector('.target'), true); |
| |
| }, 'Tests inert node focusing across frames and iframes.'); |
| </script> |
