<!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>
