зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1684833 [wpt PR 27032] - [selectors] Improve :focus-visible tests, a=testonly
Automatic update from web-platform-tests [selectors] Improve :focus-visible tests * Now we have one test per element, so we have more detailed PASS/FAIL information. We also check that all test conditions (outline and background colors) are right. * Use more common colors in tests like "green" and "red" instead of "darkgreen" and "tomato". * focus-visible-004.html actually set "appearance: none". So elements that are hidden now and not focusable (radio button and checkbox) are removed. * focus-visible-007.html is not modified as it has more problems (see https://crbug.com/976438). -- wpt-commits: 77ffd6eff47bed46236fbea6e998a18e6f4a7800 wpt-pr: 27032
This commit is contained in:
Manuel Rego Casasnovas
moz-wptsync-bot
Родитель
f6970f4cdc
Коммит
b592a9df91
|
|
@ -13,17 +13,17 @@
|
|||
<style>
|
||||
@supports not (selector(:focus-visible)) {
|
||||
:focus {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: darkgreen solid 5px;
|
||||
outline: green solid 5px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -39,7 +39,8 @@
|
|||
<script>
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`);
|
||||
t.done();
|
||||
}));
|
||||
const tab_key = '\ue004';
|
||||
|
|
|
|||
|
|
@ -14,17 +14,17 @@
|
|||
<style>
|
||||
@supports not (selector(:focus-visible)) {
|
||||
:focus {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: darkgreen solid 5px;
|
||||
outline: green solid 5px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -37,76 +37,65 @@
|
|||
</ol>
|
||||
<br>
|
||||
<div>
|
||||
<input data-tested="false" id="input1" value="Focus me."></input>
|
||||
<input class="check" id="input1" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input2" type="text" value="Focus me."></input>
|
||||
<input class="check" id="input2" type="text" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input3" type="email" value="Focus me."></input>
|
||||
<input class="check" id="input3" type="email" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input4" type="password" value="Focus me."></input>
|
||||
<input class="check" id="input4" type="password" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input5" type="search" value="Focus me."></input>
|
||||
<input class="check" id="input5" type="search" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input6" type="telephone" value="Focus me."></input>
|
||||
<input class="check" id="input6" type="telephone" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input7" type="url" value="Focus me."></input>
|
||||
<input class="check" id="input7" type="url" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input8" type="number" value="10000"></input>
|
||||
<input class="check" id="input8" type="number" value="10000"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input9" type="date"></input>
|
||||
<input class="check" id="input9" type="date"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input10" type="datetime-local"></input>
|
||||
<input class="check" id="input10" type="datetime-local"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input11" type="month"></input>
|
||||
<input class="check" id="input11" type="month"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input12" type="time"></input>
|
||||
<input class="check" id="input12" type="time"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="input13" type="week"></input>
|
||||
<input class="check" id="input13" type="week"></input>
|
||||
</div>
|
||||
<div>
|
||||
<textarea data-tested="false" id="input14">Focus me.</textarea>
|
||||
<textarea class="check" id="input14">Focus me.</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<select data-tested="false" id="input15">
|
||||
<select class="check" id="input15">
|
||||
<option>Focus me.</option>
|
||||
<option>Focus me.</option>
|
||||
</select>
|
||||
</div>
|
||||
<script>
|
||||
async_test(function(t) {
|
||||
function mouseClickInTarget(selector) {
|
||||
let target = document.querySelector(selector);
|
||||
return test_driver.click(target);
|
||||
}
|
||||
|
||||
function testNextTarget(e) {
|
||||
let el = e.target;
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)");
|
||||
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));
|
||||
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
}, "Mouse focus on elements which would show a virtual keyboard should match :focus-visible");
|
||||
for (const target of document.querySelectorAll(".check")) {
|
||||
promise_test(() => {
|
||||
return new Promise(resolve => {
|
||||
target.addEventListener("focus", resolve);
|
||||
test_driver.click(target);
|
||||
}).then(() => {
|
||||
assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
|
||||
});
|
||||
}, `Focus element ${target.tagName}#${target.id} via mouse should match :focus-visible as it supports keyboard input`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
background-color: darkseagreen;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -36,45 +36,45 @@
|
|||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
<span data-tested="false" id="el-1" tabindex="1">Focus me</span>
|
||||
<span class="check" id="el-1" tabindex="1">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-tested="false" id="el-2" tabindex="-1">Focus me</span>
|
||||
<span class="check" id="el-2" tabindex="-1">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-tested="false" id="el-3" tabindex="0">Focus me</span>
|
||||
<span class="check" id="el-3" tabindex="0">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<button data-tested="false" id="el-4">Focus me</span>
|
||||
<button class="check" id="el-4">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-5" type="button" value="Focus me"></input>
|
||||
<input class="check" id="el-5" type="button" value="Focus me"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-6" type="image" alt="Focus me."></input>
|
||||
<input class="check" id="el-6" type="image" alt="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-7" type="reset" value="Focus me."></input>
|
||||
<input class="check" id="el-7" type="reset" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-8" type="submit" value="Focus me."></input>
|
||||
<input class="check" 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>
|
||||
<label><input class="check" 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>
|
||||
<label><input class="check" id="el-10" type="radio"></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>
|
||||
<input id="el-11" type="file" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-13" type="range"></input> Focus me.</label>
|
||||
<label><input class="check" id="el-12" type="range"></input> Focus me.</label>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Ensure the color input is last, as it has a pop-up which obscures other elements -->
|
||||
<label><input data-tested="false" id="el-11" type="color"></input> Focus me.</label>
|
||||
<label><input class="check" id="el-13" type="color"></input> Focus me.</label>
|
||||
</div>
|
||||
<script>
|
||||
function mouseClickInTarget(selector) {
|
||||
|
|
@ -82,22 +82,17 @@
|
|||
return test_driver.click(target);
|
||||
}
|
||||
|
||||
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).outlineStyle, "none");
|
||||
el.dataset.tested = true;
|
||||
if (document.querySelector("[data-tested=false]")) {
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
} else {
|
||||
t.done();
|
||||
}
|
||||
}));
|
||||
for (const target of document.querySelectorAll(".check")) {
|
||||
promise_test(() => {
|
||||
return new Promise(resolve => {
|
||||
target.addEventListener("focus", resolve);
|
||||
test_driver.click(target);
|
||||
}).then(() => {
|
||||
assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${target.tagName}#${target.id} should be lime`);
|
||||
assert_not_equals(getComputedStyle(target).outlineColor, "rgb(255, 0, 0)", `outlineColor for ${target.tagName}#${target.id} should NOT be red`);
|
||||
});
|
||||
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
}, "Mouse focus on input elements which do not show a virtual keyboard should NOT match :focus-visible");
|
||||
}, `Focus element ${target.tagName}#${target.id} via mouse should NOT match :focus-visible as it does NOT support keyboard input`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,12 @@
|
|||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
background-color: darkseagreen;
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
.check {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -36,47 +41,39 @@
|
|||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
<span data-tested="false" id="el-1" tabindex="1">Focus me</span>
|
||||
<span class="check" id="el-1" tabindex="1">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-tested="false" id="el-2" tabindex="-1">Focus me</span>
|
||||
<span class="check" id="el-2" tabindex="-1">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<span data-tested="false" id="el-3" tabindex="0">Focus me</span>
|
||||
<span class="check" id="el-3" tabindex="0">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<button data-tested="false" id="el-4">Focus me</span>
|
||||
<button class="check" id="el-4">Focus me</span>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-5" type="button" value="Focus me"></input>
|
||||
<input class="check" id="el-5" type="button" value="Focus me"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-6" type="image" alt="Focus me."></input>
|
||||
<input class="check" id="el-6" type="image" alt="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<input data-tested="false" id="el-7" type="reset" value="Focus me."></input>
|
||||
<input class="check" 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>
|
||||
<input class="check" id="el-8" type="submit" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Focusing file input triggers a modal, so only test manually -->
|
||||
<input id="el-12" type="file" value="Focus me."></input>
|
||||
<input id="el-9" type="file" value="Focus me."></input>
|
||||
</div>
|
||||
<div>
|
||||
<label><input data-tested="false" id="el-13" type="range"></input> Focus me.</label>
|
||||
<label><input class="check" id="el-10" type="range"></input> Focus me.</label>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Ensure the color input is last, as it has a pop-up which obscures other elements,
|
||||
causing the `mouseClickInTarget` method to fail and the test to hang waiting for
|
||||
a click event.-->
|
||||
<label><input data-tested="false" id="el-11" type="color"></input> Focus me.</label>
|
||||
<!-- Ensure the color input is last, as it has a pop-up which obscures other elements -->
|
||||
<label><input class="check" id="el-11" type="color"></input> Focus me.</label>
|
||||
</div>
|
||||
<script>
|
||||
function mouseClickInTarget(selector) {
|
||||
|
|
@ -84,22 +81,17 @@
|
|||
return test_driver.click(target);
|
||||
}
|
||||
|
||||
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).outlineStyle, "none");
|
||||
el.dataset.tested = true;
|
||||
if (document.querySelector("[data-tested=false]")) {
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
} else {
|
||||
t.done();
|
||||
}
|
||||
}));
|
||||
for (const target of document.querySelectorAll(".check")) {
|
||||
promise_test(() => {
|
||||
return new Promise(resolve => {
|
||||
target.addEventListener("focus", resolve);
|
||||
test_driver.click(target);
|
||||
}).then(() => {
|
||||
assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${target.tagName}#${target.id} should be lime`);
|
||||
assert_not_equals(getComputedStyle(target).outlineColor, "rgb(255, 0, 0)", `outlineColor for ${target.tagName}#${target.id} should NOT be red`);
|
||||
});
|
||||
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
}, "Mouse focus on input elements which do not show a virtual keyboard should NOT match :focus-visible - not affected by -webkit-appearance");
|
||||
}, `Focus element ${target.tagName}#${target.id} via mouse should NOT match :focus-visible as it does NOT support keyboard input - not affected by "appearance: none"`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: red solid 5px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
background-color: darkseagreen;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -38,7 +42,8 @@
|
|||
});
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(el).outlineStyle, "none");
|
||||
assert_equals(getComputedStyle(el).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${el.tagName}#${el.id} should be lime`);
|
||||
assert_not_equals(getComputedStyle(el).outlineColor, "rgb(255, 0, 0)", `outlineColor for ${el.tagName}#${el.id} should NOT be red`);
|
||||
t.done();
|
||||
}));
|
||||
test_driver.click(button);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<style>
|
||||
span[contenteditable] {
|
||||
|
|
@ -17,19 +16,13 @@
|
|||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
@supports not (selector(:focus-visible)) {
|
||||
:focus {
|
||||
background-color: tomato;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: darkgreen solid 5px;
|
||||
outline: green solid 5px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -48,7 +41,8 @@
|
|||
var actions_promise;
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`);
|
||||
// Make sure the test finishes after all the input actions are completed.
|
||||
actions_promise.then( () => t.done() );
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -8,21 +8,20 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<style>
|
||||
@supports not (selector(:focus-visible)) {
|
||||
#el:focus {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: darkgreen solid 5px;
|
||||
outline: green solid 5px;
|
||||
}
|
||||
|
||||
#el:focus:not(:focus-visible) {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
outline: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -44,9 +43,11 @@
|
|||
el.focus();
|
||||
}));
|
||||
el.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`);
|
||||
t.done();
|
||||
}));
|
||||
test_driver.send_keys(el, "\ue004\ue007"); // TAB and ENTER
|
||||
}, "Programmatic focus after keypress should match :focus-visible");
|
||||
} else {
|
||||
button.addEventListener("click", () => {
|
||||
|
|
|
|||
|
|
@ -10,16 +10,16 @@
|
|||
<style>
|
||||
@supports not (selector(:focus-visible)) {
|
||||
#buton:focus {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: darkgreen solid 5px;
|
||||
outline: green solid 5px;
|
||||
}
|
||||
|
||||
#button:focus:not(:focus-visible) {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
outline: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,13 +34,15 @@
|
|||
<script>
|
||||
async_test(function(t) {
|
||||
button.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(button).outlineColor, "rgb(0, 100, 0)");
|
||||
assert_equals(getComputedStyle(button).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${button.tagName}#${button.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(button).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${button.tagName}#${button.id} should NOT be red`);
|
||||
t.done();
|
||||
}));
|
||||
|
||||
// Handle the case where the button is focused before the test runs.
|
||||
if (document.activeElement === button) {
|
||||
assert_equals(getComputedStyle(button).outlineColor, "rgb(0, 100, 0)");
|
||||
assert_equals(getComputedStyle(button).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${button.tagName}#${button.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(button).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${button.tagName}#${button.id} should NOT be red`);
|
||||
t.done();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,16 +10,16 @@
|
|||
<style>
|
||||
@supports not (selector(:focus-visible)) {
|
||||
:focus {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: darkgreen solid 5px;
|
||||
outline: green solid 5px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
outline: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,7 +38,8 @@
|
|||
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`);
|
||||
t.done();
|
||||
}));
|
||||
}, "Programmatic focus on page load should match :focus-visible");
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<style>
|
||||
@supports not (selector(:focus-visible)) {
|
||||
#next:focus {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
}
|
||||
|
||||
#next:focus-visible {
|
||||
outline: darkgreen solid 5px;
|
||||
outline: green solid 5px;
|
||||
}
|
||||
|
||||
#next:focus:not(:focus-visible) {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
outline: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -49,7 +49,8 @@
|
|||
|
||||
async_test(function(t) {
|
||||
next.addEventListener("focus", t.step_func(() => {
|
||||
assert_equals(getComputedStyle(next).outlineColor, "rgb(0, 100, 0)");
|
||||
assert_equals(getComputedStyle(next).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${next.tagName}#${next.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(next).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${next.tagName}#${next.id} should NOT be red`);
|
||||
t.done()
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -13,18 +13,18 @@
|
|||
<style>
|
||||
@supports not (selector(:focus-visible)) {
|
||||
:focus {
|
||||
background-color: tomato;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 0;
|
||||
outline-color: tomato;
|
||||
background-color: tomato;
|
||||
outline-color: red;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: darkgreen solid 5px;
|
||||
outline: green solid 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -43,12 +43,14 @@
|
|||
var t = async_test( "Keyboard focus should match :focus-visible");
|
||||
|
||||
el.addEventListener("click", t.step_func(function(e) {
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)", "after focus()");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`);
|
||||
}), true);
|
||||
|
||||
el.addEventListener("keydown", t.step_func(function(e) {
|
||||
if (e.altKey || e.ctrlKey || e.metaKey) {
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)", "after kb event");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`);
|
||||
assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`);
|
||||
t.done();
|
||||
return;
|
||||
}
|
||||
|
|
@ -56,10 +58,6 @@
|
|||
t.done();
|
||||
}));
|
||||
|
||||
t.step_timeout(() => {
|
||||
assert_true(false, "timeout");
|
||||
}, 1000);
|
||||
|
||||
const ctrl_key = '\uE009';
|
||||
test_driver.click(el).then(() => {
|
||||
return test_driver.send_keys(el, ctrl_key);
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче