mirror of
https://github.com/servo/servo.git
synced 2025-08-14 18:05:36 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
4
tests/wpt/web-platform-tests/css/css-scoping-1/OWNERS
Normal file
4
tests/wpt/web-platform-tests/css/css-scoping-1/OWNERS
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@kojiishi
|
||||
@rniwa
|
||||
@tabatkins
|
||||
@fantasai
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - ::before and ::after pseudo class' contents on a node assigned to a slot element must be rendered</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
div {
|
||||
display: block;
|
||||
background: red;
|
||||
line-height: 0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
[slot=foo]::before,
|
||||
[slot=foo]::after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
}
|
||||
[slot=foo]::before,
|
||||
[slot=foo]::after {
|
||||
background: green;
|
||||
}
|
||||
[slot=bar]::before,
|
||||
[slot=bar]::after {
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div slot="foo"></div>
|
||||
<div slot="bar"></div>
|
||||
<div slot="foo"></div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<slot name="foo"></slot>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - Only rules outside a shadow tree must apply to nodes assigned to a slot in the shadow tree.</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
background: green;
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.green {
|
||||
color: green;
|
||||
}
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div class="red">FAIL</div>
|
||||
<div class="green" slot="green">FAIL</div>
|
||||
<div class="red" slot="invalid">FAIL</div>
|
||||
<div class="green" slot="green">FAIL</div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> div { color: yellow; } </style><slot name="green"></slot>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - :host() rules must apply to the shadow host.</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#host-selector">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
host-1, host-2, host-3, host-4, host-5 {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: red;
|
||||
}
|
||||
host-3, host-4, host-5 {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<host-1>
|
||||
<div>FAIL1</div>
|
||||
</host-1>
|
||||
<host-2 id="bar" class="foo" name="baz">
|
||||
<div>FAIL2</div>
|
||||
</host-2>
|
||||
<div>
|
||||
<host-3>
|
||||
FAIL3
|
||||
</host-3>
|
||||
</div>
|
||||
<host-4>
|
||||
<div class="child">FAIL4</div>
|
||||
</host-4>
|
||||
<host-5>
|
||||
<div>FAIL5</div>
|
||||
</host-5>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('host-1');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> :host(host-1) { background: green !important; } </style>';
|
||||
|
||||
shadowHost = document.querySelector('host-2');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> :host(host-2.foo#bar[name=baz]) { background: green !important; } </style>';
|
||||
|
||||
shadowHost = document.querySelector('host-3');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> :host(div host-3) { background: red !important; } </style>';
|
||||
|
||||
shadowHost = document.querySelector('host-4');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> :host(.child) { background: red !important; } </style>';
|
||||
|
||||
shadowHost = document.querySelector('host-5');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> :host(host-1) { background: red !important; } </style>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - :host rules must apply to the shadow host.</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#host-selector">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host, my-host2, my-host3, my-host4 {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
my-host2 {
|
||||
background: green;
|
||||
}
|
||||
my-host3 {
|
||||
background: red;
|
||||
color: green;
|
||||
}
|
||||
my-host4 {
|
||||
background: green;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div>FAIL</div>
|
||||
</my-host>
|
||||
<my-host2>
|
||||
<div>FAIL</div>
|
||||
</my-host2>
|
||||
<my-host3>
|
||||
<div>FAIL</div>
|
||||
</my-host3>
|
||||
<div class="container">
|
||||
<my-host4>
|
||||
<div>FAIL</div>
|
||||
</my-host4>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
var shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> :host { color: green; background: green; } </style><div>FAIL</div>';
|
||||
|
||||
shadowHost = document.querySelector('my-host2');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> :host { color: red; background: red; } div { color: green }</style><div>FAIL</div>';
|
||||
|
||||
shadowHost = document.querySelector('my-host3');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> :host { background: green !important; color: green !important; } </style><div>FAIL</div>';
|
||||
|
||||
shadowHost = document.querySelector('my-host4');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> .container :host { background: red !important; } </style><div>FAIL</div>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - ::before and ::after pseudo elements' contents on a shadow host must be rendered</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
my-host::before {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
background: green;
|
||||
}
|
||||
my-host::after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div>FAIL</div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<div style="width: 100px; height: 50px; background: green"></div>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree.</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div slot="green" style="background: green;"></div>
|
||||
<div style="background: red;">FAIL</div>
|
||||
<div slot="green" style="background: green;"></div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<slot name="green" style="border: solid 50px red;"></slot>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - a shadow tree hides non-distributed children of the host</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div {
|
||||
width: 100%; height: 100%; background: red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div>FAIL</div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<div style="width: 100px; height: 100px; background: green; color:green">FAIL</div>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - overriding slot element's display value should generate boxes</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
my-host > div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div></div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<slot style="display:block; border: solid 25px green;"></slot>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - slot element without distributed nodes must render its fallback content</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
slot {
|
||||
border: solid 10px red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host></my-host>
|
||||
<div class="red"><slot><div class="green"></div></slot></div>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<slot style="border: solid 10px red;">'
|
||||
+ '<div style="width: 100%; height: 100%; background-color: green;"></div></slot>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - Ensure that slot's style is inherited by slotted children</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host, my-non-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
background: red;
|
||||
color: red;
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div slot="green" style="background: green;">FAIL</div>
|
||||
<div slot="green" style="background: inherit;">FAIL</div>
|
||||
</my-host>
|
||||
<my-non-host>
|
||||
<slot name="green" style="color: green; background: green">
|
||||
<div slot="green" style="background: green;">FAIL</div>
|
||||
<div slot="green" style="background: inherit;">FAIL</div>
|
||||
</slot>
|
||||
</my-non-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<slot name="green" style="color: green; background: green"></slot>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree.</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
div {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div slot="green" style="background: green;"></div>
|
||||
<div style="background: red;">FAIL</div>
|
||||
<div slot="green" style="background: green;"></div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<slot name="green"></slot>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - ::slotted pseudo element rule must apply to an element that got slotted via another slot</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
outer-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
outer-host > * {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<outer-host>
|
||||
<span slot="outer">FAIL1</span>
|
||||
<span slot="inner">FAIL2</span>
|
||||
<span slot="both">FAIL3</span>
|
||||
</outer-host>
|
||||
<template id="outer-host-template">
|
||||
<inner-host>
|
||||
<style>
|
||||
::slotted([slot=outer]) { background: green; color: green; }
|
||||
::slotted([slot=both]) { background: green; }
|
||||
span { display: block; width: 100px; height: 25px; }
|
||||
</style>
|
||||
<slot name="outer"></slot>
|
||||
<slot name="inner"></slot>
|
||||
<slot name="both"></slot>
|
||||
<span slot="inner">FAIL4</span>
|
||||
</inner-host>
|
||||
</template>
|
||||
<template id="inner-host-template">
|
||||
<style>
|
||||
::slotted([slot=inner]) { background: green; color: green; }
|
||||
::slotted([slot=both]) { color: green; }
|
||||
</style>
|
||||
<slot></slot>
|
||||
<slot name="inner"></slot>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var outerHost = document.querySelector('outer-host');
|
||||
outerShadow = outerHost.attachShadow({mode: 'closed'});
|
||||
outerShadow.appendChild(document.getElementById('outer-host-template').content.cloneNode(true));
|
||||
|
||||
var innerHost = outerShadow.querySelector('inner-host');
|
||||
innerShadow = innerHost.attachShadow({mode: 'closed'});
|
||||
innerShadow.appendChild(document.getElementById('inner-host-template').content.cloneNode(true));
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - :slotted pseudo element must allow selecting elements assigned to a slot element</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
color: red;
|
||||
background: green;
|
||||
}
|
||||
my-host > div, nested-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div class="green">FAIL1</div>
|
||||
<myelem><span>FAIL2</span></myelem>
|
||||
<nested-host>
|
||||
<span>FAIL3</span>
|
||||
</nested-host>
|
||||
<another-host>
|
||||
<b>FAIL4</b>
|
||||
</another-host>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<slot></slot><style> ::slotted(.green), ::slotted(myelem) { color:green; } </style>';
|
||||
|
||||
shadowHost = document.querySelector('nested-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> .mydiv ::slotted(*) { color:green; } </style><div class=mydiv><slot></slot></div>';
|
||||
|
||||
shadowHost = document.querySelector('another-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> ::slotted(*) { color:green; } </style><slot></slot>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - a selector outside a shadow tree should not match nodes inside the shadow tree</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: red;
|
||||
content: "FAIL";
|
||||
}
|
||||
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div>FAIL</div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<div></div>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - a style rule inside a shadow tree doesn't affect the normal dom</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
color:green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
</my-host>
|
||||
<div>FAIL</div>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<style> div { background: red; } </style>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - a selector inside a shadow tree is matched against nodes in the shadow tree</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
|
||||
<link rel="match" href="reference/green-box.html"/>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
my-host {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div {
|
||||
width: 100%; height: 100%; background: red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<my-host>
|
||||
<div>FAIL</div>
|
||||
</my-host>
|
||||
<script>
|
||||
|
||||
try {
|
||||
var shadowHost = document.querySelector('my-host');
|
||||
shadowRoot = shadowHost.attachShadow({mode: 'open'});
|
||||
shadowRoot.innerHTML = '<div>FAIL</div><style> div {width: 100px; height: 100px; background: green; color:green; } </style>';
|
||||
} catch (exception) {
|
||||
document.body.appendChild(document.createTextNode(exception));
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 - A green box reference</title>
|
||||
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||||
<div style="width: 100px; height: 100px; background: green;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,403 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Shadow DOM: CSS Style Rule cascading</title>
|
||||
<meta name="assert" content="Cascading order test for style rules from various shadow trees.">
|
||||
<link rel="author" title="Takayoshi Kochi" href="mailto:kochi@google.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-cascading">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
// Taken from the example in
|
||||
// https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Shadow-DOM-Cascade-Order.md
|
||||
// https://github.com/w3c/webcomponents/issues/316
|
||||
// https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Shadow-DOM-Cascade-Order-in-v1.md
|
||||
// with element renamed and style rule location changed.
|
||||
//
|
||||
// <style>my-item { color: red; }</style>
|
||||
// <my-list>
|
||||
// <:shadow>
|
||||
// <style>::slotted(my-item) { color: blue; }</style>
|
||||
// <slot/>
|
||||
// </:shadow>
|
||||
// <my-item style="color: green;">
|
||||
// <:shadow>
|
||||
// <style>:host { color: yellow; }</style>
|
||||
// <slot/>
|
||||
// </:shadow>
|
||||
// ITEM
|
||||
// </my-item>
|
||||
// </my-list>
|
||||
//
|
||||
// There are 4 possible style rules that applies to <my-item> above:
|
||||
// 1. document-wide style
|
||||
// 2. ::slotted style in the shadow in <my-list>
|
||||
// 3. :host style in the shadow in <my-item>
|
||||
// 4. inline style within <my-item> itself.
|
||||
//
|
||||
// It could be possible to nest many more shadow trees in <my-list>,
|
||||
// but to prevent the number of combination explosion, such case is covered
|
||||
// in another test file.
|
||||
//
|
||||
// So testing cases where 2 style rules are competing,
|
||||
// 4C2 = 6 combinations exist, multiplied by 4, which is the possible
|
||||
// combination of applying "!important" for the 2 style rules.
|
||||
|
||||
function createMyList(mode, slottedStyle, hostStyle, inlineStyle) {
|
||||
var myList = document.createElement('my-list');
|
||||
var root = myList.attachShadow({'mode': mode});
|
||||
root.innerHTML = '<style>' + slottedStyle + '</style><slot></slot>';
|
||||
var myItem = document.createElement('my-item');
|
||||
if (inlineStyle !== '')
|
||||
myItem.setAttribute('style', inlineStyle);
|
||||
myList.appendChild(myItem);
|
||||
var root2 = myItem.attachShadow({'mode': mode});
|
||||
root2.innerHTML = '<style>' + hostStyle + '</style><slot></slot>';
|
||||
myItem.appendChild(document.createTextNode('ITEM'));
|
||||
return myList;
|
||||
}
|
||||
|
||||
function testCascadingOrder(mode) {
|
||||
// In all test cases, the rule specified as "color: green" should win.
|
||||
var testCases = [
|
||||
// [A] Cases between document, ::slotteed, :host, and inline
|
||||
{
|
||||
title: 'A1. document vs ::slotted, document rule should win',
|
||||
documentStyle: 'my-item { color: green; }',
|
||||
slottedStyle: '::slotted(my-item) { color: red; }',
|
||||
hostStyle: '',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'A2. document vs :host, document rule should win',
|
||||
documentStyle: 'my-item { color: green; }',
|
||||
slottedStyle: '',
|
||||
hostStyle: ':host { color: red; }',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'A3. document vs inline, inline rule should win',
|
||||
documentStyle: 'my-item { color: red; }',
|
||||
slottedStyle: '',
|
||||
hostStyle: '',
|
||||
inlineStyle: 'color: green;'
|
||||
},
|
||||
{
|
||||
title: 'A4. ::slotted vs :host, earlier in tree-of-trees rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '::slotted(my-item) { color: green; }',
|
||||
hostStyle: ':host { color: red; }',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'A5. ::slotted vs inline, inline rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '::slotted(my-item) { color: red; }',
|
||||
hostStyle: '',
|
||||
inlineStyle: 'color: green;'
|
||||
},
|
||||
{
|
||||
title: 'A6. :host vs inline, inline rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '',
|
||||
hostStyle: ':host { color: red; }',
|
||||
inlineStyle: 'color: green;'
|
||||
},
|
||||
|
||||
// [B] Stronger rule is still stronger with !important
|
||||
{
|
||||
title: 'B1. document with !important vs ::slotted, document rule should win',
|
||||
documentStyle: 'my-item { color: green !important; }',
|
||||
slottedStyle: '::slotted(my-item) { color: red; }',
|
||||
hostStyle: '',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'B2. document with !important vs :host, document rule should win',
|
||||
documentStyle: 'my-item { color: green !important; }',
|
||||
slottedStyle: '',
|
||||
hostStyle: ':host { color: red; }',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'B3. document vs inline with !important, inline rule should win',
|
||||
documentStyle: 'my-item { color: red; }',
|
||||
slottedStyle: '',
|
||||
hostStyle: '',
|
||||
inlineStyle: 'color: green !important;'
|
||||
},
|
||||
{
|
||||
title: 'B4. ::slotted with !important vs :host, earlier in tree-of-trees rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '::slotted(my-item) { color: green !important; }',
|
||||
hostStyle: ':host { color: red; }',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'B5. ::slotted vs inline with !important, inline rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '::slotted(my-item) { color: green !important; }',
|
||||
hostStyle: '',
|
||||
inlineStyle: 'color: red;'
|
||||
},
|
||||
{
|
||||
title: 'B6. :host vs inline with !important, inline rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '',
|
||||
hostStyle: ':host { color: red; }',
|
||||
inlineStyle: 'color: green !important;'
|
||||
},
|
||||
|
||||
// [C] Weaker rule gets stronger with !important
|
||||
{
|
||||
title: 'C1. document vs ::slotted with !important, ::slotted rule should win',
|
||||
documentStyle: 'my-item { color: red; }',
|
||||
slottedStyle: '::slotted(my-item) { color: green !important; }',
|
||||
hostStyle: '',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'C2. document vs :host with !important, :host rule should win',
|
||||
documentStyle: 'my-item { color: red; }',
|
||||
slottedStyle: '',
|
||||
hostStyle: ':host { color: green !important; }',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'C3. document with !important vs inline, document rule should win',
|
||||
documentStyle: 'my-item { color: green !important; }',
|
||||
slottedStyle: '',
|
||||
hostStyle: '',
|
||||
inlineStyle: 'color: red;'
|
||||
},
|
||||
{
|
||||
title: 'C4. ::slotted vs :host with !important, later in tree-of-trees rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '::slotted(my-item) { color: green !important; }',
|
||||
hostStyle: ':host { color: red; }',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'C5. ::slotted with !important vs inline, ::slotted rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '::slotted(my-item) { color: green !important; }',
|
||||
hostStyle: '',
|
||||
inlineStyle: 'color: red;'
|
||||
},
|
||||
{
|
||||
title: 'C6. :host with !important vs inline, :host rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '',
|
||||
hostStyle: ':host { color: green !important; }',
|
||||
inlineStyle: 'color: red;'
|
||||
},
|
||||
|
||||
// [D] Cases between document, ::slotteed, :host, and inline, both with !important
|
||||
{
|
||||
title: 'D1. document vs ::slotted both with !important, ::slotted rule should win',
|
||||
documentStyle: 'my-item { color: red !important; }',
|
||||
slottedStyle: '::slotted(my-item) { color: green !important; }',
|
||||
hostStyle: '',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'D2. document vs :host both with !important, :host rule should win',
|
||||
documentStyle: 'my-item { color: red !important; }',
|
||||
slottedStyle: '',
|
||||
hostStyle: ':host { color: green !important; }',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'D3. document vs inline both with !important, inline rule should win',
|
||||
documentStyle: 'my-item { color: red !important; }',
|
||||
slottedStyle: '',
|
||||
hostStyle: '',
|
||||
inlineStyle: 'color: green !important;'
|
||||
},
|
||||
{
|
||||
title: 'D4. ::slotted vs :host both with !important, later in tree-of-trees rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '::slotted(my-item) { color: red !important; }',
|
||||
hostStyle: ':host { color: green !important; }',
|
||||
inlineStyle: ''
|
||||
},
|
||||
{
|
||||
title: 'D5. ::slotted vs inline both with !important, ::slotted rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '::slotted(my-item) { color: green !important; }',
|
||||
hostStyle: '',
|
||||
inlineStyle: 'color: red !important;'
|
||||
},
|
||||
{
|
||||
title: 'D6. :host vs inline both with !important, :host rule should win',
|
||||
documentStyle: '',
|
||||
slottedStyle: '',
|
||||
hostStyle: ':host { color: green !important; }',
|
||||
inlineStyle: 'color: red !important;'
|
||||
},
|
||||
// [E] Putting all together
|
||||
{
|
||||
title: 'E1. all style applied, inline rule should win',
|
||||
documentStyle: 'my-item { color: red; }',
|
||||
slottedStyle: '::slotted(my-item) { color: blue; }',
|
||||
hostStyle: ':host { color: yellow; }',
|
||||
inlineStyle: 'color: green;'
|
||||
},
|
||||
{
|
||||
title: 'E2. all styles with !important applied, rule in the last tree-of-trees should win',
|
||||
documentStyle: 'my-item { color: red !important; }',
|
||||
slottedStyle: '::slotted(my-item) { color: blue !important; }',
|
||||
hostStyle: ':host { color: green !important; }',
|
||||
inlineStyle: 'color: yellow !important;'
|
||||
},
|
||||
];
|
||||
|
||||
for (var i = 0; i < testCases.length; ++i) {
|
||||
var testCase = testCases[i];
|
||||
var documentStyle = document.createElement('style');
|
||||
documentStyle.appendChild(document.createTextNode(testCase['documentStyle']));
|
||||
document.head.appendChild(documentStyle);
|
||||
|
||||
var myList = createMyList(mode,
|
||||
testCase['slottedStyle'], testCase['hostStyle'], testCase['inlineStyle']);
|
||||
document.body.appendChild(myList);
|
||||
|
||||
test(function () {
|
||||
var myItem = myList.querySelector('my-item');
|
||||
assert_equals(window.getComputedStyle(myItem).color, 'rgb(0, 128, 0)',
|
||||
testCase['title']);
|
||||
}, testCase['title'] + ' for ' + mode + ' mode.');
|
||||
|
||||
myList.parentNode.removeChild(myList);
|
||||
document.head.removeChild(documentStyle)
|
||||
}
|
||||
}
|
||||
|
||||
// Open or Closed should not make any difference in style application.
|
||||
testCascadingOrder('open');
|
||||
testCascadingOrder('closed');
|
||||
|
||||
|
||||
// Taken from the example in
|
||||
// https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Shadow-DOM-Cascade-Order.md
|
||||
// https://github.com/w3c/webcomponents/issues/316
|
||||
// https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Shadow-DOM-Cascade-Order-in-v1.md
|
||||
// with element renamed and style rule location changed.
|
||||
//
|
||||
// <style>my-item { color: red; }</style>
|
||||
// <my-list>
|
||||
// <:shadow>
|
||||
// <style>::slotted(my-item) { color: blue; }</style>
|
||||
// <div>
|
||||
// <:shadow>
|
||||
// <slot/>
|
||||
// </:shadow>
|
||||
// <slot/>
|
||||
// </div>
|
||||
// </:shadow>
|
||||
// <my-item style="color: green;">
|
||||
// <:shadow>
|
||||
// <style>:host { color: yellow; }</style>
|
||||
// <slot/>
|
||||
// </:shadow>
|
||||
// ITEM
|
||||
// </my-item>
|
||||
// </my-list>
|
||||
//
|
||||
// The difference from the example tree above is that <my-list> has 2 levels of
|
||||
// shadow trees, each with ::slotted(my-list) style rules.
|
||||
|
||||
function createMyListWith2LevelShadow(mode, slottedStyle1, slottedStyle2, hostStyle) {
|
||||
var myList = document.createElement('my-list');
|
||||
var root = myList.attachShadow({'mode': mode});
|
||||
root.innerHTML = '<style>' + slottedStyle1 + '</style><div><slot></slot></div>';
|
||||
var div = root.querySelector('div');
|
||||
var root2 = div.attachShadow({'mode': mode});
|
||||
root2.innerHTML = '<style>' + slottedStyle2 + '</style><slot></slot>';
|
||||
var myItem = document.createElement('my-item');
|
||||
myList.appendChild(myItem);
|
||||
var root3 = myItem.attachShadow({'mode': mode});
|
||||
root3.innerHTML = '<style>' + hostStyle + '</style><slot></slot>';
|
||||
myItem.appendChild(document.createTextNode('ITEM'));
|
||||
return myList;
|
||||
}
|
||||
|
||||
function testCascadingOrderWith2LevelShadow(mode) {
|
||||
// In all test cases, the rule specified as "color: green" should win.
|
||||
var testCases = [
|
||||
{
|
||||
title: 'F1. document vs others, document (the first rule in tree-of-trees order) rule should win',
|
||||
documentStyle: 'my-item { color: green; }',
|
||||
slottedStyle1: '::slotted(my-item) { color: red; }',
|
||||
slottedStyle2: '::slotted(my-item) { color: red; }',
|
||||
hostStyle: ':host { color: red; }',
|
||||
},
|
||||
{
|
||||
title: 'F2. document with !important vs others, document rule should win',
|
||||
documentStyle: 'my-item { color: green !important; }',
|
||||
slottedStyle1: '::slotted(my-item) { color: red; }',
|
||||
slottedStyle2: '::slotted(my-item) { color: red; }',
|
||||
hostStyle: ':host { color: red; }',
|
||||
},
|
||||
{
|
||||
title: 'F3. document vs ::slotted with !important, important rule should win',
|
||||
documentStyle: 'my-item { color: red; }',
|
||||
slottedStyle1: '::slotted(my-item) { color: green !important; }',
|
||||
slottedStyle2: '::slotted(my-item) { color: red; }',
|
||||
hostStyle: ':host { color: red; }',
|
||||
},
|
||||
{
|
||||
title: 'F4. document vs ::slotted with !important, important rule should win',
|
||||
documentStyle: 'my-item { color: red; }',
|
||||
slottedStyle1: '::slotted(my-item) { color: red; }',
|
||||
slottedStyle2: '::slotted(my-item) { color: green !important; }',
|
||||
hostStyle: ':host { color: red; }',
|
||||
},
|
||||
{
|
||||
title: 'F5. document vs :host with !important, important rule should win',
|
||||
documentStyle: 'my-item { color: red; }',
|
||||
slottedStyle1: '::slotted(my-item) { color: red; }',
|
||||
slottedStyle2: '::slotted(my-item) { color: red; }',
|
||||
hostStyle: ':host { color: green !important; }',
|
||||
},
|
||||
{
|
||||
title: 'F6. all rules with !important, the last rule in tree-of-trees should win',
|
||||
documentStyle: 'my-item { color: red !important; }',
|
||||
slottedStyle1: '::slotted(my-item) { color: red !important; }',
|
||||
slottedStyle2: '::slotted(my-item) { color: red !important; }',
|
||||
hostStyle: ':host { color: green !important ; }',
|
||||
}
|
||||
];
|
||||
|
||||
for (var i = 0; i < testCases.length; ++i) {
|
||||
var testCase = testCases[i];
|
||||
var documentStyle = document.createElement('style');
|
||||
documentStyle.appendChild(document.createTextNode(testCase['documentStyle']));
|
||||
document.head.appendChild(documentStyle);
|
||||
|
||||
var myList = createMyListWith2LevelShadow(mode,
|
||||
testCase['slottedStyle1'], testCase['slottedStyle2'], testCase['hostStyle']);
|
||||
document.body.appendChild(myList);
|
||||
|
||||
test(function () {
|
||||
var myItem = myList.querySelector('my-item');
|
||||
assert_equals(window.getComputedStyle(myItem).color, 'rgb(0, 128, 0)',
|
||||
testCase['title']);
|
||||
}, testCase['title'] + ' for ' + mode + ' mode.');
|
||||
|
||||
myList.parentNode.removeChild(myList);
|
||||
document.head.removeChild(documentStyle)
|
||||
}
|
||||
}
|
||||
|
||||
// Open or Closed should not make any difference in style application.
|
||||
testCascadingOrderWith2LevelShadow('open');
|
||||
testCascadingOrderWith2LevelShadow('closed');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue