Port chrome-only dialog tests to WPT part 4

Bug: 1240798 Change-Id: I6267d6ce10f1cdf3b326b8a8cbbf90054a47f658
web-platform-tests · Dec 8, 2021 · bff561b · bff561b
1 parent 4c618c0
commit bff561b
Show file tree

Hide file tree

Showing 6 changed files with 284 additions and 0 deletions.
diff --git a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-scroll-height.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-scroll-height.html
@@ -0,0 +1,32 @@
+<!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">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=403136">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body {
+  margin: 0;
+}
+.spacer {
+  height: 500px;
+}
+dialog {
+  border: 0;
+  margin: 0;
+  padding: 1px;
+}
+</style>
+<div class="spacer"></div>
+<dialog>
+  <div class="spacer"></div>
+</dialog>
+
+<script>
+test(() => {
+  document.querySelector('dialog').showModal();
+  assert_equals(document.scrollingElement.scrollHeight, 600);
+}, 'dialogs should be centered before computing overflow.');
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/multiple-centered-dialogs.html b/html/semantics/interactive-elements/the-dialog-element/multiple-centered-dialogs.html
@@ -0,0 +1,50 @@
+<!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 expectedTop(dialog) {
+    return Math.floor((document.documentElement.clientHeight - dialog.offsetHeight) / 2);
+  }
+
+  function showAndTest(id) {
+    dialog = document.getElementById(id);
+    dialog.showModal();
+    assert_equals(dialog.offsetTop, expectedTop(dialog), 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>
diff --git a/...interactive-elements/the-dialog-element/non-modal-dialog-does-not-block-mouse-events.html b/...interactive-elements/the-dialog-element/non-modal-dialog-does-not-block-mouse-events.html
@@ -0,0 +1,52 @@
+<!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">
+<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=110952">
+<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>
+
+<p>
+To test manually, click the red box. The test succeeds if the red box turns green.
+</p>
+
+<style>
+#div {
+    height: 100px;
+    width: 100px;
+    background: red;
+}
+</style>
+
+<div id="div"></div>
+<dialog id="dialog"></dialog>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    const actions = new test_driver.Actions()
+      .pointerMove(element.offsetWidth / 2, element.offsetHeight / 2, {origin: element})
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  const dialog = document.getElementById('dialog');
+  dialog.show();
+
+  const div = document.getElementById('div');
+  div.firedOn = false;
+  div.addEventListener('click', function(event) {
+    div.firedOn = true;
+    div.style.backgroundColor = 'green';
+  });
+
+  await clickOn(div);
+
+  assert_true(div.firedOn);
+}, 'Ensure that non-modal dialogs do not block mouse events.');
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/non-modal-dialog-layout.html b/html/semantics/interactive-elements/the-dialog-element/non-modal-dialog-layout.html
@@ -0,0 +1,102 @@
+<!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">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=382594">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+/* Remove body margin and dialog styles for easier positioning expected values */
+body {
+  height: 10000px;
+  margin: 0;
+}
+
+dialog {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: initial;
+  max-height: initial;
+}
+
+#absolute-div {
+  position: absolute;
+  top: 800px;
+  height: 50px;
+  width: 90%;
+}
+
+#relative-div {
+  position: relative;
+  top: 20px;
+  height: 30px;
+}
+</style>
+
+<div id="absolute-div">
+  <div id="relative-div">
+    <dialog id="dialog">It is my dialog.</dialog>
+  </div>
+</div>
+
+<script>
+test(() => {
+  const dialog = document.querySelector('#dialog');
+  const div = document.querySelector('#div-dialog');
+  const relativeContainer = document.querySelector('#relative-div');
+  const offset = 50;
+  dialog.style.top = offset + 'px';
+  dialog.style.left = offset + 'px';
+
+  dialog.style.position = 'absolute';
+  dialog.show();
+  assert_equals(
+    dialog.getBoundingClientRect().top,
+    relativeContainer.getBoundingClientRect().top + offset,
+    'Absolute position.');
+  assert_equals(
+    dialog.getBoundingClientRect().left,
+    relativeContainer.getBoundingClientRect().left + offset,
+    'Absolute position.');
+
+  dialog.style.position = 'static';
+  assert_true(dialog.open);
+  assert_equals(
+    dialog.getBoundingClientRect().top,
+    relativeContainer.getBoundingClientRect().top,
+    'Static position.');
+  assert_equals(
+    dialog.getBoundingClientRect().left,
+    relativeContainer.getBoundingClientRect().left,
+    'Static position.');
+  dialog.close();
+
+  dialog.style.position = 'relative';
+  dialog.show();
+  assert_equals(
+    dialog.getBoundingClientRect().top,
+    relativeContainer.getBoundingClientRect().top + offset,
+    'Relative position.');
+  assert_equals(
+    dialog.getBoundingClientRect().left,
+    relativeContainer.getBoundingClientRect().left + offset,
+    'Relative position.');
+  dialog.close();
+
+  dialog.style.position = 'fixed';
+  dialog.show();
+  assert_equals(
+    dialog.getBoundingClientRect().top,
+    offset,
+    'Fixed position.');
+  assert_equals(
+    dialog.getBoundingClientRect().left,
+    offset,
+    'Fixed position.');
+  dialog.close();
+}, 'Tests layout of non-modal dialogs.');
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/showmodal-in-shadow-crash.html b/html/semantics/interactive-elements/the-dialog-element/showmodal-in-shadow-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=850664">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=851384">
+
+<div id="dialog">
+  <div id="item"></div>
+</div>
+<script>
+const itemRoot = item.attachShadow({mode: 'open'});
+const dialogRoot = dialog.attachShadow({mode: 'open'});
+dialogRoot.innerHTML = '<dialog><slot></slot></dialog>';
+dialog.offsetTop;
+dialogRoot.firstChild.showModal();
+</script>
diff --git a/...mantics/interactive-elements/the-dialog-element/showmodal-shadow-sibling-frame-crash.html b/...mantics/interactive-elements/the-dialog-element/showmodal-shadow-sibling-frame-crash.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class=test-wait>
+<link rel=author href="mailto:[email protected]">
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=804047">
+
+<template>
+  <custom-dialog></custom-dialog>
+</template>
+<div id=shadow></div>
+<iframe id=sibling></iframe>
+
+<script>
+customElements.define('custom-dialog',class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({mode: 'open'}).innerHTML = '<dialog></dialog>';
+  }
+  show() {
+    this.shadowRoot.querySelector('dialog').showModal();
+  }
+});
+
+onload = () => {
+  const template = document.querySelector('template');
+  const content = document.importNode(template.content, true);
+  const dialog = content.querySelector('custom-dialog');
+  document.querySelector('div').appendChild(dialog);
+  dialog.show();
+  document.documentElement.classList.remove('test-wait');
+};
+</script>