Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add WPT tests for inert #12017

Merged
merged 1 commit into from
Aug 8, 2018
Merged

Add WPT tests for inert #12017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions dom/inert/inert-does-not-match-disabled-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
29 changes: 29 additions & 0 deletions html/editing/focus/inert/inert-does-not-match-disabled-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
43 changes: 43 additions & 0 deletions html/editing/focus/inert/inert-in-shadow-dom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
55 changes: 55 additions & 0 deletions html/editing/focus/inert/inert-inlines.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
53 changes: 53 additions & 0 deletions html/editing/focus/inert/inert-label-focus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
45 changes: 45 additions & 0 deletions html/editing/focus/inert/inert-node-is-uneditable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
79 changes: 79 additions & 0 deletions html/editing/focus/inert/inert-node-is-unfocusable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 20 additions & 0 deletions html/editing/focus/inert/inert-node-is-unselectable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>