mirror of
https://github.com/servo/servo.git
synced 2025-08-07 22:45:34 +01:00
Update web-platform-tests to revision 4a5223502fa660ce03e470af6a61c8bc26c5a8ee
This commit is contained in:
WPT Sync Bot
parent
c5f7c9ccf3
commit
e891345f26
1328 changed files with 36632 additions and 20588 deletions
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<div id="host"><div></div></div>
|
||||
<script>
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
:host ::slotted(div) { width: 100px; height: 100px; background: green; }
|
||||
* :host ::slotted(div) { background: red; }
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
:host { width: 100px; height: 100px; background: green; }
|
||||
* :host { background: red; }
|
||||
</style>
|
||||
`;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: element style is correctly updated for rule with :host</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/#host-selector">
|
||||
<div id="host"><div id="slotted"></div></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
:host ::slotted(div) { width: 100px; height: 100px; background: red; }
|
||||
:host ::slotted(.foo) { background: green; }
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
assert_equals(getComputedStyle(slotted).backgroundColor, "rgb(255, 0, 0)");
|
||||
host.firstElementChild.classList.add('foo');
|
||||
assert_equals(getComputedStyle(slotted).backgroundColor, "rgb(0, 128, 0)");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: :host in DOM APIs</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/#host-selector">
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `<div></div>`;
|
||||
assert_false(host.matches(":host"), ":host shouldn't match from CSSOM from outside the shadow tree");
|
||||
assert_true(root.firstElementChild.matches(":host div"), ":host should match from within the shadow tree");
|
||||
assert_equals(root.querySelector(":host div"), root.firstElementChild, ":host should match from within the shadow tree");
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: element style is correctly updated for rule with :host(..)</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/#host-selector">
|
||||
<div id="host"><div id="slotted"></div></div>
|
||||
<script>
|
||||
test(function() {
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
:host ::slotted(div) { width: 100px; height: 100px; background: red; }
|
||||
:host(.foo) ::slotted(div) { background: green; }
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
assert_equals(getComputedStyle(slotted).backgroundColor, "rgb(255, 0, 0)");
|
||||
host.classList.add('foo');
|
||||
assert_equals(getComputedStyle(slotted).backgroundColor, "rgb(0, 128, 0)");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: :host multiple times in the same compound selector.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
:host:host { width: 100px; height: 100px; background: green }
|
||||
</style>
|
||||
`;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: :host doesn't match nested shadow hosts.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<style>
|
||||
#host {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<div id="host">FAIL</div>
|
||||
<script>
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
div {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
:host { background: red !important }
|
||||
div:host { background: red !important }
|
||||
</style>
|
||||
<div id="nested-host">FAIL - nested shadow host</div>
|
||||
`;
|
||||
root.getElementById("nested-host").attachShadow({ mode: "open" });
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: :host matches while collecting ::slotted rules</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
|
||||
<link rel="match" href="reference/green-box.html">
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<div id="host"><div></div></div>
|
||||
<script>
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
::slotted(div) { width: 100px; height: 100px; background: red; }
|
||||
:host ::slotted(div) { background: green; }
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scoping Module Level 1 - Dynamic mutations to both shadow root and shadow host subtrees</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model">
|
||||
<link rel="help" href="https://bugzil.la/1303605">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<style>
|
||||
#host {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#host > div {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
document.body.offsetTop;
|
||||
|
||||
root.innerHTML = `<slot name="slot1"></slot><slot name="slot2"></slot>`;
|
||||
host.innerHTML = `<div slot="slot1"></div><div slot="slot2"></div>`;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scoping: Dynamic reassignment of a slot.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping/#selectors-data-model">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1435632">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
<div id="host">
|
||||
<div id="green" style="background: green"></div>
|
||||
<div id="red" style="background: red" slot="myslot"></div>
|
||||
</div>
|
||||
<script>
|
||||
let root = host.attachShadow({ mode: "open" });
|
||||
root.innerHTML = `
|
||||
<style>::slotted(div) { width: 100px; height: 100px }</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<slot name="myslot">FAIL</slot>
|
||||
`;
|
||||
document.body.offsetTop;
|
||||
green.setAttribute("slot", "myslot");
|
||||
red.removeAttribute("slot");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue