mirror of
https://github.com/servo/servo.git
synced 2025-08-08 15:05:35 +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/html/chapter-1.htm
Normal file
39
tests/wpt/css-tests/css-scoping-1_dev/html/chapter-1.htm
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<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 id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<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/html/chapter-2.htm
Normal file
87
tests/wpt/css-tests/css-scoping-1_dev/html/chapter-2.htm
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<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 id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<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/html/chapter-3.htm
Normal file
273
tests/wpt/css-tests/css-scoping-1_dev/html/chapter-3.htm
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<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 id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<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.htm">css-scoping-shadow-assigned-node-with-before-after</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-assigned-node-with-rules</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-host-with-before-after</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-invisible-slot</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-root-hides-children</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slot</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slot-display-override</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slot-fallback</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slot-style</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-with-outside-rules</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-with-rules</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-with-rules-no-style-leak</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-host-functional-rule</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-host-rule</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">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/html/chapter-4.htm
Normal file
135
tests/wpt/css-tests/css-scoping-1_dev/html/chapter-4.htm
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<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 id="refs-column">
|
||||
<col id="flags-column">
|
||||
<col id="info-column">
|
||||
<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>
|
||||
<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 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.htm" 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>
|
||||
<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 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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<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 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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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.htm" 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>
|
||||
<html><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/html/reftest-toc.htm
Normal file
158
tests/wpt/css-tests/css-scoping-1_dev/html/reftest-toc.htm
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<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 id="ref-column">
|
||||
<col id="flags-column">
|
||||
<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.htm">css-scoping-shadow-assigned-node-with-before-after</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-assigned-node-with-rules</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-host-functional-rule</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-host-rule</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-host-with-before-after</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-invisible-slot</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-root-hides-children</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slot</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slot-display-override</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slot-fallback</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slot-style</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slotted-nested</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-slotted-rule</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-with-outside-rules</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-with-rules</a></td>
|
||||
<td><a href="reference/green-box.htm">=</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.htm">css-scoping-shadow-with-rules-no-style-leak</a></td>
|
||||
<td><a href="reference/green-box.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
17
tests/wpt/css-tests/css-scoping-1_dev/html/reftest.list
Normal file
17
tests/wpt/css-tests/css-scoping-1_dev/html/reftest.list
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
css-scoping-shadow-assigned-node-with-before-after.htm == reference/green-box.htm
|
||||
css-scoping-shadow-assigned-node-with-rules.htm == reference/green-box.htm
|
||||
css-scoping-shadow-host-functional-rule.htm == reference/green-box.htm
|
||||
css-scoping-shadow-host-rule.htm == reference/green-box.htm
|
||||
css-scoping-shadow-host-with-before-after.htm == reference/green-box.htm
|
||||
css-scoping-shadow-invisible-slot.htm == reference/green-box.htm
|
||||
css-scoping-shadow-root-hides-children.htm == reference/green-box.htm
|
||||
css-scoping-shadow-slot.htm == reference/green-box.htm
|
||||
css-scoping-shadow-slot-display-override.htm == reference/green-box.htm
|
||||
css-scoping-shadow-slot-fallback.htm == reference/green-box.htm
|
||||
css-scoping-shadow-slot-style.htm == reference/green-box.htm
|
||||
css-scoping-shadow-slotted-nested.htm == reference/green-box.htm
|
||||
css-scoping-shadow-slotted-rule.htm == reference/green-box.htm
|
||||
css-scoping-shadow-with-outside-rules.htm == reference/green-box.htm
|
||||
css-scoping-shadow-with-rules.htm == reference/green-box.htm
|
||||
css-scoping-shadow-with-rules-no-style-leak.htm == reference/green-box.htm
|
||||
|
|
@ -0,0 +1,403 @@
|
|||
<!DOCTYPE html>
|
||||
<html><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/html/toc.htm
Normal file
44
tests/wpt/css-tests/css-scoping-1_dev/html/toc.htm
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<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.htm">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.htm">Chapter 1 -
|
||||
Introduction</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s2">
|
||||
<tr><th><a href="chapter-2.htm">Chapter 2 -
|
||||
Scoped Styles</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s3">
|
||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||
Shadow Encapsulation</a></th>
|
||||
<td>(15 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s4">
|
||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||
Fragmented Styling</a></th>
|
||||
<td>(0 Tests)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
# UA version OS version
|
||||
# UA string (if applicable)
|
||||
# http://test.csswg.org/suites/css-scoping-1_dev/DATESTAMP/
|
||||
# See http://wiki.csswg.org/test/implementation-report for instructions
|
||||
testname revision result comment
|
||||
html/css-scoping-shadow-assigned-node-with-before-after.htm 86d6ccf6a53df8f215161755126432eec2e5285c ?
|
||||
xhtml1/css-scoping-shadow-assigned-node-with-before-after.xht 86d6ccf6a53df8f215161755126432eec2e5285c ?
|
||||
html/css-scoping-shadow-assigned-node-with-rules.htm f1e064a369834bde113c6a011aa81d1a11afc7f1 ?
|
||||
xhtml1/css-scoping-shadow-assigned-node-with-rules.xht f1e064a369834bde113c6a011aa81d1a11afc7f1 ?
|
||||
html/css-scoping-shadow-host-functional-rule.htm 25dae83506684c0287ec507c8c56f7b4bd9ce914 ?
|
||||
xhtml1/css-scoping-shadow-host-functional-rule.xht 25dae83506684c0287ec507c8c56f7b4bd9ce914 ?
|
||||
html/css-scoping-shadow-host-rule.htm bcab33bb0ab7cff8c75fedae80dffb05eef446c7 ?
|
||||
xhtml1/css-scoping-shadow-host-rule.xht bcab33bb0ab7cff8c75fedae80dffb05eef446c7 ?
|
||||
html/css-scoping-shadow-host-with-before-after.htm 302f5cd1b9bffee20dfc4709679813b2dc77a30d ?
|
||||
xhtml1/css-scoping-shadow-host-with-before-after.xht 302f5cd1b9bffee20dfc4709679813b2dc77a30d ?
|
||||
html/css-scoping-shadow-invisible-slot.htm 379a41f732e729762133b5b8096f0bd25794244e ?
|
||||
xhtml1/css-scoping-shadow-invisible-slot.xht 379a41f732e729762133b5b8096f0bd25794244e ?
|
||||
html/css-scoping-shadow-root-hides-children.htm 5c29ca5ec3a5b7c4e38f201b52f7b496e5379b4c ?
|
||||
xhtml1/css-scoping-shadow-root-hides-children.xht 5c29ca5ec3a5b7c4e38f201b52f7b496e5379b4c ?
|
||||
html/css-scoping-shadow-slot-display-override.htm 73b7c121a207f7d4bf636590137f2e8e7123cb4c ?
|
||||
xhtml1/css-scoping-shadow-slot-display-override.xht 73b7c121a207f7d4bf636590137f2e8e7123cb4c ?
|
||||
html/css-scoping-shadow-slot-fallback.htm 1f8c5272e5bd12910ae95f10b94c48505518d363 ?
|
||||
xhtml1/css-scoping-shadow-slot-fallback.xht 1f8c5272e5bd12910ae95f10b94c48505518d363 ?
|
||||
html/css-scoping-shadow-slot-style.htm 3e8c9845ce72fb1e1a14b9081396371637c9ea2f ?
|
||||
xhtml1/css-scoping-shadow-slot-style.xht 3e8c9845ce72fb1e1a14b9081396371637c9ea2f ?
|
||||
html/css-scoping-shadow-slot.htm 4cbaf4deb4df818be6c20df1a566fba81ca82919 ?
|
||||
xhtml1/css-scoping-shadow-slot.xht 4cbaf4deb4df818be6c20df1a566fba81ca82919 ?
|
||||
html/css-scoping-shadow-slotted-nested.htm 2cb213cc0693d5ac1879674ca30426ce9f5e1447 ?
|
||||
xhtml1/css-scoping-shadow-slotted-nested.xht 2cb213cc0693d5ac1879674ca30426ce9f5e1447 ?
|
||||
html/css-scoping-shadow-slotted-rule.htm 0b44695dda05d4246ed820e6f6bb7e2f099aae18 ?
|
||||
xhtml1/css-scoping-shadow-slotted-rule.xht 0b44695dda05d4246ed820e6f6bb7e2f099aae18 ?
|
||||
html/css-scoping-shadow-with-outside-rules.htm 839b41ca1a304f7b2cd82258e6024d9822fed5d7 ?
|
||||
xhtml1/css-scoping-shadow-with-outside-rules.xht 839b41ca1a304f7b2cd82258e6024d9822fed5d7 ?
|
||||
html/css-scoping-shadow-with-rules-no-style-leak.htm d5ae794a29766bdaf086dcfcdf39c20cefc9a4b5 ?
|
||||
xhtml1/css-scoping-shadow-with-rules-no-style-leak.xht d5ae794a29766bdaf086dcfcdf39c20cefc9a4b5 ?
|
||||
html/css-scoping-shadow-with-rules.htm b2269294a8cb6668c7c3bd7fb43e58ddcd0c573a ?
|
||||
xhtml1/css-scoping-shadow-with-rules.xht b2269294a8cb6668c7c3bd7fb43e58ddcd0c573a ?
|
||||
html/shadow-cascade-order-001.htm 45756e2efc3a5b68952b94b01c3427d410e33a03 ?
|
||||
xhtml1/shadow-cascade-order-001.xht 45756e2efc3a5b68952b94b01c3427d410e33a03 ?
|
||||
132
tests/wpt/css-tests/css-scoping-1_dev/index.htm
Normal file
132
tests/wpt/css-tests/css-scoping-1_dev/index.htm
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html lang="en">
|
||||
<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</h1>
|
||||
<dt>Test Coordinator:</dt>
|
||||
<dd>None Yet</dd>
|
||||
|
||||
<p>This is a <strong>Development</strong>
|
||||
version of the CSS Scoping Module Level 1 CR Test Suite.</p>
|
||||
|
||||
<p>You can provide test data or review the testing results for this test suite:</p>
|
||||
<dt><a href="http://test.csswg.org/harness/suite/css-scoping-1_dev">Enter Data</a></dt>
|
||||
<dt><a href="http://test.csswg.org/harness/review/css-scoping-1_dev">Review Results</a></dt>
|
||||
|
||||
|
||||
<p>Some tests in the test suite may contain errors.
|
||||
Please check the latest version of the
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/">CSS Scoping 1 specification</a>
|
||||
<strong>and its errata</strong>
|
||||
before assuming a failure is due to an implementation bug and
|
||||
not a test suite bug.</p>
|
||||
|
||||
|
||||
<p>
|
||||
In time we hope to correct all errors and extend this test suite to
|
||||
cover all of CSS Scoping 1. Your help is welcome in this effort.
|
||||
The appropriate mailing list for submitting tests and bug reports is
|
||||
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/">public-css-testsuite@w3.org</a>.
|
||||
More information on the contribution process and test guidelines is
|
||||
available on the <a href="http://wiki.csswg.org/test">wiki
|
||||
page</a>.</p>
|
||||
|
||||
<p>Tests are currently available in these formats:</p>
|
||||
|
||||
<dl>
|
||||
<dt><a href="html/toc.htm">HTML 5</a></dt>
|
||||
<dd>HTML 5 tests sent as <code>text/html</code></dd>
|
||||
<dt><a href="xhtml1/toc.xht">XHTML 1.1</a></dt>
|
||||
<dd>XHTML 1.1 tests sent as <code>application/xhtml+xml</code></dd>
|
||||
|
||||
|
||||
<p>Unless the test instructions explicitly indicate otherwise,
|
||||
any occurrence of red in a test indicates test failure.</p>
|
||||
|
||||
<h2 id="implement">Implementation Reports</h2>
|
||||
<p>An <a href="implementation-report-TEMPLATE.data">implementation report template</a>
|
||||
is available to help with creating implementation reports. See also the
|
||||
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/2010Aug/0020.html">explanation</a>
|
||||
of its format.</p>
|
||||
|
||||
<h2 id="common">Common Assumptions</h2>
|
||||
|
||||
<p>Most of the test suite makes the following assumptions:</p>
|
||||
<ul>
|
||||
<li>The X/HTML <code>div</code> element is assigned <code>display: block;</code>
|
||||
and no other property declaration.</li>
|
||||
<li>The X/HTML <code>span</code> element is assigned <code>display: inline;</code>
|
||||
and no other property declaration.</li>
|
||||
<li>The X/HTML <code>p</code> element is assigned <code>display: block;</code></li>
|
||||
<li>The X/HTML <code>li</code> element is assigned <code>display: list-item;</code></li>
|
||||
<li>The X/HTML table elements <code>table</code>, <code>tbody</code>,
|
||||
<code>tr</code>, and <code>td</code> are assigned the <code>display</code>
|
||||
values <code>table</code>, <code>table-row-group</code>,
|
||||
<code>table-row</code>, and <code>table-cell</code>, respectively.</li>
|
||||
<li>The device can display the sixteen color values associated with the color
|
||||
keywords <code>black</code>, <code>white</code>, <code>gray</code>,
|
||||
<code>silver</code>, <code>red</code>, <code>green</code>, <code>blue</code>,
|
||||
<code>purple</code>, <code>yellow</code>, <code>orange</code>, <code>teal</code>,
|
||||
<code>fuchsia</code>, <code>maroon</code>, <code>navy</code>, <code>aqua</code>,
|
||||
and <code>lime</code> as distinct colors.</li>
|
||||
<li>The UA is set to print background colors and, if it supports graphics,
|
||||
background images.</li>
|
||||
<li>The UA implements reasonable page-breaking behavior; e.g., it is assumed
|
||||
that UAs will not break at every opportunity, but only near the end of
|
||||
a page unless a page break is forced.</li>
|
||||
<li>The UA implements reasonable line-breaking behavior; e.g., it is assumed
|
||||
that spaces between alphanumeric characters provide line breaking
|
||||
opportunities and that UAs will not break at every opportunity, but only
|
||||
near the end of a line unless a line break is forced.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="uncommon">Uncommon Assumptions</h2>
|
||||
|
||||
<p>In addition, some of the tests make one or more of the following
|
||||
assumptions:</p>
|
||||
|
||||
<ul>
|
||||
<li>The device is a full-color device.</li>
|
||||
<li>The device has a viewport width of at least 640px (approx).</li>
|
||||
<li>The resolution of the device is 96 CSS pixels per inch.</li>
|
||||
<li>The UA imposes no minimum font size.</li>
|
||||
<li>The 'medium' font-size computes to 16px.</li>
|
||||
<li>The initial value of 'color' is black.</li>
|
||||
<li>The canvas background is white.</li>
|
||||
<li>The user stylesheet is empty (except where indicated by the tests).</li>
|
||||
<li>The device is interactive and uses scroll bars.</li>
|
||||
</ul>
|
||||
|
||||
<p>The tests that need these assumptions to be true have not yet been
|
||||
marked, but it is likely that we will add a way to identify these
|
||||
tests in due course. Tests should avoid relying on these assumptions
|
||||
unless necessary.</p>
|
||||
|
||||
<h2>License</h2>
|
||||
|
||||
<p>This test suite is licensed under both the
|
||||
<a href="http://www.w3.org/Consortium/Legal/2008/04-testsuite-license">W3C
|
||||
Test Suite License</a> and the <a href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license">W3C
|
||||
3-clause BSD License</a>. See W3C Legal's <a href="http://www.w3.org/Consortium/Legal/2008/04-testsuite-copyright">explanation
|
||||
of the licenses</a>.</p>
|
||||
|
||||
<h2>Acknowledgements</h2>
|
||||
|
||||
<p>Many thanks to the following for their contributions:</p>
|
||||
<ul>
|
||||
<li>Ryosuke Niwa</li>
|
||||
<li>Takayoshi Kochi</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
132
tests/wpt/css-tests/css-scoping-1_dev/index.xht
Normal file
132
tests/wpt/css-tests/css-scoping-1_dev/index.xht
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
|
||||
|
||||
<!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" xml:lang="en">
|
||||
<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</h1>
|
||||
<dt>Test Coordinator:</dt>
|
||||
<dd>None Yet</dd>
|
||||
|
||||
<p>This is a <strong>Development</strong>
|
||||
version of the CSS Scoping Module Level 1 CR Test Suite.</p>
|
||||
|
||||
<p>You can provide test data or review the testing results for this test suite:</p>
|
||||
<dt><a href="http://test.csswg.org/harness/suite/css-scoping-1_dev">Enter Data</a></dt>
|
||||
<dt><a href="http://test.csswg.org/harness/review/css-scoping-1_dev">Review Results</a></dt>
|
||||
|
||||
|
||||
<p>Some tests in the test suite may contain errors.
|
||||
Please check the latest version of the
|
||||
<a href="https://www.w3.org/TR/css-scoping-1/">CSS Scoping 1 specification</a>
|
||||
<strong>and its errata</strong>
|
||||
before assuming a failure is due to an implementation bug and
|
||||
not a test suite bug.</p>
|
||||
|
||||
|
||||
<p>
|
||||
In time we hope to correct all errors and extend this test suite to
|
||||
cover all of CSS Scoping 1. Your help is welcome in this effort.
|
||||
The appropriate mailing list for submitting tests and bug reports is
|
||||
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/">public-css-testsuite@w3.org</a>.
|
||||
More information on the contribution process and test guidelines is
|
||||
available on the <a href="http://wiki.csswg.org/test">wiki
|
||||
page</a>.</p>
|
||||
|
||||
<p>Tests are currently available in these formats:</p>
|
||||
|
||||
<dl>
|
||||
<dt><a href="html/toc.htm">HTML 5</a></dt>
|
||||
<dd>HTML 5 tests sent as <code>text/html</code></dd>
|
||||
<dt><a href="xhtml1/toc.xht">XHTML 1.1</a></dt>
|
||||
<dd>XHTML 1.1 tests sent as <code>application/xhtml+xml</code></dd>
|
||||
|
||||
|
||||
<p>Unless the test instructions explicitly indicate otherwise,
|
||||
any occurrence of red in a test indicates test failure.</p>
|
||||
|
||||
<h2 id="implement">Implementation Reports</h2>
|
||||
<p>An <a href="implementation-report-TEMPLATE.data">implementation report template</a>
|
||||
is available to help with creating implementation reports. See also the
|
||||
<a href="http://lists.w3.org/Archives/Public/public-css-testsuite/2010Aug/0020.html">explanation</a>
|
||||
of its format.</p>
|
||||
|
||||
<h2 id="common">Common Assumptions</h2>
|
||||
|
||||
<p>Most of the test suite makes the following assumptions:</p>
|
||||
<ul>
|
||||
<li>The X/HTML <code>div</code> element is assigned <code>display: block;</code>
|
||||
and no other property declaration.</li>
|
||||
<li>The X/HTML <code>span</code> element is assigned <code>display: inline;</code>
|
||||
and no other property declaration.</li>
|
||||
<li>The X/HTML <code>p</code> element is assigned <code>display: block;</code></li>
|
||||
<li>The X/HTML <code>li</code> element is assigned <code>display: list-item;</code></li>
|
||||
<li>The X/HTML table elements <code>table</code>, <code>tbody</code>,
|
||||
<code>tr</code>, and <code>td</code> are assigned the <code>display</code>
|
||||
values <code>table</code>, <code>table-row-group</code>,
|
||||
<code>table-row</code>, and <code>table-cell</code>, respectively.</li>
|
||||
<li>The device can display the sixteen color values associated with the color
|
||||
keywords <code>black</code>, <code>white</code>, <code>gray</code>,
|
||||
<code>silver</code>, <code>red</code>, <code>green</code>, <code>blue</code>,
|
||||
<code>purple</code>, <code>yellow</code>, <code>orange</code>, <code>teal</code>,
|
||||
<code>fuchsia</code>, <code>maroon</code>, <code>navy</code>, <code>aqua</code>,
|
||||
and <code>lime</code> as distinct colors.</li>
|
||||
<li>The UA is set to print background colors and, if it supports graphics,
|
||||
background images.</li>
|
||||
<li>The UA implements reasonable page-breaking behavior; e.g., it is assumed
|
||||
that UAs will not break at every opportunity, but only near the end of
|
||||
a page unless a page break is forced.</li>
|
||||
<li>The UA implements reasonable line-breaking behavior; e.g., it is assumed
|
||||
that spaces between alphanumeric characters provide line breaking
|
||||
opportunities and that UAs will not break at every opportunity, but only
|
||||
near the end of a line unless a line break is forced.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="uncommon">Uncommon Assumptions</h2>
|
||||
|
||||
<p>In addition, some of the tests make one or more of the following
|
||||
assumptions:</p>
|
||||
|
||||
<ul>
|
||||
<li>The device is a full-color device.</li>
|
||||
<li>The device has a viewport width of at least 640px (approx).</li>
|
||||
<li>The resolution of the device is 96 CSS pixels per inch.</li>
|
||||
<li>The UA imposes no minimum font size.</li>
|
||||
<li>The 'medium' font-size computes to 16px.</li>
|
||||
<li>The initial value of 'color' is black.</li>
|
||||
<li>The canvas background is white.</li>
|
||||
<li>The user stylesheet is empty (except where indicated by the tests).</li>
|
||||
<li>The device is interactive and uses scroll bars.</li>
|
||||
</ul>
|
||||
|
||||
<p>The tests that need these assumptions to be true have not yet been
|
||||
marked, but it is likely that we will add a way to identify these
|
||||
tests in due course. Tests should avoid relying on these assumptions
|
||||
unless necessary.</p>
|
||||
|
||||
<h2>License</h2>
|
||||
|
||||
<p>This test suite is licensed under both the
|
||||
<a href="http://www.w3.org/Consortium/Legal/2008/04-testsuite-license">W3C
|
||||
Test Suite License</a> and the <a href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license">W3C
|
||||
3-clause BSD License</a>. See W3C Legal's <a href="http://www.w3.org/Consortium/Legal/2008/04-testsuite-copyright">explanation
|
||||
of the licenses</a>.</p>
|
||||
|
||||
<h2>Acknowledgements</h2>
|
||||
|
||||
<p>Many thanks to the following for their contributions:</p>
|
||||
<ul>
|
||||
<li>Ryosuke Niwa</li>
|
||||
<li>Takayoshi Kochi</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
96
tests/wpt/css-tests/css-scoping-1_dev/indices.css
Normal file
96
tests/wpt/css-tests/css-scoping-1_dev/indices.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
/* CSS for CSS Conformance Test Indices */
|
||||
/* Written by fantasai */
|
||||
|
||||
/* Test Tables */
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 0.2em solid;
|
||||
}
|
||||
|
||||
tbody {
|
||||
border: thin solid;
|
||||
border-style: solid none;
|
||||
}
|
||||
|
||||
tbody.ch {
|
||||
border-top: 0.2em solid;
|
||||
}
|
||||
tbody.ch th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tbody th {
|
||||
border-bottom: silver dotted thin;
|
||||
background: #EEE;
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
tbody th :link {
|
||||
color: gray;
|
||||
background: transparent;
|
||||
}
|
||||
tbody th :visited {
|
||||
color: #333;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.2em;
|
||||
text-align: left;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* flags */
|
||||
td abbr {
|
||||
border: solid thin gray;
|
||||
padding: 0 0.1em;
|
||||
cursor: help;
|
||||
}
|
||||
td abbr:hover {
|
||||
background: #ffa;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
tr:hover {
|
||||
background: #F9F9F9;
|
||||
color: navy;
|
||||
}
|
||||
|
||||
th a,
|
||||
td a {
|
||||
text-decoration: none;
|
||||
}
|
||||
th a:hover,
|
||||
td a:hover,
|
||||
th a:focus,
|
||||
td a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
td a {
|
||||
display: block;
|
||||
padding-left: 2em;
|
||||
text-indent: -1em;
|
||||
}
|
||||
.refs {
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
.assert, .assert > li {
|
||||
list-style-type: none;
|
||||
font-style: italic;
|
||||
color: gray;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
18
tests/wpt/css-tests/css-scoping-1_dev/testinfo.data
Normal file
18
tests/wpt/css-tests/css-scoping-1_dev/testinfo.data
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
id references title flags links revision credits assertion
|
||||
css-scoping-shadow-assigned-node-with-before-after reference/green-box CSS Scoping Module Level 1 - ::before and ::after pseudo class' contents on a node assigned to a slot element must be rendered http://www.w3.org/TR/css-scoping-1/#selectors-data-model 86d6ccf6a53df8f215161755126432eec2e5285c `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-assigned-node-with-rules reference/green-box CSS Scoping Module Level 1 - Only rules outside a shadow tree must apply to nodes assigned to a slot in the shadow tree. http://www.w3.org/TR/css-scoping-1/#selectors-data-model f1e064a369834bde113c6a011aa81d1a11afc7f1 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-host-functional-rule reference/green-box CSS Scoping Module Level 1 - :host() rules must apply to the shadow host. http://www.w3.org/TR/css-scoping-1/#host-selector 25dae83506684c0287ec507c8c56f7b4bd9ce914 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-host-rule reference/green-box CSS Scoping Module Level 1 - :host rules must apply to the shadow host. http://www.w3.org/TR/css-scoping-1/#host-selector bcab33bb0ab7cff8c75fedae80dffb05eef446c7 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-host-with-before-after reference/green-box CSS Scoping Module Level 1 - ::before and ::after pseudo elements' contents on a shadow host must be rendered http://www.w3.org/TR/css-scoping-1/#selectors-data-model 302f5cd1b9bffee20dfc4709679813b2dc77a30d `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-invisible-slot reference/green-box CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree. http://www.w3.org/TR/css-scoping-1/#selectors-data-model 379a41f732e729762133b5b8096f0bd25794244e `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-root-hides-children reference/green-box CSS Scoping Module Level 1 - a shadow tree hides non-distributed children of the host http://www.w3.org/TR/css-scoping-1/#selectors-data-model 5c29ca5ec3a5b7c4e38f201b52f7b496e5379b4c `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-slot reference/green-box CSS Scoping Module Level 1 - elements with a distribution list should generate boxes in the formatting tree. http://www.w3.org/TR/css-scoping-1/#selectors-data-model 4cbaf4deb4df818be6c20df1a566fba81ca82919 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-slot-display-override reference/green-box CSS Scoping Module Level 1 - overriding slot element's display value should generate boxes http://www.w3.org/TR/css-scoping-1/#selectors-data-model 73b7c121a207f7d4bf636590137f2e8e7123cb4c `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-slot-fallback reference/green-box CSS Scoping Module Level 1 - slot element without distributed nodes must render its fallback content http://www.w3.org/TR/css-scoping-1/#selectors-data-model 1f8c5272e5bd12910ae95f10b94c48505518d363 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-slot-style reference/green-box CSS Scoping Module Level 1 - Ensure that slot's style is inherited by slotted children http://www.w3.org/TR/css-scoping-1/#selectors-data-model 3e8c9845ce72fb1e1a14b9081396371637c9ea2f `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-slotted-nested reference/green-box CSS Scoping Module Level 1 - ::slotted pseudo element rule must apply to an element that got slotted via another slot http://www.w3.org/TR/css-scoping-1/#slotted-pseudo 2cb213cc0693d5ac1879674ca30426ce9f5e1447 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-slotted-rule reference/green-box CSS Scoping Module Level 1 - :slotted pseudo element must allow selecting elements assigned to a slot element http://www.w3.org/TR/css-scoping-1/#slotted-pseudo 0b44695dda05d4246ed820e6f6bb7e2f099aae18 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-with-outside-rules reference/green-box CSS Scoping Module Level 1 - a selector outside a shadow tree should not match nodes inside the shadow tree http://www.w3.org/TR/css-scoping-1/#selectors-data-model 839b41ca1a304f7b2cd82258e6024d9822fed5d7 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-with-rules reference/green-box CSS Scoping Module Level 1 - a selector inside a shadow tree is matched against nodes in the shadow tree http://www.w3.org/TR/css-scoping-1/#selectors-data-model b2269294a8cb6668c7c3bd7fb43e58ddcd0c573a `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
css-scoping-shadow-with-rules-no-style-leak reference/green-box CSS Scoping Module Level 1 - a style rule inside a shadow tree doesn't affect the normal dom http://www.w3.org/TR/css-scoping-1/#selectors-data-model d5ae794a29766bdaf086dcfcdf39c20cefc9a4b5 `Ryosuke Niwa`<mailto:rniwa@webkit.org>
|
||||
shadow-cascade-order-001 Shadow DOM: CSS Style Rule cascading script https://drafts.csswg.org/css-scoping-1/#shadow-cascading 45756e2efc3a5b68952b94b01c3427d410e33a03 `Takayoshi Kochi`<mailto:kochi@google.com> Cascading order test for style rules from various shadow trees.
|
||||
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