mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision de3ae39cb59880a8245431e7f09817a2a4dad1a3
This commit is contained in:
WPT Sync Bot
parent
0c5b020163
commit
b322aa3943
131 changed files with 2717 additions and 600 deletions
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<p>The second line should be just below the first line.</p>
|
||||
<div style="padding-left:100px;">
|
||||
Line 1<br>
|
||||
Line 2
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Auto-positioned out-of-flow positioned box that would have been the sole piece of content on a second line, had it not been out-of-flow positioned</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height" title="10.6.4 Absolutely positioned, non-replaced elements">
|
||||
<link rel="match" href="hypothetical-inline-alone-on-second-line-ref.html" />
|
||||
<p>The second line should be just below the first line.</p>
|
||||
<span style="padding-left:100px;">
|
||||
Line 1<br>
|
||||
<span style="position:absolute; padding-left:100px;">Line 2</span>
|
||||
</span>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Last block with negative in container that reduces container height</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins">
|
||||
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="width:200px; background:red;">
|
||||
<div style="height:200px;">
|
||||
<div style="height:80px; background:green;"></div>
|
||||
</div>
|
||||
<div style="margin-top:-120px; height:20px; background:green;"></div>
|
||||
</div>
|
||||
<div style="width:200px; height:100px; background:green;"></div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Last block with negative in container that reduces container height</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins">
|
||||
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="overflow:hidden; width:200px; background:red;">
|
||||
<div style="height:200px; background:green;"></div>
|
||||
<div style="height:200px; margin-bottom:-200px;"></div>
|
||||
</div>
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
<title>CSS Containment Test: Size containment on table</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-paint-014-ref.html">
|
||||
<meta name=assert content="Size containment does apply to table elements.">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<meta name=assert content="Size containment doesn't apply to table elements.">
|
||||
<style>
|
||||
div {
|
||||
display: table;
|
||||
|
|
@ -13,5 +13,5 @@ div {
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can NOT see the word FAIL below.</p>
|
||||
<div>FAIL</div>
|
||||
<p>This test passes if you can see the word PASS below.</p>
|
||||
<div>PASS</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: non-HTML slot elements don't get display: contents by default.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree">
|
||||
<link rel="help" href="https://bugzil.la/1468127">
|
||||
<body>
|
||||
<script>
|
||||
test(function() {
|
||||
const non_html_slot = document.createElementNS("http://www.w3.org/2000/svg", "slot");
|
||||
document.body.appendChild(non_html_slot);
|
||||
const display = getComputedStyle(non_html_slot).display;
|
||||
// contents would get turned to "none" due to https://drafts.csswg.org/css-display/#unbox-svg
|
||||
assert_true(display != "contents" && display != "none");
|
||||
}, "Non-HTML slot elements shouldn't be display: contents by default.");
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSStyleDeclaration setter works when a node changes document</title>
|
||||
<link rel="author" title="Raphael Kubo da Costa" href="raphael.kubo.da.costa@intel.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-camel-cased-attribute">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-webkit-cased-attribute">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-dashed-attribute">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="original-div" style="background-color:green; height: 100px; width: 100px"></div>
|
||||
<script>
|
||||
// Create and return a 100x100 red <div>.
|
||||
function createDiv(containerDocument) {
|
||||
const div = containerDocument.createElement("div");
|
||||
div.style.backgroundColor = "red";
|
||||
div.style.height = "100px";
|
||||
div.style.width = "100px";
|
||||
containerDocument.body.appendChild(div);
|
||||
return div;
|
||||
}
|
||||
|
||||
async_test(t => {
|
||||
const iframeElement = document.createElement("iframe");
|
||||
iframeElement.addEventListener("load", t.step_func_done(() => {
|
||||
const originalDiv = document.getElementById("original-div");
|
||||
const newDiv = createDiv(iframeElement.contentDocument);
|
||||
|
||||
assert_not_equals(newDiv.ownerDocument, document,
|
||||
"The new <div> belongs to the iframe, not the main document");
|
||||
|
||||
document.body.insertBefore(newDiv, originalDiv);
|
||||
assert_equals(newDiv.ownerDocument, document,
|
||||
"The new <div> now belongs to the main document");
|
||||
|
||||
newDiv.style.backgroundColor = "blue";
|
||||
assert_equals(window.getComputedStyle(newDiv).getPropertyValue("background-color"),
|
||||
"rgb(0, 0, 255)",
|
||||
"The new <div>'s background-color is blue");
|
||||
|
||||
document.body.removeChild(iframeElement);
|
||||
|
||||
newDiv.style.backgroundColor = "green";
|
||||
assert_equals(window.getComputedStyle(newDiv).getPropertyValue("background-color"),
|
||||
"rgb(0, 128, 0)",
|
||||
"The new <div>'s background-color is green");
|
||||
}));
|
||||
document.body.appendChild(iframeElement);
|
||||
}, "Changing the style of a node that switched documents works");
|
||||
</script>
|
||||
|
|
@ -8,21 +8,37 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
:focus-visible { background-color: rgb(128, 196, 128); }
|
||||
:root {
|
||||
--focus-background: hsl(50, 94%, 72%);
|
||||
--focus-ring-color: rgb(59, 153, 252);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-color) auto 5px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:focus {
|
||||
background-color: var(--focus-background);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This test checks that using the Tab key to navigate focus to an element triggers <code>:focus-visible</code> matching.
|
||||
<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 a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
|
||||
<li>If the element does not have a blue outline, then the test result is FAILURE. If the element has a blue outline, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<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).backgroundColor, "rgb(128, 196, 128)");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(59, 153, 252)");
|
||||
t.done();
|
||||
}));
|
||||
}, "Keyboard focus should match :focus-visible");
|
||||
|
|
|
|||
|
|
@ -2,22 +2,38 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<title>CSS Test (Selectors): :focus-visible always matches on texty input elements</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); }
|
||||
:root {
|
||||
--focus-background: hsl(50, 94%, 72%);
|
||||
--focus-ring-color: rgb(59, 153, 252);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-color) auto 5px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:focus {
|
||||
background-color: var(--focus-background);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This test checks that <code>:focus-visible</code> always matches on <code><input></code> elements which take text input, regardless of focus mechanism.
|
||||
<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>
|
||||
<li>If the element does not have a blue outline, then the test result is FAILURE. If the element has a blue outline, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<br>
|
||||
<div>
|
||||
<input data-tested="false" id="input1" value="Focus me."></input>
|
||||
</div>
|
||||
|
|
@ -70,8 +86,7 @@
|
|||
async_test(function(t) {
|
||||
function testNextTarget(e) {
|
||||
let el = e.target;
|
||||
assert_equals(getComputedStyle(el).backgroundColor,
|
||||
"rgb(128, 196, 128)");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(59, 153, 252)");
|
||||
el.dataset.tested = true;
|
||||
let nextTarget = document.querySelector("[data-tested=false]");
|
||||
if (nextTarget) {
|
||||
|
|
|
|||
|
|
@ -2,21 +2,36 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<title>CSS Test (Selectors): :focus-visible does not match on non-texty inputs</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); }
|
||||
:root {
|
||||
--focus-background: hsl(50, 94%, 72%);
|
||||
--focus-ring-color: rgb(59, 153, 252);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-color) auto 5px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:focus {
|
||||
background-color: var(--focus-background);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This test checks that <code>:focus-visible</code> is <em>not</em> triggered by mouse focus on <code><input></code> elements which do not take text input.
|
||||
<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>
|
||||
<li>If the element has a blue outline, then the test result is FAILURE. If the element does NOT have a blue outline, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
|
|
@ -64,8 +79,7 @@
|
|||
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)");
|
||||
assert_equals(getComputedStyle(el).outlineStyle, "none");
|
||||
el.dataset.tested = true;
|
||||
if (document.querySelector("[data-tested=false]")) {
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
|
|
|
|||
|
|
@ -2,22 +2,36 @@
|
|||
<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" />
|
||||
<title>CSS Test (Selectors): :focus-visible does not match on non-texty inputs with appearance: none</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); }
|
||||
* { -webkit-appearance: none }
|
||||
:root {
|
||||
--focus-background: hsl(50, 94%, 72%);
|
||||
--focus-ring-color: rgb(59, 153, 252);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-color) auto 5px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:focus {
|
||||
background-color: var(--focus-background);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This test checks that <code>:focus-visible</code> is <em>not</em> triggered by mouse focus on <code><input></code> elements which do not take text input, even if <code>appearance: none</code> is used.
|
||||
<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>
|
||||
<li>If the element has a blue outline, then the test result is FAILURE. If the element does NOT have a blue outline, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
|
|
@ -65,8 +79,7 @@
|
|||
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)");
|
||||
assert_equals(getComputedStyle(el).outlineStyle, "none");
|
||||
el.dataset.tested = true;
|
||||
if (document.querySelector("[data-tested=false]")) {
|
||||
mouseClickInTarget("[data-tested=false]");
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -2,36 +2,50 @@
|
|||
<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" />
|
||||
<title>CSS Test (Selectors): Programmatic focus causes :focus-visible to match</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); }
|
||||
:focus:not(:focus-visible) { background-color: rgb(196, 128, 128); }
|
||||
:root {
|
||||
--focus-background: hsl(50, 94%, 72%);
|
||||
--focus-ring-color: rgb(59, 153, 252);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-color) auto 5px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:focus {
|
||||
background-color: var(--focus-background);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This test checks that programmatically focusing an element causes <code>:focus-visible</code> matching to trigger.
|
||||
<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>
|
||||
<li>If the element that says "I will be focused programmatically." does not have a blue outline, then the test result is FAILURE. If the element has a blue outline, 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>
|
||||
<div id="el" tabindex="-1">I will be focused programmatically.</div>
|
||||
<script>
|
||||
button.addEventListener("click", () => {
|
||||
el.focus();
|
||||
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();
|
||||
el.addEventListener("focus", t.step_func(() => {
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(59, 153, 252)");
|
||||
t.done();
|
||||
}));
|
||||
el.focus();
|
||||
}, "Programmatic focus should always match :focus-visible");
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<title>CSS Test (Selectors): contenteditable elements always match :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>
|
||||
|
|
@ -13,14 +13,31 @@
|
|||
background-color: white;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
span[contenteditable]:focus-visible { background-color: rgb(128, 196, 128); }
|
||||
|
||||
:root {
|
||||
--focus-background: hsl(50, 94%, 72%);
|
||||
--focus-ring-color: rgb(59, 153, 252);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-color) auto 5px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:focus {
|
||||
background-color: var(--focus-background);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This test checks that <code>:focus-visible</code> always matches on elements with <code>contenteditable=true</code> set.
|
||||
<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>
|
||||
<li>If the element does not have a blue outline, then the test result is FAILURE. If the element has a blue outline, then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
<br />
|
||||
<div>
|
||||
|
|
@ -29,7 +46,7 @@
|
|||
<script>
|
||||
async_test(function(t) {
|
||||
el.addEventListener("focus", t.step_func(function() {
|
||||
assert_equals(getComputedStyle(el).backgroundColor, "rgb(128, 196, 128)");
|
||||
assert_equals(getComputedStyle(el).outlineColor, "rgb(59, 153, 252)");
|
||||
t.done();
|
||||
}));
|
||||
}, "Focus should always match :focus-visible on content editable divs");
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
|
||||
<title>CSS Test (Selectors): Keyboard use triggers :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>
|
||||
|
|
@ -10,16 +10,38 @@
|
|||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<style>
|
||||
body[data-hadkeydown] #one:focus-visible { background-color: rgb(128, 196, 128); }
|
||||
body:not([data-hadkeydown]) #one:focus-visible { background-color: rgb(196, 128, 128); }
|
||||
:root {
|
||||
--focus-background: hsl(50, 94%, 72%);
|
||||
--focus-ring-color: rgb(59, 153, 252);
|
||||
}
|
||||
|
||||
body:not([data-hadkeydown]) #two:focus-visible { background-color: rgb(196, 128, 128); }
|
||||
body:not([data-hadkeydown]) #two:focus:not(:focus-visible) {
|
||||
background-color: rgb(128, 196, 128);
|
||||
:focus-visible {
|
||||
outline: var(--focus-ring-color) auto 5px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
:focus {
|
||||
background-color: var(--focus-background);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
This test checks that using the keyboard in a way that does not move focus still causes <code>:focus-visible</code> matching to trigger.
|
||||
<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 mouse to focus the element below that says "Click me first."</li>
|
||||
<li>If the element has a blue outline, then the test result is FAILURE.</li>
|
||||
<li>Press the SHIFT key.</li>
|
||||
<li>If the element now DOES NOT have a blue outline, then the test result is FAILURE..</li>
|
||||
<li>Use the mouse to click the element that says "Click me first." a second time</li>
|
||||
<li>If the element now DOES NOT still have a blue outline, then the test result is FAILURE.</li>
|
||||
<li>Use the mouse to click the element below that says "Click me second."</li>
|
||||
<li>If the element does not have a blue outline then the test result is SUCCESS.</li>
|
||||
</ol>
|
||||
|
||||
<div id="one" tabindex="0">Click me first.</div>
|
||||
<div id="two" tabindex="0">Click me second.</div>
|
||||
<script>
|
||||
|
|
@ -54,7 +76,7 @@
|
|||
});
|
||||
|
||||
const test_modality_change = t.step_func(() => {
|
||||
assert_equals(getComputedStyle(one).backgroundColor, "rgb(128, 196, 128)");
|
||||
assert_equals(getComputedStyle(one).outlineColor, "rgb(59, 153, 252)");
|
||||
tested_modality_change = true;
|
||||
one.removeEventListener("keyup", test_modality_change);
|
||||
one.addEventListener("click", test_modality_unchanged_by_mouse_click);
|
||||
|
|
@ -63,7 +85,7 @@
|
|||
|
||||
const test_modality_unchanged_by_mouse_click = t.step_func(() => {
|
||||
assert_true(tested_modality_change);
|
||||
assert_equals(getComputedStyle(one).backgroundColor, "rgb(128, 196, 128)");
|
||||
assert_equals(getComputedStyle(one).outlineColor, "rgb(59, 153, 252)");
|
||||
tested_modality_unchanged_by_mouse_click = true;
|
||||
one.removeEventListener("click", test_modality_unchanged_by_mouse_click);
|
||||
two.addEventListener("focus", test_mouse_focus_after_modality_change);
|
||||
|
|
@ -73,7 +95,7 @@
|
|||
const test_mouse_focus_after_modality_change = t.step_func(() => {
|
||||
assert_true(tested_modality_unchanged_by_mouse_click);
|
||||
assert_false("hadkeydown" in document.body.dataset);
|
||||
assert_equals(getComputedStyle(two).backgroundColor, "rgb(128, 196, 128)");
|
||||
assert_equals(getComputedStyle(two).outlineColor, "rgb(59, 153, 252)");
|
||||
tested_mouse_focus_after_modality_change = true;
|
||||
t.done();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: linear-gradient(to right, currentcolor, limegreen);
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to right, limegreen, limegreen);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- content of test -->
|
||||
<div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'color-stop' on linear-gradient respects 'currentcolor'</title>
|
||||
<link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css3-images/#color-stop-syntax" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-3/#currentcolor" />
|
||||
<link rel="match" href="color-stop-currentcolor-ref.html" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: linear-gradient(to right, currentcolor, limegreen);
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
color: limegreen;
|
||||
background: inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- content of test -->
|
||||
<div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -189,3 +189,6 @@
|
|||
== object-position-svg-002i.html object-position-svg-002-ref.html
|
||||
== object-position-svg-002o.html object-position-svg-002-ref.html
|
||||
== object-position-svg-002p.html object-position-svg-002-ref.html
|
||||
|
||||
# Tests for gradient color stops with 'currentcolor'
|
||||
== color-stop-currentcolor.html color-stop-currentcolor-ref.html
|
||||
Loading…
Add table
Add a link
Reference in a new issue