mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
39
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/chapter-1.xht
Normal file
39
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/chapter-1.xht
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Introduction - CSS Scoping Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Scoping Module Level 1 CR Test Suite</h1>
|
||||
<h2>Introduction (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
<col id="flags-column"></col>
|
||||
<col id="info-column"></col>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#intro">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
87
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/chapter-2.xht
Normal file
87
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/chapter-2.xht
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Scoped Styles - CSS Scoping Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Scoping Module Level 1 CR Test Suite</h1>
|
||||
<h2>Scoped Styles (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
<col id="flags-column"></col>
|
||||
<col id="info-column"></col>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#scope">2 Scoped Styles</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#scoping-mechanisms">2.1 Scoping Mechanisms</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.1.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#scoping-markup">2.1.1 Document Markup for Scoping</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.1.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#scope-atrule">2.1.2 CSS Syntax for Scoping: the @scope rule</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.2.#at-ruledef-scope">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.2.#issue-5c7571b6">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.1.2.#issue-5f568f10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#scoping-context">2.2 Querying the Scoping Context</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.2.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#scope-pseudo">2.2.1 Selecting the Scoping Root: :scope pseudo-class</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2.2.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#scope-content-pseudo">2.2.2 Selecting Outside the Scope: :scope-context() pseudo-class</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.2.2.#issue-aecbd194">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
273
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/chapter-3.xht
Normal file
273
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/chapter-3.xht
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Shadow Encapsulation - CSS Scoping Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Scoping Module Level 1 CR Test Suite</h1>
|
||||
<h2>Shadow Encapsulation (15 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
<col id="flags-column"></col>
|
||||
<col id="info-column"></col>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#shadow-dom">3 Shadow Encapsulation</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#active-shadow-tree">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#distribution-list">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#host-element0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#insertion-point">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#shadow-host">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#shadow-root">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#shadow-tree">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#top-level-element">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#selectors-data-model">3.1 Shadow DOM Selection Model</a></th></tr>
|
||||
<!-- 12 tests -->
|
||||
<tr id="css-scoping-shadow-assigned-node-with-before-after-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-assigned-node-with-before-after.xht">css-scoping-shadow-assigned-node-with-before-after</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - ::before and ::after pseudo class' contents on a node assigned to a slot element must be rendered
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-assigned-node-with-rules-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-assigned-node-with-rules.xht">css-scoping-shadow-assigned-node-with-rules</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - Only rules outside a shadow tree must apply to nodes assigned to a slot in the shadow tree.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-host-with-before-after-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-host-with-before-after.xht">css-scoping-shadow-host-with-before-after</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - ::before and ::after pseudo elements' contents on a shadow host must be rendered
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-invisible-slot-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-invisible-slot.xht">css-scoping-shadow-invisible-slot</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-root-hides-children-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-root-hides-children.xht">css-scoping-shadow-root-hides-children</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - a shadow tree hides non-distributed children of the host
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-slot-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-slot.xht">css-scoping-shadow-slot</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-slot-display-override-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-slot-display-override.xht">css-scoping-shadow-slot-display-override</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - overriding slot element's display value should generate boxes
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-slot-fallback-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-slot-fallback.xht">css-scoping-shadow-slot-fallback</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - slot element without distributed nodes must render its fallback content
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-slot-style-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-slot-style.xht">css-scoping-shadow-slot-style</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - Ensure that slot's style is inherited by slotted children
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-with-outside-rules-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-with-outside-rules.xht">css-scoping-shadow-with-outside-rules</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - a selector outside a shadow tree should not match nodes inside the shadow tree
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-with-rules-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-with-rules.xht">css-scoping-shadow-with-rules</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - a selector inside a shadow tree is matched against nodes in the shadow tree
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-with-rules-no-style-leak-3.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-with-rules-no-style-leak.xht">css-scoping-shadow-with-rules-no-style-leak</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - a style rule inside a shadow tree doesn't affect the normal dom
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.1.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#host-element">3.1.1 Host Elements in a Shadow Tree</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#selectors">3.2 Shadow DOM Selectors</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#issue-dea392ae">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#host-selector">3.2.1 Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a></th></tr>
|
||||
<!-- 2 tests -->
|
||||
<tr id="css-scoping-shadow-host-functional-rule-3.2.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-host-functional-rule.xht">css-scoping-shadow-host-functional-rule</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - :host() rules must apply to the shadow host.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-scoping-shadow-host-rule-3.2.1" class="">
|
||||
<td>
|
||||
<a href="css-scoping-shadow-host-rule.xht">css-scoping-shadow-host-rule</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Scoping Module Level 1 - :host rules must apply to the shadow host.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.2.1.#selectordef-host">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.1.#selectordef-host-context">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.1.#selectordef-host0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#shadow-pseudoelement">3.2.2 Selecting Into the Dark: the ::shadow pseudo-element</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.2.#selectordef-shadow">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2.3">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#content-combinator">3.2.3 Selecting Shadow-Projected Content: the ::content pseudo-element</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.3.#issue-1b6118ae">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.3.#selectordef-content">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2.4">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#deep-combinator">3.2.4 Selecting Through Shadows: the /deep/ combinator</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.4.#issue-250ee37f">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.4.#selectordef-deep">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.3">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#shadow-cascading">3.3 Shadow Cascading & Inheritance</a></th></tr>
|
||||
<!-- 1 tests -->
|
||||
<tr id="shadow-cascade-order-001-3.3" class="primary script">
|
||||
<td><strong>
|
||||
<a href="shadow-cascade-order-001.xht">shadow-cascade-order-001</a></strong></td>
|
||||
<td></td>
|
||||
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Shadow DOM: CSS Style Rule cascading
|
||||
<ul class="assert">
|
||||
<li>Cascading order test for style rules from various shadow trees.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.3.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.3.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#cascading">3.3.1 Cascading</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.3.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.3.2">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#inheritance">3.3.2 Inheritance</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
135
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/chapter-4.xht
Normal file
135
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/chapter-4.xht
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Fragmented Styling - CSS Scoping Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Scoping Module Level 1 CR Test Suite</h1>
|
||||
<h2>Fragmented Styling (0 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
<col id="flags-column"></col>
|
||||
<col id="info-column"></col>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th><abbr title="Rendering References">Refs</abbr></th>
|
||||
<th>Flags</th>
|
||||
<th>Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#fragment-scoping">4 Fragmented Styling</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#fragment-pseudo-element">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1">+</a>
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/#the-region-pseudo-element">4.1 Region-based Styling: the ::region pseudo-element</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.#issue-5bff6297">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.#issue-9b00b7af">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.#issue-f778a2c0">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.#region-style-example">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.#region_styling_illustration">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.#region_styling_img_2">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#conformance">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#issues-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#subtitle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#title">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#conformance-classes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#conventions">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#experimental">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#partial">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sconformance.#testing">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#html">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sinformative.#selectors4">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#css21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#css3cascade">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#dom">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="snormative.#rfc2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#informative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="sreferences.#normative">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><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 href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><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 href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 slot="green" class="green">FAIL</div>
|
||||
<div slot="invalid" class="red">FAIL</div>
|
||||
<div slot="green" class="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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - :host() rules must apply to the shadow host.</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#host-selector" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 class="foo" id="bar" 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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - :host rules must apply to the shadow host.</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#host-selector" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - ::before and ::after pseudo elements' contents on a shadow host must be rendered</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree.</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - a shadow tree hides non-distributed children of the host</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - overriding slot element's display value should generate boxes</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - slot element without distributed nodes must render its fallback content</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - Ensure that slot's style is inherited by slotted children</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 style="color: green; background: green" name="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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree.</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - ::slotted pseudo element rule must apply to an element that got slotted via another slot</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - :slotted pseudo element must allow selecting elements assigned to a slot element</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - a selector outside a shadow tree should not match nodes inside the shadow tree</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - a style rule inside a shadow tree doesn't affect the normal dom</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - a selector inside a shadow tree is matched against nodes in the shadow tree</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
<link href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model" rel="help" />
|
||||
<link href="reference/green-box.xht" rel="match" />
|
||||
</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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Scoping Module Level 1 - A green box reference</title>
|
||||
<link href="mailto:rniwa@webkit.org" rel="author" title="Ryosuke Niwa" />
|
||||
</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>
|
||||
158
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/reftest-toc.xht
Normal file
158
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/reftest-toc.xht
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 CR Test Suite Reftest Index</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>CSS Scoping Module Level 1 CR Test Suite Reftest Index</h1>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="ref-column"></col>
|
||||
<col id="flags-column"></col>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
<th>Reference</th>
|
||||
<th>Flags</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="css-scoping-shadow-assigned-node-with-before-after" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - ::before and ::after pseudo class' contents on a node assigned to a slot element must be rendered">
|
||||
<a href="css-scoping-shadow-assigned-node-with-before-after.xht">css-scoping-shadow-assigned-node-with-before-after</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-assigned-node-with-rules" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - Only rules outside a shadow tree must apply to nodes assigned to a slot in the shadow tree.">
|
||||
<a href="css-scoping-shadow-assigned-node-with-rules.xht">css-scoping-shadow-assigned-node-with-rules</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-host-functional-rule" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - :host() rules must apply to the shadow host.">
|
||||
<a href="css-scoping-shadow-host-functional-rule.xht">css-scoping-shadow-host-functional-rule</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-host-rule" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - :host rules must apply to the shadow host.">
|
||||
<a href="css-scoping-shadow-host-rule.xht">css-scoping-shadow-host-rule</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-host-with-before-after" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - ::before and ::after pseudo elements' contents on a shadow host must be rendered">
|
||||
<a href="css-scoping-shadow-host-with-before-after.xht">css-scoping-shadow-host-with-before-after</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-invisible-slot" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree.">
|
||||
<a href="css-scoping-shadow-invisible-slot.xht">css-scoping-shadow-invisible-slot</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-root-hides-children" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - a shadow tree hides non-distributed children of the host">
|
||||
<a href="css-scoping-shadow-root-hides-children.xht">css-scoping-shadow-root-hides-children</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-slot" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree.">
|
||||
<a href="css-scoping-shadow-slot.xht">css-scoping-shadow-slot</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-slot-display-override" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - overriding slot element's display value should generate boxes">
|
||||
<a href="css-scoping-shadow-slot-display-override.xht">css-scoping-shadow-slot-display-override</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-slot-fallback" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - slot element without distributed nodes must render its fallback content">
|
||||
<a href="css-scoping-shadow-slot-fallback.xht">css-scoping-shadow-slot-fallback</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-slot-style" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - Ensure that slot's style is inherited by slotted children">
|
||||
<a href="css-scoping-shadow-slot-style.xht">css-scoping-shadow-slot-style</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-slotted-nested" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - ::slotted pseudo element rule must apply to an element that got slotted via another slot">
|
||||
<a href="css-scoping-shadow-slotted-nested.xht">css-scoping-shadow-slotted-nested</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-slotted-rule" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - :slotted pseudo element must allow selecting elements assigned to a slot element">
|
||||
<a href="css-scoping-shadow-slotted-rule.xht">css-scoping-shadow-slotted-rule</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-with-outside-rules" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - a selector outside a shadow tree should not match nodes inside the shadow tree">
|
||||
<a href="css-scoping-shadow-with-outside-rules.xht">css-scoping-shadow-with-outside-rules</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-with-rules" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - a selector inside a shadow tree is matched against nodes in the shadow tree">
|
||||
<a href="css-scoping-shadow-with-rules.xht">css-scoping-shadow-with-rules</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="css-scoping-shadow-with-rules-no-style-leak" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Scoping Module Level 1 - a style rule inside a shadow tree doesn't affect the normal dom">
|
||||
<a href="css-scoping-shadow-with-rules-no-style-leak.xht">css-scoping-shadow-with-rules-no-style-leak</a></td>
|
||||
<td><a href="reference/green-box.xht">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
17
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/reftest.list
Normal file
17
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/reftest.list
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
css-scoping-shadow-assigned-node-with-before-after.xht == reference/green-box.xht
|
||||
css-scoping-shadow-assigned-node-with-rules.xht == reference/green-box.xht
|
||||
css-scoping-shadow-host-functional-rule.xht == reference/green-box.xht
|
||||
css-scoping-shadow-host-rule.xht == reference/green-box.xht
|
||||
css-scoping-shadow-host-with-before-after.xht == reference/green-box.xht
|
||||
css-scoping-shadow-invisible-slot.xht == reference/green-box.xht
|
||||
css-scoping-shadow-root-hides-children.xht == reference/green-box.xht
|
||||
css-scoping-shadow-slot.xht == reference/green-box.xht
|
||||
css-scoping-shadow-slot-display-override.xht == reference/green-box.xht
|
||||
css-scoping-shadow-slot-fallback.xht == reference/green-box.xht
|
||||
css-scoping-shadow-slot-style.xht == reference/green-box.xht
|
||||
css-scoping-shadow-slotted-nested.xht == reference/green-box.xht
|
||||
css-scoping-shadow-slotted-rule.xht == reference/green-box.xht
|
||||
css-scoping-shadow-with-outside-rules.xht == reference/green-box.xht
|
||||
css-scoping-shadow-with-rules.xht == reference/green-box.xht
|
||||
css-scoping-shadow-with-rules-no-style-leak.xht == reference/green-box.xht
|
||||
|
|
@ -0,0 +1,403 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>Shadow DOM: CSS Style Rule cascading</title>
|
||||
<meta content="Cascading order test for style rules from various shadow trees." name="assert" />
|
||||
<link href="mailto:kochi@google.com" rel="author" title="Takayoshi Kochi" />
|
||||
<link href="https://drafts.csswg.org/css-scoping-1/#shadow-cascading" rel="help" />
|
||||
<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>
|
||||
44
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/toc.xht
Normal file
44
tests/wpt/css-tests/css-scoping-1_dev/xhtml1/toc.xht
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Scoping Module Level 1 CR Test Suite</title>
|
||||
<style type="text/css">
|
||||
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
||||
@import "../indices.css";
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Scoping Module Level 1 CR Test Suite By Chapter</h1>
|
||||
|
||||
<p>This index contains both
|
||||
<a href="http://wiki.csswg.org/test/selftest">self-describing tests</a>
|
||||
and reftests.
|
||||
A separate <a href="reftest-toc.xht">alphabetical reftest index</a>
|
||||
is provided for tests in <a href="http://wiki.csswg.org/test/reftest">reftest
|
||||
format</a> along with the <a href="reftest.list">reftest manifest</a>.</p>
|
||||
|
||||
<table>
|
||||
<tbody id="s1">
|
||||
<tr><th><a href="chapter-1.xht">Chapter 1 -
|
||||
Introduction</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s2">
|
||||
<tr><th><a href="chapter-2.xht">Chapter 2 -
|
||||
Scoped Styles</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
||||
Shadow Encapsulation</a></th>
|
||||
<td>(15 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||
Fragmented Styling</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue