tab-focus.https.html | Explore in Territory

<!DOCTYPE html>
<title>Tab focus</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/common/utils.js"></script>
<script src="resources/utils.js"></script>

<body>

  <input id="input"></input>
  <fencedframe id="fenced_frame"></fencedframe>
  <select id="select">
    <option>A</option>
    <option>B</option>
  </select>

<script>
  var events = [];
  var combined_events = [];

  const focus_ready_key = token();
  const focus_changed_key = token();

  function addEventListeners(element, name) {
    element.addEventListener('focus', () => {
      events.push(name + '/focus');
    });
    element.addEventListener('blur', () => {
      events.push(name + '/blur');
    });
  }
  addEventListeners(document.getElementById('input'), "input");
  addEventListeners(document.getElementById('select'), "select");

  document.body.addEventListener('focusout', () => {
    combined_events.push(...events);
    events = [];
  });

  promise_test(async () => {
    const frame_url = generateURL("resources/tab-focus-inner.https.html",
      [focus_ready_key, focus_changed_key, /*send_reverse_sequence=*/true]);
    const frame_config = new FencedFrameConfig(frame_url);
    document.getElementById('fenced_frame').config = frame_config;

    // Click the fenced frame so it gets user activated.
    // TODO(crbug.com/1289792) This is needed due to a bug in the experimental
    // flag BlockingFocusWithoutUserActivation for cross-origin iframes,
    // or any other frame where user activations are isolated.
    var fencedframe = document.body.getElementsByTagName('fencedframe')[0]
    await multiClick(10, 10, fencedframe, 5);

    document.getElementById('input').focus();
    testRunner.setBrowserHandlesFocus(true);

    await nextValueFromServer(focus_ready_key);

    // Move focus away from input
    test_driver.send_keys(document.documentElement, '\uE004');

    var focus_result = await nextValueFromServer(focus_changed_key);
    combined_events.push(...focus_result.split(','));

    // Now send focus in reverse. Use eventSender as test_driver doesn't
    // support key modifiers nor does TestDriver::Actions support key events
    // yet.
    eventSender.keyDown('Tab', ['shiftKey']);

    focus_result = await nextValueFromServer(focus_changed_key);
    combined_events.push(...focus_result.split(','));
    combined_events.push(...events);

    var expected_events = [
        "input/focus",
        "input/blur",
        "fencedframe_input/focus",
        "fencedframe_input/blur",
        "fencedframe_select/focus",
        "fencedframe_select/blur",
        "select/focus",
        "select/blur",
        "fencedframe_select/focus",
        "fencedframe_select/blur",
        "fencedframe_input/focus",
        "fencedframe_input/blur",
        "input/focus"
    ];
    assert_array_equals(combined_events, expected_events, "events do not match");
  });
</script>
chromium/third_party/blink/web_tests/wpt_internal/fenced_frame/tab-focus.https.html
