multiple-centered-dialogs.html | Explore in Territory

<!DOCTYPE html>
<link rel=author href="mailto:[email protected]">
<link rel=author href="mailto:[email protected]">
<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>
chromium/third_party/blink/web_tests/external/wpt/html/semantics/interactive-elements/the-dialog-element/multiple-centered-dialogs.html
