Upstream LayoutTests/html/dialog/*.html to WPT

Convert js-test.js based tests to testHarness based on test. And upstream to WPT. Bug: 761790 Change-Id: I97b896cce51fa33a8a17c73fb0ed8242249881ff Reviewed-on: https://chromium-review.googlesource.com/768430 Reviewed-by: Philip Jägenstedt <[email protected]> Commit-Queue: Philip Jägenstedt <[email protected]> Cr-Commit-Position: refs/heads/master@{#518911}
web-platform-tests · Nov 24, 2017 · 187b9ef · 187b9ef
1 parent 3e23767
commit 187b9ef
Show file tree

Hide file tree

Showing 4 changed files with 361 additions and 0 deletions.
diff --git a/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout.html b/html/semantics/interactive-elements/the-dialog-element/abspos-dialog-layout.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Tests layout of absolutely positioned modal dialogs.</title>
+<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 {
+    border: 0;
+    padding: 0;
+    height: auto;
+    width: auto;
+}
+
+#absolute-div {
+    position: absolute;
+    top: 800px;
+    height: 50px;
+    width: 90%;
+}
+
+#relative-div {
+    position: relative;
+    top: 20px;
+    height: 30px;
+}
+</style>
+</head>
+<dialog >It is my dialog.</dialog>
+<div id="absolute-div">
+    <div id="relative-div"></div>
+</div>
+<script>
+"use strict";
+
+function checkNotVerticallyCentered(dialog) {
+    var centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
+    assert_not_equals(dialog.getBoundingClientRect().top, centeredTop);
+}
+
+function checkVerticallyCentered(dialog) {
+    var centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
+    assert_equals(dialog.getBoundingClientRect().top, centeredTop);
+}
+
+function reset() {
+    if (dialog.open)
+        dialog.close();
+    dialog.remove();
+    document.body.appendChild(dialog);
+    window.scroll(0, 500);
+}
+
+var dialog = document.querySelector('dialog');
+var absoluteContainer = document.querySelector('#absolute-div');
+var relativeContainer = document.querySelector('#relative-div');
+reset();
+
+test(function() {
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+    reset();
+}, "showModal() should center in the viewport");
+
+test(function() {
+    assert_equals(window.getComputedStyle(dialog).top, 'auto');
+    assert_equals(window.getComputedStyle(dialog).bottom, 'auto');
+
+    dialog.style.height = '20px';
+    dialog.showModal();
+
+    assert_not_equals(window.getComputedStyle(dialog).top, 'auto');
+    assert_not_equals(window.getComputedStyle(dialog).bottom, 'auto');
+
+    // Set back original value to 'height'.
+    dialog.style.height = 'auto';
+    reset();
+}, "The dialog is a positioned element, so the top and bottom should not have style auto.");
+
+test(function() {
+    dialog.showModal();
+    dialog.close();
+    window.scroll(0, 2 * window.scrollY);
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+    reset();
+}, "Dialog should be recentered if showModal() is called after close()");
+
+test(function() {
+    dialog.showModal();
+    var expectedTop = dialog.getBoundingClientRect().top;
+    window.scroll(0, window.scrollY * 2);
+
+    // Trigger relayout
+    document.body.offsetHeight;
+
+    window.scroll(0, window.scrollY / 2);
+    assert_equals(dialog.getBoundingClientRect().top, expectedTop);
+    reset();
+}, "Dialog should not recenter on relayout.");
+
+test(function() {
+    dialog.style.height = '20000px';
+    dialog.showModal();
+    assert_equals(dialog.getBoundingClientRect().top, 0);
+
+    // Set back original value to 'height'.
+    dialog.style.height = 'auto';
+    reset();
+}, "A tall dialog should be positioned at the top of the viewport.");
+
+test(function() {
+    document.body.style.width = '4000px';
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+
+    // Set back original value to 'width'.
+    document.body.style.width = 'auto';
+    reset();
+}, "The dialog should be centered regardless of the presence of a horizontal scrollbar.");
+
+test(function() {
+    dialog.remove();
+    absoluteContainer.appendChild(dialog);
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+    dialog.close();
+
+    dialog.remove();
+    relativeContainer.appendChild(dialog);
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+
+    reset();
+}, "Centering should work when dialog is inside positioned containers.");
+
+test(function() {
+    dialog.showModal();
+    var expectedTop = dialog.getBoundingClientRect().top;
+    relativeContainer.style.display = 'none';
+    relativeContainer.style.display = 'block';
+    assert_equals(dialog.getBoundingClientRect().top, expectedTop);
+
+    reset();
+}, "A centered dialog's position should survive becoming display:none temporarily.");
+
+test(function() {
+    // Remove and reinsert so that the document position isn't changed by the second remove and reinsert
+    dialog.remove();
+    relativeContainer.appendChild(dialog);
+
+    dialog.showModal();
+    assert_not_equals(dialog.getBoundingClientRect().top, relativeContainer.getBoundingClientRect().top);
+    dialog.remove();
+
+    relativeContainer.appendChild(dialog);
+    assert_equals(dialog.parentNode, relativeContainer);
+    assert_equals(dialog.getBoundingClientRect().top, relativeContainer.getBoundingClientRect().top);
+
+    reset();
+}, "Dialog should lose centering when removed from the document.");
+
+test(function() {
+    dialog.showModal();
+    dialog.style.top = '0px';
+    var expectedTop = dialog.getBoundingClientRect().top;
+    dialog.close();
+    dialog.showModal();
+    assert_equals(dialog.getBoundingClientRect().top, expectedTop);
+
+    // Set back original value to 'top'.
+    dialog.style.top = 'auto';
+    reset();
+}, "Dialog's specified position should survive after close() and showModal().");
+
+test(function() {
+    dialog.showModal();
+    dialog.removeAttribute('open');
+    window.scroll(0, window.scrollY * 2);
+    checkNotVerticallyCentered(dialog);
+    dialog.showModal();
+    checkVerticallyCentered(dialog);
+
+    reset();
+}, "Dialog should be recentered if showModal() is called after removing 'open'.");
+
+test(function() {
+    dialog.remove();
+    absoluteContainer.appendChild(dialog);
+    absoluteContainer.style.display = 'none';
+    dialog.showModal();
+    absoluteContainer.style.display = 'block';
+    // Since dialog's containing block is the ICB, it's statically positioned after <body>.
+    assert_equals(dialog.getBoundingClientRect().top, document.body.getBoundingClientRect().bottom);
+    reset();
+}, "Dialog should not be centered if showModal() was called when an ancestor had display 'none'.");
+
+test(function() {
+    var offset = 50;
+    dialog.style.top = offset + 'px';
+    dialog.showModal();
+    assert_equals(dialog.getBoundingClientRect().top + window.scrollY, offset);
+    // Set back original value to 'top'.
+    dialog.style.top = 'auto';
+    reset();
+}, "A dialog with specified 'top' should be positioned as usual");
+
+test(function() {
+    var offset = 50;
+    dialog.style.bottom = offset + 'px';
+    dialog.showModal();
+    assert_equals(dialog.getBoundingClientRect().bottom + window.scrollY, window.innerHeight - offset);
+    // Set back original value to 'bottom'.
+    dialog.style.bottom = 'auto';
+    reset();
+}, "A dialog with specified 'bottom' should be positioned as usual");
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-scrolled-viewport.html b/html/semantics/interactive-elements/the-dialog-element/dialog-scrolled-viewport.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+    margin: 0;
+}
+
+dialog {
+    padding : 0;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body style="height: 10000px; width: 10000px">
+<div style="position: absolute; top: 5000px; left: 5000px; width: 20px;">
+    <dialog style="top: 1200px; left: 1200px; right: auto; height: 100px; width: 50%;">
+    </dialog>
+</div>
+<script>
+"use strict";
+function checkPosition(dialog) {
+    assert_equals(dialog.offsetParent, null);
+    assert_equals(dialog.offsetTop, 1200);
+    assert_equals(dialog.offsetLeft, 1200);
+    // Since dialog's 'width' is '50%', the expected width is half of the
+    // viewport width, but viewport width may be odd.
+    var expectedWidth = document.documentElement.clientWidth / 2;
+    assert_approx_equals(dialog.clientWidth, expectedWidth, 0.5);
+}
+
+test(function() {
+  // The dialog should be onscreen with a width of 50% of the viewport. It is the child of a
+  // narrow element positioned off screen, but its containing block is the initial containing
+  // block, so its position and percent lengths are relative to that.
+  window.scroll(1000, 1000);
+  var dialog = document.querySelector('dialog');
+  dialog.showModal();
+  checkPosition(dialog);
+  dialog.close();
+}, "Tests modal dialog's containing block is the initial containing block");
+</script>
+</body>
+</html>
diff --git a/...ntics/interactive-elements/the-dialog-element/inert-does-not-match-disabled-selector.html b/...ntics/interactive-elements/the-dialog-element/inert-does-not-match-disabled-selector.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+button {
+    color: green;
+}
+
+button:disabled {
+    color: red;
+}
+
+.trigger-style-recalc {
+    /* No change, we just need a new style recalculation. */
+    font-weight:bold;
+}
+</style>
+</head>
+<body style="color: green">
+<button>The test passes if this is in green.</button>
+<dialog></dialog>
+<script>
+"use strict";
+test(function() {
+    document.querySelector('dialog').showModal();
+    var button = document.querySelector('button');
+    button.classList.add('trigger-style-recalc');
+    var color = document.defaultView.getComputedStyle(button).getPropertyValue('color');
+    assert_equals(color, 'rgb(0, 128, 0)');
+}, "Tests inert elements do not match the :disabled selector.");
+</script>
+</body>
+</html>
diff --git a/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html b/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body id="body" tabindex="1">
+<dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog>
+<dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog>
+<div id="container">
+    <input id="text" type="text">
+    <input id="datetime" type="datetime">
+    <input id="color" type="color">
+    <select id="select">
+        <optgroup id="optgroup">
+            <option id="option">Option</option>
+        </optgroup>
+    </select>
+    <div id="contenteditable-div" contenteditable>I'm editable</div>
+    <span id="tabindex-span" tabindex="0">I'm tabindexed.</div>
+    <embed id="embed" type="application/x-blink-test-plugin" width=100 height=100></embed>
+    <a id="anchor" href="">Link</a>
+</div>
+<script>
+"use strict";
+// The test passses if only the topmost dialog and its button are focusable.
+
+function testFocus(element, expectFocus) {
+    var focusedElement = null;
+    element.addEventListener('focus', function() { focusedElement = element; }, false);
+    element.focus();
+    var theElement = element;
+    assert_equals(focusedElement === theElement, expectFocus, element.id);
+}
+
+function testTree(element, expectFocus) {
+    if (element.nodeType == Node.ELEMENT_NODE)
+        testFocus(element, expectFocus);
+    var childNodes = element.childNodes;
+    for (var i = 0; i < childNodes.length; i++)
+        testTree(childNodes[i], expectFocus);
+}
+
+test(function() {
+    var bottomDialog = document.getElementById('bottom-dialog');
+    bottomDialog.showModal();
+
+    var topDialog = document.getElementById('top-dialog');
+    topDialog.showModal();
+
+    testFocus(document.body, false);
+    testTree(topDialog, true);
+    testTree(bottomDialog, false);
+    testTree(document.getElementById('container'), false);
+}, "Test that inert nodes are not focusable.");
+</script>
+</body>
+</html>