Add more rendering tests for shadow DOM
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Sep 2015 02:26:28 +0000 (02:26 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Sep 2015 02:26:28 +0000 (02:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=149437

Reviewed by Antti Koivisto.

Added various tests for shadow tree rendering as well as tests for :host pseudo class and ::slotted pseudo element.

* fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after.html: Added.
* fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules.html: Added.
* fast/shadow-dom/css-scoping-shadow-host-functional-rule-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/css-scoping-shadow-host-functional-rule.html: Added.
* fast/shadow-dom/css-scoping-shadow-host-rule-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/css-scoping-shadow-host-rule.html: Added.
* fast/shadow-dom/css-scoping-shadow-host-with-before-after-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/css-scoping-shadow-host-with-before-after.html: Added.
* fast/shadow-dom/css-scoping-shadow-slot-display-override-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/css-scoping-shadow-slot-display-override.html: Added.
* fast/shadow-dom/css-scoping-shadow-slotted-rule-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/css-scoping-shadow-slotted-rule.html: Added.
* fast/shadow-dom/css-scoping-shadow-with-outside-rules-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/css-scoping-shadow-with-outside-rules.html: Added.
* platform/mac/TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190098 268f45cc-cd09-0410-ab3c-d52691b4dbfc

18 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-host-functional-rule-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-host-functional-rule.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-host-rule-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-host-rule.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-host-with-before-after-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-host-with-before-after.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-slot-display-override-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-slot-display-override.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-rule-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-rule.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-with-outside-rules-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/css-scoping-shadow-with-outside-rules.html [new file with mode: 0644]
LayoutTests/platform/mac/TestExpectations

index a3c3cf2fe3197339dd2fe7f41602548774be0775..c3bf28d350b3f5412d78c32d9f78a2020e5de128 100644 (file)
@@ -1,3 +1,30 @@
+2015-09-21  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Add more rendering tests for shadow DOM
+        https://bugs.webkit.org/show_bug.cgi?id=149437
+
+        Reviewed by Antti Koivisto.
+
+        Added various tests for shadow tree rendering as well as tests for :host pseudo class and ::slotted pseudo element.
+
+        * fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after.html: Added.
+        * fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules.html: Added.
+        * fast/shadow-dom/css-scoping-shadow-host-functional-rule-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/css-scoping-shadow-host-functional-rule.html: Added.
+        * fast/shadow-dom/css-scoping-shadow-host-rule-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/css-scoping-shadow-host-rule.html: Added.
+        * fast/shadow-dom/css-scoping-shadow-host-with-before-after-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/css-scoping-shadow-host-with-before-after.html: Added.
+        * fast/shadow-dom/css-scoping-shadow-slot-display-override-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/css-scoping-shadow-slot-display-override.html: Added.
+        * fast/shadow-dom/css-scoping-shadow-slotted-rule-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/css-scoping-shadow-slotted-rule.html: Added.
+        * fast/shadow-dom/css-scoping-shadow-with-outside-rules-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/css-scoping-shadow-with-outside-rules.html: Added.
+        * platform/mac/TestExpectations:
+
 2015-09-21  Chris Dumez  <cdumez@apple.com>
 
         [JS Bindings] prototype.constructor should be writable
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-before-after.html
new file mode 100644 (file)
index 0000000..158ec75
--- /dev/null
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - before and after contents on a node assigned to a slot element must be rendered</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+        my-host {
+            display: block;
+            width: 100px;
+            height: 100px;
+            background: red;
+        }
+        div {
+            display: block;
+            background: red;
+            line-height: 0px;
+            width: 100%;
+            height: 50px;
+        }
+        [slot=foo]:before,
+        [slot=foo]:after {
+            display: block;
+            content: "";
+            width: 100%;
+            height: 25px;
+        }
+        [slot=foo]:before,
+        [slot=foo]:after {
+            background: green;
+        }
+        [slot=bar]:before,
+        [slot=bar]:after {
+            background: yellow;
+        }
+    </style>
+    <p>Test passes if you see a single 100px by 100px green box below.</p> 
+    <my-host>
+        <div slot="foo"></div>
+        <div slot="bar"></div>
+        <div slot="foo"></div>
+    </my-host>
+    <script>
+
+        try {
+            var shadowHost = document.querySelector('my-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<slot name="foo"></slot>';
+        } catch (exception) {
+            document.body.appendChild(document.createTextNode(exception));
+        }
+
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-assigned-node-with-rules.html
new file mode 100644 (file)
index 0000000..ff5b25c
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - only rules outside a shadow tree must apply to nodes assigned to a slot in the shadow tree.</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+    my-host {
+        display: block;
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        background: green;
+    }
+    div {
+        width: 100%;
+        height: 50%;
+    }
+    .green {
+        color: green;
+    }
+    .red {
+        color: red;
+    }
+    </style>
+    <p>Test passes if you see a single 100px by 100px green box below.</p> 
+    <my-host>
+        <div class="red">FAIL</div>
+        <div class="green" slot="green">FAIL</div>
+        <div class="red" slot="invalid">FAIL</div>
+        <div class="green" slot="green">FAIL</div>
+    </my-host>
+    <script>
+
+    try {
+        var shadowHost = document.querySelector('my-host');
+        shadowRoot = shadowHost.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<style> div { color: yellow; } </style><slot name="green"></slot>';
+    } catch (exception) {
+        document.body.appendChild(document.createTextNode(exception));
+    }
+
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-functional-rule-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-functional-rule-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-functional-rule.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-functional-rule.html
new file mode 100644 (file)
index 0000000..99a06e6
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - :host() rules must apply to the shadow host.</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+        my-host, good-host, other-host, other-good-host {
+            display: block;
+            width: 100px;
+            height: 50px;
+            background: red;
+        }
+        good-host, other-good-host {
+            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>
+    <div class="container">
+        <good-host>
+            <div>FAIL</div>
+        </good-host>
+    </div>
+    <other-host id="bar" class="foo" name="baz">
+        <div>FAIL</div>
+    </other-host>
+    <other-good-host>
+        <div class="child">FAIL</div>
+    </other-good-host>
+    <script>
+
+        try {
+            var shadowHost = document.querySelector('other-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<style> :host(other-host.foo#bar[name=baz]) { background: green; } </style>';
+
+            shadowHost = document.querySelector('other-good-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<style> :host(.child) { background: red; } </style>';
+        } catch (exception) {
+            document.body.appendChild(document.createTextNode(exception));
+        }
+
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-rule-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-rule-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-rule.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-rule.html
new file mode 100644 (file)
index 0000000..a921b52
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - :host rules must apply to the shadow host.</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+        my-host, good-host, other-host, other-good-host {
+            display: block;
+            width: 100px;
+            height: 50px;
+            background: red;
+        }
+        good-host, other-good-host {
+            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>
+    <div class="container">
+        <good-host>
+            <div>FAIL</div>
+        </good-host>
+    </div>
+    <other-host id="bar" class="foo" name="baz">
+        <div>FAIL</div>
+    </other-host>
+    <other-good-host>
+        <div class="child">FAIL</div>
+    </other-good-host>
+    <script>
+
+        try {
+            var shadowHost = document.querySelector('my-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<style> :host { background: green; } </style>';
+
+            shadowHost = document.querySelector('good-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<style> .container :host { background: red; } </style>';
+        } catch (exception) {
+            document.body.appendChild(document.createTextNode(exception));
+        }
+
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-with-before-after-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-with-before-after-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-with-before-after.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-host-with-before-after.html
new file mode 100644 (file)
index 0000000..dd16880
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - before and after contents on a shadow host must be rendered</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+        my-host {
+            display: block;
+            width: 100px;
+            height: 100px;
+            background: red;
+        }
+        my-host:before {
+            display: block;
+            content: "";
+            width: 100px;
+            height: 25px;
+            background: green;
+        }
+        my-host:after {
+            display: block;
+            content: "";
+            width: 100px;
+            height: 25px;
+            background: green;
+        }
+    </style>
+    <p>Test passes if you see a single 100px by 100px green box below.</p> 
+    <my-host>
+        <div>FAIL</div>
+    </my-host>
+    <script>
+
+        try {
+            var shadowHost = document.querySelector('my-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<div style="width: 100px; height: 50px; background: green"></div>';
+        } catch (exception) {
+            document.body.appendChild(document.createTextNode(exception));
+        }
+
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-slot-display-override-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-slot-display-override-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-slot-display-override.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-slot-display-override.html
new file mode 100644 (file)
index 0000000..8ef8418
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - overriding slot element's display value should generate boxes</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+        my-host {
+            display: block;
+            width: 100px;
+            height: 100px;
+            background: red;
+        }
+        my-host > div {
+            width: 50px;
+            height: 50px;
+            background: green;
+        }
+    </style>
+    <p>Test passes if you see a single 100px by 100px green box below.</p> 
+    <my-host>
+        <div></div>
+    </my-host>
+    <script>
+
+        try {
+            var shadowHost = document.querySelector('my-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<slot style="display:block; border: solid 25px green;"></slot>';
+        } catch (exception) {
+            document.body.appendChild(document.createTextNode(exception));
+        }
+
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-rule-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-rule-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-rule.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-rule.html
new file mode 100644 (file)
index 0000000..b660527
--- /dev/null
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - :slotted pesudo element must allow selecting elements assigned to a slot element</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+        my-host {
+            display: block;
+            width: 100px;
+            height: 100px;
+            background: red;
+        }
+        my-host > div, 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>
+        <div><span>FAIL2</span></div>
+        <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 span { color:green; } </style>';
+
+            shadowHost = document.querySelector('nested-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<slot></slot>';
+
+            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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-with-outside-rules-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-with-outside-rules-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<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>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-with-outside-rules.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-with-outside-rules.html
new file mode 100644 (file)
index 0000000..2461a42
--- /dev/null
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - a selector outside a shadow tree should not match nodes inside the shadow tree</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+
+        my-host {
+            display: block;
+            width: 100px;
+            height: 100px;
+            background: green;
+        }
+
+        div {
+            width: 100%;
+            height: 100%;
+            background: red;
+            content: "FAIL";
+        }
+
+    </style>
+    <p>Test passes if you see a single 100px by 100px green box below.</p> 
+    <my-host>
+        <div>FAIL</div>
+    </my-host>
+    <script>
+
+        try {
+            var shadowHost = document.querySelector('my-host');
+            shadowRoot = shadowHost.attachShadow({mode: 'open'});
+            shadowRoot.innerHTML = '<div></div>';
+        } catch (exception) {
+            document.body.appendChild(document.createTextNode(exception));
+        }
+
+    </script>
+</body>
+</html>
index a9076d2251033c9718a096529a3a2c9e6aa66a26..647d41a6ec899852b79cebfe35ee5645b947ef81 100644 (file)
@@ -1304,3 +1304,7 @@ webkit.org/b/149128 fast/text/control-characters [ ImageOnlyFailure ]
 
 webkit.org/b/148695 fast/shadow-dom [ Pass ]
 webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-with-rules.html [ ImageOnlyFailure ]
+webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-host-rule.html [ ImageOnlyFailure ]
+webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-host-functional-rule.html [ ImageOnlyFailure ]
+webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-slotted-rule.html [ ImageOnlyFailure ]
+webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-slot-display-override.html [ ImageOnlyFailure ]