multiple-centered-dialogs.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/interactive-elements/the-dialog-element/multiple-centered-dialogs.html - WPT Dashboard Interop Dashboard

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

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body {

  height: 10000px;

dialog {

  padding: 0;

  height: 50px;

  width: 50px;

#console {

  position: fixed;

</style>

<dialog id="top-dialog"></dialog>

<dialog id="first-middle-dialog"></dialog>

<dialog id="second-middle-dialog" style="left: 100px"></dialog>

<dialog id="bottom-dialog"></dialog>

<script>

test(() => {

  function documentHeight() {

    // clientHeight is an integer, but we want the correct floating point

    // value.  Start a binary search at clientHeight-1 and clientHeight+1.

    let min = document.documentElement.clientHeight;

    let max = min + 1;

    --min;

    // binary search with media queries to find the correct height

    for (let iter = 0; iter < 10; ++iter) {

      let test = (min + max) / 2;

      if (window.matchMedia(`(min-height: ${test}px)`).matches)

        min = test;

      else

        max = test;

    return min;

  function expectedTop(dialog) {

    let height = documentHeight();

    return (height - dialog.getBoundingClientRect().height) / 2;

  function showAndTest(id) {

    dialog = document.getElementById(id);

    dialog.showModal();

    assert_approx_equals(dialog.getBoundingClientRect().top, expectedTop(dialog), 0.05, id);

  showAndTest('top-dialog');

  window.scroll(0, 100);

  showAndTest('first-middle-dialog');

  showAndTest('second-middle-dialog');

  window.scroll(0, 200);

  showAndTest('bottom-dialog');

}, 'Test that multiple dialogs are centered properly.');

</script>