mirror of
https://github.com/servo/servo.git
synced 2025-08-16 02:45:36 +01:00
Update web-platform-tests to revision 155daf0c385420faf208b8bd5e319e244ec7f9cc
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
4e6b100c7e
commit
e9bdf87a27
768 changed files with 5782 additions and 26218 deletions
|
|
@ -8,21 +8,21 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
:focus-visible { color: rgb(0, 128, 0); }
|
||||
:focus-visible { background-color: rgb(128, 196, 128); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol id="instructions">
|
||||
<li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
|
||||
<li>Use the TAB key on the keyboard to focus the element below that says "Focus me."</li>
|
||||
<li>If the element does not have green text, then the test result is FAILURE. If the element has green text, then the test result is SUCCESS.</li>
|
||||
<li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<div id="el" tabindex="0">Focus me.</div>
|
||||
<script>
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(el).color, "rgb(0, 128, 0)");
|
||||
assert_equals(getComputedStyle(el).backgroundColor, "rgb(128, 196, 128)");
|
||||
t.done();
|
||||
}));
|
||||
}, "Keyboard focus should match :focus-visible");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
:focus-visible { background-color: rgb(128, 196, 128); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol id="instructions">
|
||||
<li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
|
||||
<li><strong>Click</strong> each form element below to focus it.</li>
|
||||
<li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
<input data-tested="false" id="input1" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input2" type="text" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input3" type="email" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input4" type="password" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input5" type="search" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input6" type="telephone" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input7" type="url" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input8" type="number" value="10000"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input9" type="date"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input10" type="datetime-local"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input11" type="month"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input12" type="time"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input13" type="week"></input>
|
||||
</div>
|
||||
<div>
|
||||
<textarea data-tested="false" id="input14">Focus me.</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<select data-tested="false" id="input15">
|
||||
<option>Focus me.</option>
|
||||
<option>Focus me.</option>
|
||||
</select>
|
||||
</div>
|
||||
<script>
|
||||
async_test(function(t) {
|
||||
function testNextTarget(e) {
|
||||
let el = e.target;
|
||||
assert_equals(getComputedStyle(el).backgroundColor,
|
||||
"rgb(128, 196, 128)");
|
||||
el.dataset.tested = true;
|
||||
let nextTarget = document.querySelector("[data-tested=false]");
|
||||
if (nextTarget) {
|
||||
nextTarget.addEventListener("click", testNextTarget);
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
} else {
|
||||
t.done();
|
||||
}
|
||||
}
|
||||
input1.addEventListener("click", t.step_func(testNextTarget));
|
||||
}, "Mouse focus on elements which would show a virtual keyboard should match :focus-visible");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
:focus:not(:focus-visible) { background-color: rgb(128, 196, 128); }
|
||||
label:focus-within:not(:focus-visible) { background-color: rgb(128, 196, 128); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol id="instructions">
|
||||
<li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
|
||||
<li>Click each element element below to focus it.</li>
|
||||
<li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
<span data-tested="false" id="el-1" tabindex="1">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-tested="false" id="el-2" tabindex="-1">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-tested="false" id="el-3" tabindex="0">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<button data-tested="false" id="el-4">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-5" type="button" value="Focus me"</input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-6" type="image" alt="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-7" type="reset" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-8" type="submit" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-9" type="checkbox"></input> Focus me.</label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-10" type="radio"></input> Focus me.</label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-11" type="color"></input> Focus me.</label>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Focusing file input triggers a modal, so only test manually -->
|
||||
<input id="el-12" type="file" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-13" type="range"></input> Focus me.</label>
|
||||
</div>
|
||||
<script>
|
||||
async_test(function(t) {
|
||||
document.querySelectorAll("[data-tested]").forEach((el) => {
|
||||
el.addEventListener("click", t.step_func((e) => {
|
||||
let el = e.target;
|
||||
assert_equals(getComputedStyle(el).backgroundColor,
|
||||
"rgb(128, 196, 128)");
|
||||
el.dataset.tested = true;
|
||||
if (document.querySelector("[data-tested=false]")) {
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
} else {
|
||||
t.done();
|
||||
}
|
||||
}));
|
||||
});
|
||||
}, "Mouse focus on input elements which do not show a virtual keyboard should NOT match :focus-visible");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<link rel="author" title="Rob Dodson" href="robdodson@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
:focus:not(:focus-visible) { background-color: rgb(128, 196, 128); }
|
||||
label:focus-within:not(:focus-visible) { background-color: rgb(128, 196, 128); }
|
||||
* { -webkit-appearance: none }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol id="instructions">
|
||||
<li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
|
||||
<li>Click each element element below to focus it.</li>
|
||||
<li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
<span data-tested="false" id="el-1" tabindex="1">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-tested="false" id="el-2" tabindex="-1">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-tested="false" id="el-3" tabindex="0">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<button data-tested="false" id="el-4">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-5" type="button" value="Focus me"</input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-6" type="image" alt="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-7" type="reset" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-8" type="submit" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-9" type="checkbox"></input> Focus me.</label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-10" type="radio"></input> Focus me.</label>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-11" type="color"></input> Focus me.</label>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Focusing file input triggers a modal, so only test manually -->
|
||||
<input id="el-12" type="file" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-13" type="range"></input> Focus me.</label>
|
||||
</div>
|
||||
<script>
|
||||
async_test(function(t) {
|
||||
document.querySelectorAll("[data-tested]").forEach((el) => {
|
||||
el.addEventListener("click", t.step_func((e) => {
|
||||
let el = e.target;
|
||||
assert_equals(getComputedStyle(el).backgroundColor,
|
||||
"rgb(128, 196, 128)");
|
||||
el.dataset.tested = true;
|
||||
if (document.querySelector("[data-tested=false]")) {
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
} else {
|
||||
t.done();
|
||||
}
|
||||
}));
|
||||
});
|
||||
}, "Mouse focus on input elements which do not show a virtual keyboard should NOT match :focus-visible - not affected by -webkit-appearance");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<link rel="author" title="Rob Dodson" href="robdodson@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
:focus-visible { background-color: rgb(128, 196, 128); }
|
||||
:focus:not(:focus-visible) { background-color: rgb(196, 128, 128); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol id="instructions">
|
||||
<li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
|
||||
<li>Click the button below that says "Click me."</li>
|
||||
<li>If the element that says "I will be focused programmatically." does not have a green background, then the test result is FAILURE. If the element has green background, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<button id="button">Click me.</button>
|
||||
<div id="el" tabindex="-1">I will be focused programmatically.</el>
|
||||
<script>
|
||||
button.addEventListener("click", () => {
|
||||
el.focus();
|
||||
});
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(() => {
|
||||
assert_equals(getComputedStyle(el).backgroundColor,
|
||||
"rgb(128, 196, 128)");
|
||||
t.done();
|
||||
}));
|
||||
el.focus();
|
||||
}, "Programmatic focus should always match :focus-visible");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<link rel="author" title="Rob Dodson" href="robdodson@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
:focus-visible { background-color: rgb(128, 196, 128); }
|
||||
:focus:not(:focus-visible) { background-color: rgb(196, 128, 128); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol id="instructions">
|
||||
<li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
|
||||
<li>Click the button below that says "Click me."</li>
|
||||
<li>If the element that says "I will be focused programmatically." does not have a <strong>green</strong> background, then the test result is FAILURE. If the element <em>has</em> a <strong>green</strong> background, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<button id="button">Click me.</button>
|
||||
<div id="el" tabindex="-1">I will be focused programmatically.</el>
|
||||
<script>
|
||||
button.addEventListener("click", () => {
|
||||
el.focus();
|
||||
});
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(() => {
|
||||
assert_equals(getComputedStyle(el).backgroundColor,
|
||||
"rgb(128, 196, 128)");
|
||||
t.done();
|
||||
}));
|
||||
el.focus();
|
||||
}, "Programmatic focus should always match :focus-visible");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org" />
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
span[contenteditable] {
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
span[contenteditable]:focus-visible { background-color: rgb(128, 196, 128); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ol id="instructions">
|
||||
<li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
|
||||
<li><strong>Click</strong> the content editable span below to focus it.</li>
|
||||
<li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
<span id="el" contenteditable>Focus me</span>
|
||||
</div>
|
||||
<script>
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(el).backgroundColor, "rgb(128, 196, 128)");
|
||||
t.done();
|
||||
}));
|
||||
}, "Focus should always match :focus-visible on content editable divs");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue