Port chrome-only dialog tests to WPT part 3

Bug: 1240798 Change-Id: Id1e38606a8ec0b59fa5172baa7649d31979267f5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3315600 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#949223}
web-platform-tests · Dec 7, 2021 · 96a05d3 · 96a05d3
1 parent a2d6c3b
commit 96a05d3
Show file tree

Hide file tree

Showing 6 changed files with 409 additions and 0 deletions.
diff --git a/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html b/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html
@@ -0,0 +1,85 @@
+<!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=241699">
+<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 on all the "Click me"s.
+The test fails if you see red.
+</p>
+
+<style>
+dialog {
+  width: 50px;
+}
+</style>
+
+<a id="a" href="javascript:void(0)">Click me</a>
+<button id="button">Click me</button>
+<div id="div" style="background-color: blue; width: 50px; height: 50px">Click meeee</div>
+<span id="span">Click me</span>
+<div id="dialog-parent" style="width: 50px; height: 50px">
+  <span id="dialog-sibling">Click meeee</span>
+  <dialog></dialog>
+</div>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    let absoluteTop = 0;
+    let absoluteLeft = 0;
+    for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
+      absoluteLeft += parentNode.offsetLeft;
+      absoluteTop += parentNode.offsetTop;
+    }
+
+    const x = absoluteLeft + element.offsetWidth / 2;
+    const y = absoluteTop + element.offsetHeight / 2;
+    const actions = new test_driver.Actions()
+      .pointerMove(x, y)
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  function eventFiredOnInertElement(e) {
+    e.target.style.background = 'red';
+    inertElementFiredOn = true;
+  }
+
+  inertElements = ['a', 'button', 'div', 'span']
+  inertElements.forEach(function(id) {
+    element = document.getElementById(id);
+    element.addEventListener('click', eventFiredOnInertElement);
+    element.addEventListener('mousemove', eventFiredOnInertElement);
+  });
+
+  document.addEventListener('click', function(e) {
+    document.firedOn = true;
+  });
+
+  document.getElementById('dialog-parent').addEventListener('click', function(e) {
+    e.target.firedOn = true;
+  });
+
+  document.querySelector('dialog').showModal();
+  for (const id of inertElements) {
+    expectedTarget = document;
+    if (id == 'dialog-sibling')
+      expectedTarget = document.getElementById('dialog-parent')
+    element = document.getElementById(id);
+    inertElementFiredOn = false;
+    expectedTarget.firedOn = false;
+    await clickOn(element);
+    assert_false(inertElementFiredOn, 'clicking on ' + id);
+    assert_true(expectedTarget.firedOn, 'clicking on ' + id);
+  }
+}, 'Tests that inert inlines do not receive mouse events.');
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html b/html/semantics/interactive-elements/the-dialog-element/inert-label-focus.html
@@ -0,0 +1,50 @@
+<!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>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<label for="submit">Label for Submit</label>
+<dialog>
+  <input id="text" type="text">
+  <input id="submit" type="submit">
+</dialog>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    let absoluteTop = 0;
+    let absoluteLeft = 0;
+    for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
+      absoluteLeft += parentNode.offsetLeft;
+      absoluteTop += parentNode.offsetTop;
+    }
+
+    const x = absoluteLeft + element.offsetWidth / 2;
+    const y = absoluteTop + element.offsetHeight / 2;
+    const actions = new test_driver.Actions()
+      .pointerMove(x, y)
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  document.querySelector('dialog').showModal();
+  document.querySelector('#text').focus();
+
+  label = document.querySelector('label');
+  label.focus();
+  assert_equals(document.activeElement, document.querySelector('#submit'),
+    'label.focus() should send focus to the target.');
+
+  await clickOn(label);
+  assert_equals(document.activeElement, document.body,
+    'Clicking the label should be the same as clicking the document body.');
+}, 'Tests focusing of an inert label for a non-inert target.');
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/inert-node-is-uneditable.html b/html/semantics/interactive-elements/the-dialog-element/inert-node-is-uneditable.html
@@ -0,0 +1,55 @@
+<!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=252071">
+<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>
+
+<span id="not-editable" contenteditable>I'm not editable while the dialog is showing.</span>
+<dialog>
+  <span id="editable" contenteditable>I'm editable.</span>
+</dialog>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    let absoluteTop = 0;
+    let absoluteLeft = 0;
+    for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
+      absoluteLeft += parentNode.offsetLeft;
+      absoluteTop += parentNode.offsetTop;
+    }
+
+    const x = absoluteLeft + element.offsetWidth / 2;
+    const y = absoluteTop + element.offsetHeight / 2;
+    const actions = new test_driver.Actions()
+      .pointerMove(x, y)
+      .pointerDown()
+      .pointerUp()
+      .pointerMove(0, 0);
+    await actions.send();
+  }
+
+  dialog = document.querySelector('dialog');
+  dialog.showModal();
+  notEditable = document.querySelector('#not-editable');
+  editable = document.querySelector('#editable');
+
+  await clickOn(notEditable);
+  oldValue = notEditable.textContent;
+  await (new test_driver.Actions().keyDown('a').keyUp('a').send());
+  assert_equals(notEditable.textContent, oldValue);
+
+  await clickOn(editable);
+  oldValue = editable.textContent;
+  await (new test_driver.Actions().keyDown('a').keyUp('a').send());
+  assert_not_equals(editable.textContent, oldValue);
+
+  notEditable.remove();
+  editable.remove();
+}, 'Test that inert nodes cannot be edited. The test passes if the only text you can edit is in the dialog.');
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unselectable.html b/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unselectable.html
@@ -0,0 +1,19 @@
+<!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=252071">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+Here is a text node you can't select while the dialog is open.
+<dialog>I'm selectable.</dialog>
+
+<script>
+test(() => {
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+  document.execCommand('SelectAll');
+  assert_equals(window.getSelection().toString(), "I'm selectable.");
+}, 'Test that inert nodes cannot be selected. The test passes if the only text you can select is inside the dialog.');
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-ancestor-is-inert.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-ancestor-is-inert.html
@@ -0,0 +1,101 @@
+<!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=329407">
+<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>
+
+<style>
+#ancestor {
+  position: absolute;
+  height: 50px;
+  width: 50px;
+  top: 200px;
+  left: 100px;
+  border: 1px solid;
+}
+
+dialog {
+  height: 50px;
+  width: 50px;
+  top: 200px;
+  left: 200px;
+  margin: 0;
+}
+
+dialog::backdrop {
+  display: none;
+}
+</style>
+
+<div id="ancestor">
+  <dialog></dialog>
+</div>
+
+<script>
+promise_test(async () => {
+  async function clickOn(element) {
+    const rect = element.getBoundingClientRect();
+    const actions = new test_driver.Actions()
+      .pointerMove(rect.left + rect.width / 2, rect.top + rect.height / 2)
+      .pointerDown()
+      .pointerUp();
+    await actions.send();
+  }
+
+  const div = document.querySelector('#ancestor');
+  const dialog = document.querySelector('dialog');
+  dialog.showModal();
+
+  const handledEvent = {};
+  document.addEventListener('click', function(event) {
+    handledEvent['document'] = true;
+  });
+
+  document.body.addEventListener('click', function(event) {
+    handledEvent['body'] = true;
+    // body should get a event only via bubbling.
+    if (event.target != dialog) {
+      assert_unreached('body was targeted for an click event');
+      div.style.backgroundColor = 'red';
+    }
+  });
+
+  div.addEventListener('click', function(event) {
+    handledEvent['div'] = true;
+    // div should get a event only via bubbling.
+    if (event.target != dialog) {
+      assert_unreached('div was targeted for an click event');
+      div.style.backgroundColor = 'red';
+    }
+  });
+
+  dialog.addEventListener('click', function(event) {
+    handledEvent['dialog'] = true;
+    dialog.style.backgroundColor = 'green';
+    if (event.target != dialog) {
+      assert_unreached('dialog was not targeted for a click event');
+      dialog.style.backgroundColor = 'red';
+    }
+  });
+
+  const nodes = [ 'document', 'body', 'div', 'dialog' ];
+  nodes.map(function(node) { handledEvent[node] = false; });
+  await clickOn(div);
+  assert_true(handledEvent.document, 'Clicking on ancestor.');
+  assert_false(handledEvent.body, 'Clicking on ancestor.');
+  assert_false(handledEvent.dialog, 'Clicking on ancestor.');
+  assert_false(handledEvent.div, 'Clicking on ancestor.');
+  handledEvent.document = false;
+
+  await clickOn(dialog);
+  assert_true(handledEvent.document, 'Clicking on dialog.');
+  assert_true(handledEvent.body, 'Clicking on dialog.');
+  assert_true(handledEvent.dialog, 'Clicking on dialog.');
+  assert_true(handledEvent.div, 'Clicking on dialog.');
+}, 'Test that ancestors of modal dialog are inert.');
+</script>