Bug 1476240 [wpt PR 12017] - Add WPT tests for inert, a=testonly
authorAlice Boxhall <aboxhall@chromium.org>
Mon, 13 Aug 2018 18:20:23 +0000
changeset 486601 a25097d06d50803b6e53483961d3315270c06410
parent 486600 240b04560d55f2076e008e84d9b8954a94b63cea
child 486602 93e702f219aad32791b0abda2569480dff80d52d
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1476240, 12017, 692360, 1139846, 581425
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1476240 [wpt PR 12017] - Add WPT tests for inert, a=testonly Automatic update from web-platform-testsAdd WPT tests for inert Bug: 692360 Change-Id: Ie549ed3d33bd7f2cb7c5be070f931e29a2cb106b Reviewed-on: https://chromium-review.googlesource.com/1139846 Commit-Queue: Alice Boxhall <aboxhall@chromium.org> Reviewed-by: Philip J├Ągenstedt <foolip@chromium.org> Cr-Commit-Position: refs/heads/master@{#581425} -- wpt-commits: 1048171f1150d1e495960ac2ea5f9a40cee032e6 wpt-pr: 12017
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/dom/inert/inert-does-not-match-disabled-selector.html
testing/web-platform/tests/html/editing/focus/inert/inert-does-not-match-disabled-selector.html
testing/web-platform/tests/html/editing/focus/inert/inert-in-shadow-dom.html
testing/web-platform/tests/html/editing/focus/inert/inert-inlines.html
testing/web-platform/tests/html/editing/focus/inert/inert-label-focus.html
testing/web-platform/tests/html/editing/focus/inert/inert-node-is-uneditable.html
testing/web-platform/tests/html/editing/focus/inert/inert-node-is-unfocusable.html
testing/web-platform/tests/html/editing/focus/inert/inert-node-is-unselectable.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -338901,16 +338901,22 @@
     ]
    ],
    "dom/historical.html": [
     [
      "/dom/historical.html",
      {}
     ]
    ],
+   "dom/inert/inert-does-not-match-disabled-selector.html": [
+    [
+     "/dom/inert/inert-does-not-match-disabled-selector.html",
+     {}
+    ]
+   ],
    "dom/interface-objects.html": [
     [
      "/dom/interface-objects.html",
      {}
     ]
    ],
    "dom/interfaces.html": [
     [
@@ -354061,16 +354067,62 @@
     ]
    ],
    "html/editing/focus/focus-management/focus-events.html": [
     [
      "/html/editing/focus/focus-management/focus-events.html",
      {}
     ]
    ],
+   "html/editing/focus/inert/inert-does-not-match-disabled-selector.html": [
+    [
+     "/html/editing/focus/inert/inert-does-not-match-disabled-selector.html",
+     {}
+    ]
+   ],
+   "html/editing/focus/inert/inert-in-shadow-dom.html": [
+    [
+     "/html/editing/focus/inert/inert-in-shadow-dom.html",
+     {}
+    ]
+   ],
+   "html/editing/focus/inert/inert-inlines.html": [
+    [
+     "/html/editing/focus/inert/inert-inlines.html",
+     {
+      "testdriver": true
+     }
+    ]
+   ],
+   "html/editing/focus/inert/inert-label-focus.html": [
+    [
+     "/html/editing/focus/inert/inert-label-focus.html",
+     {
+      "testdriver": true
+     }
+    ]
+   ],
+   "html/editing/focus/inert/inert-node-is-uneditable.html": [
+    [
+     "/html/editing/focus/inert/inert-node-is-uneditable.html",
+     {}
+    ]
+   ],
+   "html/editing/focus/inert/inert-node-is-unfocusable.html": [
+    [
+     "/html/editing/focus/inert/inert-node-is-unfocusable.html",
+     {}
+    ]
+   ],
+   "html/editing/focus/inert/inert-node-is-unselectable.html": [
+    [
+     "/html/editing/focus/inert/inert-node-is-unselectable.html",
+     {}
+    ]
+   ],
    "html/editing/focus/processing-model/focus-fixup-rule-one-no-dialogs.html": [
     [
      "/html/editing/focus/processing-model/focus-fixup-rule-one-no-dialogs.html",
      {}
     ]
    ],
    "html/editing/focus/processing-model/preventScroll.html": [
     [
@@ -579070,16 +579122,20 @@
   "dom/events/resources/event-global-extra-frame.html": [
    "241dda8b66f8c8fe128e736bcb073479aee634a9",
    "support"
   ],
   "dom/historical.html": [
    "b45bebfb662d4e393f5ddf2ba580d541b865e815",
    "testharness"
   ],
+  "dom/inert/inert-does-not-match-disabled-selector.html": [
+   "74b8ac3f7dd5c3447bf47fd732fade9220497c93",
+   "testharness"
+  ],
   "dom/interface-objects.html": [
    "936d63517eada5521f814fabdbd785a57b9640b2",
    "testharness"
   ],
   "dom/interfaces.html": [
    "111608bcaec1c39fa832474ebe014e8730a40c4e",
    "testharness"
   ],
@@ -593978,16 +594034,44 @@
   "html/editing/focus/focus-management/focus-event-targets-simple.html": [
    "ab7bcfe6d0e636552746def160715bc47e63fb85",
    "testharness"
   ],
   "html/editing/focus/focus-management/focus-events.html": [
    "d63362aaa1828f35de410b56c1ccc2d7869a111e",
    "testharness"
   ],
+  "html/editing/focus/inert/inert-does-not-match-disabled-selector.html": [
+   "defc7cd6c49da58e49bff8e59a79f4a7dd4ff2c6",
+   "testharness"
+  ],
+  "html/editing/focus/inert/inert-in-shadow-dom.html": [
+   "36c962b1fc7d50cb6cb46e7d79d9435323e64ad9",
+   "testharness"
+  ],
+  "html/editing/focus/inert/inert-inlines.html": [
+   "b056c6495d2c54733bee6ab796332ba89f01b379",
+   "testharness"
+  ],
+  "html/editing/focus/inert/inert-label-focus.html": [
+   "8bbe1eca15c7d8f2f9fd5ea48c33cd0a5d5098e0",
+   "testharness"
+  ],
+  "html/editing/focus/inert/inert-node-is-uneditable.html": [
+   "b18d9912eb2d06cd072b79aa6f94002a3c209d1a",
+   "testharness"
+  ],
+  "html/editing/focus/inert/inert-node-is-unfocusable.html": [
+   "8b5de37fdcadedb9d98ec44c9c3c20aea52a0400",
+   "testharness"
+  ],
+  "html/editing/focus/inert/inert-node-is-unselectable.html": [
+   "7d5e90821bb0bd0d83711685853c78ff9fee6c4f",
+   "testharness"
+  ],
   "html/editing/focus/processing-model/focus-fixup-rule-one-no-dialogs.html": [
    "d8171abc715990a9e752c2d974acdfd7ecd34fc2",
    "testharness"
   ],
   "html/editing/focus/processing-model/preventScroll.html": [
    "97d341b30ec849fefc13adb8b3376307fea58b69",
    "testharness"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/dom/inert/inert-does-not-match-disabled-selector.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+button {
+    color: green;
+}
+
+button:disabled {
+    color: red;
+}
+
+</style>
+</head>
+<body style="color: green">
+<button inert>The test passes if this is in green.</button>
+<script>
+test(function() {
+    button = document.querySelector('button');
+    color = document.defaultView.getComputedStyle(button).getPropertyValue('color');
+    assert_false(button.matches(':disabled'));
+}, 'Tests that inert elements do not match the :disabled selector.');
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/focus/inert/inert-does-not-match-disabled-selector.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>inert does not match :disabled selector</title>
+    <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      button {
+        color: green;
+      }
+
+      button:disabled {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <button inert>The test passes if this is in green.</button>
+    <script>
+      test(function() {
+        button = document.querySelector('button');
+        var color = document.defaultView.getComputedStyle(button).getPropertyValue('color');
+        assert_equals(color, 'rgb(0, 128, 0)');
+      }, 'Tests that inert elements do not match the :disabled selector.');
+    </script>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/focus/inert/inert-in-shadow-dom.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>inert inside ShadowRoot affects slotted content</title>
+    <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+  <div>Button 1 should be inert, and Button 2 should not be inert.</div>
+  <div id="shadow-host">
+    <button slot="slot-1" id="button-1">Button 1 (inert)</button>
+    <button slot="slot-2" id="button-2">Button 2 (not inert)</button>
+  </div>
+  <script>
+    const shadowHost = document.getElementById("shadow-host");
+    const shadowRoot = shadowHost.attachShadow({ mode: "open" });
+    const inertDiv = document.createElement("div");
+    inertDiv.inert = true;
+    shadowRoot.appendChild(inertDiv);
+    const slot1 = document.createElement("slot");
+    slot1.name = "slot-1";
+    inertDiv.appendChild(slot1);
+    const slot2 = document.createElement("slot");
+    slot2.name = "slot-2";
+    shadowRoot.appendChild(slot2);
+
+    function testCanFocus(selector, canFocus) {
+      const element = document.querySelector(selector);
+      let focusedElement = null;
+      element.addEventListener("focus", function() { focusedElement = element; }, false);
+      element.focus();
+      assert_equals((focusedElement === element), canFocus);
+    }
+
+    test(() => {
+      testCanFocus("#button-1", false);
+      testCanFocus("#button-2", true);
+    }, "inert inside ShadowRoot affects slotted content");
+  </script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/focus/inert/inert-inlines.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>inert inlines</title>
+    <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/resources/testdriver.js"></script>
+    <script src="/resources/testdriver-vendor.js"></script>
+  </head>
+<body>
+<a inert id="a" href="javascript:void(0)">Click me</a>
+<button inert id="button">Click me</button>
+<div inert id="div" style="background-color: blue; width: 50px; height: 50px">Click me</div>
+<span inert id="span">Click me</span>
+<script>
+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;
+});
+
+promise_test(async () => {
+    for (let id of inertElements) {
+        var element = document.getElementById(id);
+        inertElementFiredOn = false;
+        document.firedOn = false;
+        try {
+          await test_driver.click(element);
+          assert_false(inertElementFiredOn, 'no event should be fired on ' + id);
+          assert_true(document.firedOn, 'event should be fired on document instead of ' + id);
+        } catch (e) {
+          // test driver detects inert elements as unclickable
+          // and throws an error
+          assert_false(inertElementFiredOn, 'no event should be fired on ' + id);
+        }
+    }
+}, 'Tests that inert inlines do not receive mouse events. ' +
+   'To test manually, click on all the "Click me"s. The test ' +
+   'fails if you see red.');
+
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/focus/inert/inert-label-focus.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>inert with label/for</title>
+    <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/resources/testdriver.js"></script>
+    <script src="/resources/testdriver-vendor.js"></script>
+  </head>
+  <body>
+    <label inert id="for-submit" for="submit">Label for Submit</label>
+    <input id="text" type="text">
+    <input id="submit" type="submit">
+
+    <label id="for-input-in-inert-subtree"
+           for="input-in-inert-subtree">Label for input in inert subtree</label>
+    <div inert>
+      <input id="input-in-inert-subtree"></input>
+    </div>
+
+    <script>
+      test(() => {
+        label = document.querySelector('#for-submit');
+        label.focus();
+        assert_equals(document.activeElement, document.querySelector('#submit'));
+      }, 'Calling focus() on an inert label should still send focus to its target.');
+
+      promise_test(async () => {
+        text = document.querySelector('#text');
+        text.focus();
+        label = document.querySelector('#for-submit');
+        try {
+          await test_driver.click(label);
+          assert_equals(document.activeElement, document.body);
+        } catch (e) {
+          // test driver detects inert elements as unclickable
+          // and throws an error
+        }
+      }, 'Clicking on an inert label should send focus to document.body.');
+
+      test(() => {
+        text = document.querySelector('#text');
+        text.focus();
+
+        label = document.querySelector('#for-input-in-inert-subtree');
+        label.focus();
+        assert_equals(document.activeElement, text);
+      }, 'Calling focus() on a label for a control which is in an inert subtree ' +
+         'should have no effect.');
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/focus/inert/inert-node-is-uneditable.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>inert nodes are uneditable</title>
+    <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+<body>
+<span inert id="not-editable" contenteditable>I'm not editable.</span>
+<span id="editable" contenteditable>I'm editable.</span>
+<script>
+var notEditable = document.querySelector('#not-editable');
+var editable = document.querySelector('#editable');
+
+promise_test(async () => {
+    notEditable.focus();
+    var oldValue = notEditable.textContent;
+    assert_equals(oldValue, "I'm not editable.");
+    try {
+      test_driver.keyDown('a');
+      assert_equals(notEditable.textContent, oldValue);
+    } catch (e) {
+      // TODO(crbug.com/828858): Remove this check once bug is resolved.
+      assert_true(false, "send_keys not implemented yet");
+    }
+}, "Can't edit inert contenteditable");
+
+test(() => {
+    editable.focus();
+    var oldValue = editable.textContent;
+    assert_equals(oldValue, "I'm editable.");
+    try {
+      test_driver.keyDown('a');
+      assert_not_equals(editable.textContent, oldValue);
+    } catch (e) {
+      // TODO(crbug.com/828858): Remove this check once bug is resolved.
+      assert_true(false, "send_keys not implemented yet");
+    }
+}, "Can edit non-inert contenteditable");
+
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/focus/inert/inert-node-is-unfocusable.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>inert nodes are unfocusable</title>
+    <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+<body id="body" tabindex="1">
+  <button id="focusable">Outside of inert container</button>
+  <button inert id="inert">Inert button</button>
+  <div inert 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>
+function testFocus(element, expectFocus) {
+    focusedElement = null;
+    element.addEventListener('focus', function() { focusedElement = element; }, false);
+    element.focus();
+    theElement = element;
+    assert_equals(focusedElement === theElement, expectFocus);
+}
+
+function testTree(element, expectFocus, excludeCurrent) {
+    if (element.nodeType == Node.ELEMENT_NODE && !excludeCurrent)
+        testFocus(element, expectFocus);
+    if (element.tagName === "SELECT")
+        return;
+    var childNodes = element.childNodes;
+    for (var i = 0; i < childNodes.length; i++)
+        testTree(childNodes[i], expectFocus);
+}
+
+
+test(function() {
+    testFocus(document.getElementById('focusable'), true);
+}, "Button outside of inert container is focusable.");
+
+test(function() {
+    testFocus(document.getElementById('inert'), false);
+}, "Button with inert atribute is unfocusable.");
+
+test(function() {
+    testTree(document.getElementById('container'), false);
+}, "All focusable elements inside inert subtree are unfocusable");
+
+test(function() {
+    assert_false(document.getElementById("focusable").inert, "Inert not set explicitly is false")
+    assert_true(document.getElementById("inert").inert, "Inert set explicitly is true");
+    assert_true(document.getElementById("container").inert, "Inert set on container is true");
+}, "Can get inert via property");
+
+test(function() {
+    assert_false(document.getElementById("text").inert, "Elements inside of inert subtrees return false when getting inert");
+}, "Elements inside of inert subtrees return false when getting 'inert'");
+
+test(function() {
+    document.getElementById('focusable').inert = true;
+    testFocus(document.getElementById('focusable'), false);
+    document.getElementById('inert').inert = false;
+    testFocus(document.getElementById('inert'), true);
+    document.getElementById('container').inert = false;
+    testTree(document.getElementById('container'), true, true);
+}, "Setting inert via property correctly modifies inert state");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/editing/focus/inert/inert-node-is-unselectable.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>inert nodes are unselectable</title>
+    <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+  </head>
+<body>
+  <div inert>Here is a text node you can't select.</div>
+  <div>I'm selectable.</div>
+<script>
+test(function() {
+    document.execCommand('SelectAll');
+    assert_equals(window.getSelection().toString(), "I'm selectable.");
+}, "Inert nodes cannot be selected.");
+</script>
+</body>
+</html>