Skip to content
Permalink
Browse files
Implement inert attribute behind feature flag
https://bugs.webkit.org/show_bug.cgi?id=165279

Reviewed by Chris Dumez.

LayoutTests/imported/w3c:

Import inert/ WPT directory using `import-w3c-tests -t web-platform-tests/inert`.
WPT revision: web-platform-tests/wpt@f02e38d

* resources/import-expectations.json:
* resources/resource-files.json:
* web-platform-tests/inert/frame/button.html: Added.
* web-platform-tests/inert/frame/w3c-import.log: Added.
* web-platform-tests/inert/inert-does-not-match-disabled-selector.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-does-not-match-disabled-selector.tentative.html: Added.
* web-platform-tests/inert/inert-in-shadow-dom.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-in-shadow-dom.tentative.html: Added.
* web-platform-tests/inert/inert-inlines.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-inlines.tentative.html: Added.
* web-platform-tests/inert/inert-label-focus.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-label-focus.tentative.html: Added.
* web-platform-tests/inert/inert-node-is-uneditable.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-node-is-uneditable.tentative.html: Added.
* web-platform-tests/inert/inert-node-is-unfocusable.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-node-is-unfocusable.tentative.html: Added.
* web-platform-tests/inert/inert-node-is-unselectable.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-node-is-unselectable.tentative.html: Added.
* web-platform-tests/inert/inert-on-slots.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-on-slots.tentative.html: Added.
* web-platform-tests/inert/inert-retargeting-iframe.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-retargeting-iframe.tentative.html: Added.
* web-platform-tests/inert/inert-retargeting.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-retargeting.tentative.html: Added.
* web-platform-tests/inert/w3c-import.log: Added.

Source/WebCore:

Tests: imported/w3c/web-platform-tests/inert/frame/button.html
       imported/w3c/web-platform-tests/inert/inert-does-not-match-disabled-selector.tentative.html
       imported/w3c/web-platform-tests/inert/inert-in-shadow-dom.tentative.html
       imported/w3c/web-platform-tests/inert/inert-inlines.tentative.html
       imported/w3c/web-platform-tests/inert/inert-label-focus.tentative.html
       imported/w3c/web-platform-tests/inert/inert-node-is-uneditable.tentative.html
       imported/w3c/web-platform-tests/inert/inert-node-is-unfocusable.tentative.html
       imported/w3c/web-platform-tests/inert/inert-node-is-unselectable.tentative.html
       imported/w3c/web-platform-tests/inert/inert-on-slots.tentative.html
       imported/w3c/web-platform-tests/inert/inert-retargeting-iframe.tentative.html
       imported/w3c/web-platform-tests/inert/inert-retargeting.tentative.html

* dom/Node.cpp:
(WebCore::Node::isInert const):
* html/HTMLAttributeNames.in:
* html/HTMLElement.idl:

Source/WTF:

Add runtime InertAttributeEnabled feature flag disabled by default.

* Scripts/Preferences/WebPreferencesExperimental.yaml:

LayoutTests:

Create iOS baselines.

* platform/ios-wk2/imported/w3c/web-platform-tests/inert/inert-node-is-uneditable.tentative-expected.txt: Added.
* platform/ios-wk2/imported/w3c/web-platform-tests/inert/inert-retargeting-iframe.tentative-expected.txt: Added.
* platform/ios-wk2/imported/w3c/web-platform-tests/inert/inert-retargeting.tentative-expected.txt: Added.


Canonical link: https://commits.webkit.org/240864@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@281490 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
nt1m committed Aug 24, 2021
1 parent 0885989 commit 7f4b3a76d5c14283ab1de92a5205e82fc773e41d
Showing 37 changed files with 1,326 additions and 1 deletion.
@@ -1,3 +1,16 @@
2021-08-24 Tim Nguyen <ntim@apple.com>

Implement inert attribute behind feature flag
https://bugs.webkit.org/show_bug.cgi?id=165279

Reviewed by Chris Dumez.

Create iOS baselines.

* platform/ios-wk2/imported/w3c/web-platform-tests/inert/inert-node-is-uneditable.tentative-expected.txt: Added.
* platform/ios-wk2/imported/w3c/web-platform-tests/inert/inert-retargeting-iframe.tentative-expected.txt: Added.
* platform/ios-wk2/imported/w3c/web-platform-tests/inert/inert-retargeting.tentative-expected.txt: Added.

2021-08-23 Rob Buis <rbuis@igalia.com>

Null check scriptExecutionContext
@@ -1,3 +1,39 @@
2021-08-24 Tim Nguyen <ntim@apple.com>

Implement inert attribute behind feature flag
https://bugs.webkit.org/show_bug.cgi?id=165279

Reviewed by Chris Dumez.

Import inert/ WPT directory using `import-w3c-tests -t web-platform-tests/inert`.
WPT revision: https://github.com/web-platform-tests/wpt/commit/f02e38d7a67999683d05579f62b339430c61e4ec

* resources/import-expectations.json:
* resources/resource-files.json:
* web-platform-tests/inert/frame/button.html: Added.
* web-platform-tests/inert/frame/w3c-import.log: Added.
* web-platform-tests/inert/inert-does-not-match-disabled-selector.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-does-not-match-disabled-selector.tentative.html: Added.
* web-platform-tests/inert/inert-in-shadow-dom.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-in-shadow-dom.tentative.html: Added.
* web-platform-tests/inert/inert-inlines.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-inlines.tentative.html: Added.
* web-platform-tests/inert/inert-label-focus.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-label-focus.tentative.html: Added.
* web-platform-tests/inert/inert-node-is-uneditable.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-node-is-uneditable.tentative.html: Added.
* web-platform-tests/inert/inert-node-is-unfocusable.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-node-is-unfocusable.tentative.html: Added.
* web-platform-tests/inert/inert-node-is-unselectable.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-node-is-unselectable.tentative.html: Added.
* web-platform-tests/inert/inert-on-slots.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-on-slots.tentative.html: Added.
* web-platform-tests/inert/inert-retargeting-iframe.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-retargeting-iframe.tentative.html: Added.
* web-platform-tests/inert/inert-retargeting.tentative-expected.txt: Added.
* web-platform-tests/inert/inert-retargeting.tentative.html: Added.
* web-platform-tests/inert/w3c-import.log: Added.

2021-08-23 Alex Christensen <achristensen@webkit.org>

Setting window.location.href to an invalid URL should throw a TypeError
@@ -334,6 +334,7 @@
"web-platform-tests/image-decodes": "skip",
"web-platform-tests/imagebitmap-renderingcontext": "import",
"web-platform-tests/images": "import",
"web-platform-tests/inert": "import",
"web-platform-tests/infrastructure": "import",
"web-platform-tests/innerText": "import",
"web-platform-tests/input-events": "skip",
@@ -2772,6 +2772,7 @@
"web-platform-tests/html/webappapis/scripting/events/onerroreventhandler-frame.html",
"web-platform-tests/html/webappapis/user-prompts/cannot-show-simple-dialogs/support/confirm.html",
"web-platform-tests/html/webappapis/user-prompts/cannot-show-simple-dialogs/support/prompt.html",
"web-platform-tests/inert/frame/button.html",
"web-platform-tests/infrastructure/assumptions/ahem-notref.html",
"web-platform-tests/infrastructure/reftest/red.html",
"web-platform-tests/intersection-observer/observer-in-iframe.html",
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow: hidden;
}

button#background {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 40px;
line-height: 53px;
}

button.clicked {
background-color: red;
}

button.clicked::after {
content: " (clicked)";
}

</style>
</head>
<body>
<button id="background">background</button>
<script>
document.body.addEventListener('click', (e) => {
e.target.classList.add('clicked');
});
</script>
</body>
</html>
@@ -0,0 +1,17 @@
The tests in this directory were imported from the W3C repository.
Do NOT modify these tests directly in WebKit.
Instead, create a pull request on the WPT github:
https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------
Properties requiring vendor prefixes:
None
Property values requiring vendor prefixes:
None
------------------------------------------------------------------------
List of files:
/LayoutTests/imported/w3c/web-platform-tests/inert/frame/button.html
@@ -0,0 +1,4 @@
The test passes if this is in green.

PASS Tests that inert elements do not match the :disabled selector.

@@ -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>
@@ -0,0 +1,5 @@
Buttons 1 and 2 should be inert.
Button 1 (inert)

PASS inert on Shadow host affects content in shadow

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inert on Shadow host affects content in shadow</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>Buttons 1 and 2 should be inert.</div>
<div id="shadow-host" inert>
<button id="button-1">Button 1 (inert)</button>
</div>
<script>
/*
Eventual flattened tree structure:
<div id="shadow-host" inert>
#shadow-root (open)
| <slot>
: <button id="button-1">Button 1 (inert)</button> <!-- slotted -->
| </slot>
| <button id="button-2">Button 2 (inert)</button> <!-- in shadow -->
</div>
*/

const shadowHost = document.getElementById("shadow-host");
const shadowRoot = shadowHost.attachShadow({ mode: "open" });

// Button 1 will be slotted
const slot = document.createElement("slot");
shadowRoot.appendChild(slot);

const button2 = document.createElement("button");
button2.id = "button-2";
button2.textContent = "Button 2 (inert)";
shadowRoot.appendChild(button2);

function testCanFocus(selector, canFocus, opt_context) {
let context = opt_context || document;
const element = context.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", false, shadowRoot);
}, "inert on Shadow host affects content in shadow");
</script>
</body>
</html>
@@ -0,0 +1,6 @@
Click me Click me
Click me
Click me

FAIL 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. assert_false: no event should be fired on a expected false got true

@@ -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>
@@ -0,0 +1,7 @@
Label for Submit Label for input in inert subtree


PASS Calling focus() on an inert label should still send focus to its target.
PASS Clicking on an inert label should send focus to document.body.
PASS Calling focus() on a label for a control which is in an inert subtree should have no effect.

@@ -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>
@@ -0,0 +1,5 @@
I'm not editable. aI'm editable.

PASS Can't edit inert contenteditable
PASS Can edit non-inert contenteditable

@@ -0,0 +1,37 @@
<!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>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.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.");
await test_driver.send_keys(document.body, 'a');
assert_equals(notEditable.textContent, oldValue);
}, "Can't edit inert contenteditable");

promise_test(async () => {
editable.focus();
var oldValue = editable.textContent;
assert_equals(oldValue, "I'm editable.");
await test_driver.send_keys(document.body, 'a');
assert_not_equals(editable.textContent, oldValue);
}, "Can edit non-inert contenteditable");

</script>
</body>
</html>

0 comments on commit 7f4b3a7

Please sign in to comment.