Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(83)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html

Issue 138023007: Renamed :host to :ancestor and made :host to match only shadow host. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/ancestor-pseudo-class-expected.txt » ('j') | LayoutTests/fast/dom/shadow/ancestor-pseudo-class-expected.txt » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html
diff --git a/LayoutTests/fast/dom/shadow/host-pseudo-class.html b/LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html
similarity index 64%
copy from LayoutTests/fast/dom/shadow/host-pseudo-class.html
copy to LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html
index 9e85306b28d49531dcf98e2666bfcf2e21aa9def..481217f0e32a42b6ee50d27c3785bbfcf72b6c58 100644
--- a/LayoutTests/fast/dom/shadow/host-pseudo-class.html
+++ b/LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html
@@ -1,10 +1,10 @@
- <!doctype html>
+<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
<style>
-:host {
+:ancestor {
background-color: red;
}
</style>
@@ -15,7 +15,7 @@
</div>
<pre id='console'></pre>
<script>
-description('Test whether :host matches a shadow host correctly.');
+description('Test whether :ancestor matches a shadow host correctly.');
var sandbox = document.getElementById('sandbox');
@@ -31,7 +31,7 @@ function cleanUp() {
sandbox.innerHTML = '';
}
-debug(':host out of shadow tree should not match any shadow hosts.');
+debug(':ancestor out of shadow tree should not match any shadow hosts.');
sandbox.appendChild(
createDOM('div', {'id': 'host'},
@@ -43,13 +43,13 @@ backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
cleanUp();
-debug(':host with * should not match any shadow hosts.');
+debug(':ancestor with * should not match any shadow hosts.');
sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode('*:host { background-color: green; }')),
+ document.createTextNode('*:ancestor { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello')))));
@@ -57,13 +57,13 @@ backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
cleanUp();
-debug(':host with tag selector should not match any shadow hosts.');
+debug(':ancestor with tag selector should not match any shadow hosts.');
sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode('div:host { background-color: green; }')),
+ document.createTextNode('div:ancestor { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello')))));
@@ -71,13 +71,13 @@ backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
cleanUp();
-debug(':host with class selector should not match any shadow hosts.');
+debug(':ancestor with class selector should not match any shadow hosts.');
sandbox.appendChild(
createDOM('div', {'id': 'host', 'class': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode('.host:host { background-color: green; }')),
+ document.createTextNode('.host:ancestor { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello')))));
@@ -85,13 +85,13 @@ backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
cleanUp();
-debug(':host with id selector should not match any shadow hosts.');
+debug(':ancestor with id selector should not match any shadow hosts.');
sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode('#host:host { background-color: green; }')),
+ document.createTextNode('#host:ancestor { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello')))));
@@ -99,13 +99,13 @@ backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
cleanUp();
-debug(':host with attribute selector should not match any shadow hosts.');
+debug(':ancestor with attribute selector should not match any shadow hosts.');
sandbox.appendChild(
createDOM('div', {'id': 'host', 'foo': 'bar'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode('[foo=bar]:host { background-color: green; }')),
+ document.createTextNode('[foo=bar]:ancestor { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello')))));
@@ -113,13 +113,13 @@ backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
cleanUp();
-debug(':host in a shadow tree should match its shadow host.');
+debug(':ancestor in a shadow tree should match its shadow host.');
sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(body.mytheme) { background-color: green; }')),
+ document.createTextNode(':ancestor(body.mytheme) { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello')))));
@@ -127,14 +127,28 @@ backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
cleanUp();
-debug(':host takes simple selectors and matches when one of the simple selectors matches.');
+debug(':ancestor with :host in a shadow tree should match its shadow host.');
+
+sandbox.appendChild(
+ createDOM('div', {'id': 'host'},
+ createShadowRoot(
+ createDOM('style', {},
+ document.createTextNode(':ancestor(div:host) { background-color: green; }')),
+ createDOM('div', {},
+ document.createTextNode('Hello')))));
+
+backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
+
+cleanUp();
+
+debug(':ancestor takes simple selectors and matches when one of the simple selectors matches.');
sandbox.appendChild(
createDOM('div', {'id': 'parentOfHost'},
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(body:not(.mytheme), span, div#parentOfHost) { background-color: green; }')),
+ document.createTextNode(':ancestor(body:not(.mytheme), span, div#parentOfHost) { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello'))))));
@@ -142,7 +156,7 @@ backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
cleanUp();
-debug(':host matches a shadow host in just a nested shadow tree, not all enclosing shadow trees.');
+debug(':ancestor matches a shadow host in just a nested shadow tree, not all enclosing shadow trees.');
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
@@ -150,14 +164,14 @@ sandbox.appendChild(
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host { background-color: green; }')),
+ document.createTextNode(':ancestor { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello')))))));
backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)');
backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)');
-debug(':host matches based on a composed tree.');
+debug(':ancestor matches based on a composed tree.');
sandbox.appendChild(
createDOM('div', {'id': 'parentOfHost'},
@@ -167,7 +181,7 @@ sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(span#spanA) > div { background-color: green; }')),
+ document.createTextNode(':ancestor(span#spanA) > div { background-color: green; }')),
createDOM('div', {'id': 'target'},
document.createTextNode('Hello'))))));
@@ -175,7 +189,7 @@ backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
cleanUp();
-debug(':host matches based on a composed tree when having multiple shadow roots.');
+debug(':ancestor matches based on a composed tree when having multiple shadow roots.');
sandbox.appendChild(
createDOM('div', {'id': 'parentOfHost'},
@@ -192,11 +206,11 @@ sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(span#spanA) > #targetA { background-color: red; }')),
+ document.createTextNode(':ancestor(span#spanA) > #targetA { background-color: red; }')),
createDOM('style', {},
- document.createTextNode(':host(span#spanB) > #targetB { background-color: green; }')),
+ document.createTextNode(':ancestor(span#spanB) > #targetB { background-color: green; }')),
createDOM('style', {},
- document.createTextNode(':host(span#spanC) > #targetC { background-color: green; }')),
+ document.createTextNode(':ancestor(span#spanC) > #targetC { background-color: green; }')),
createDOM('div', {'id': 'targetA'},
document.createTextNode('Hello')),
createDOM('div', {'id': 'targetB'},
@@ -210,14 +224,14 @@ backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)');
cleanUp();
-debug(':host is updated when its matched ancestor changes className or id.');
+debug(':ancestor is updated when its matched ancestor changes className or id.');
sandbox.appendChild(
createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' },
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(div#parentOfHost.sometheme) { background-color: green; }')),
+ document.createTextNode(':ancestor(div#parentOfHost.sometheme) { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello'))))));
@@ -232,7 +246,7 @@ sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(div#parentOfHost.sometheme) { background-color: green; }')),
+ document.createTextNode(':ancestor(div#parentOfHost.sometheme) { background-color: green; }')),
createDOM('div', {},
document.createTextNode('Hello'))))));
@@ -243,19 +257,19 @@ backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
cleanUp();
-debug('Compare :host with :host.');
+debug('Compare :ancestor with :ancestor.');
sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(div:host, div#sandbox) { background-color: green; }')),
+ document.createTextNode(':ancestor(div:ancestor, div#sandbox) { background-color: green; }')),
createDOM('style', {},
- document.createTextNode(':host(body.mytheme) { background-color: red; }')),
+ document.createTextNode(':ancestor(body.mytheme) { background-color: red; }')),
createDOM('div', {},
document.createTextNode('Hello')))));
-// :host(div:host, div#sandbox) wins, because div#sandbox > body.mytheme.
+// :ancestor(div:ancestor, div#sandbox) wins, because div#sandbox > body.mytheme.
backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
cleanUp();
@@ -264,25 +278,25 @@ sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(div:host, div#nomatch) { background-color: green; }')),
+ document.createTextNode(':ancestor(div:ancestor, div#nomatch) { background-color: green; }')),
createDOM('style', {},
- document.createTextNode(':host(body.mytheme) { background-color: red; }')),
+ document.createTextNode(':ancestor(body.mytheme) { background-color: red; }')),
createDOM('div', {},
document.createTextNode('Hello')))));
-// :host(body.mytheme) wins, because div:host < body.mytheme.
+// :ancestor(body.mytheme) wins, because div:ancestor < body.mytheme.
backgroundColorShouldBe('host', 'rgb(255, 0, 0)');
cleanUp();
-// Test for specificiy of ":host(...) > ...".
+// Test for specificiy of ":ancestor(...) > ...".
sandbox.appendChild(
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(div:host, div#host:host) > div { background-color: green; }')),
+ document.createTextNode(':ancestor(div:ancestor, div#host:ancestor) > div { background-color: green; }')),
createDOM('style', {},
- document.createTextNode(':host(body.mytheme) > div { background-color: red; }')),
+ document.createTextNode(':ancestor(body.mytheme) > div { background-color: red; }')),
createDOM('div', {'id': 'target'},
document.createTextNode('Hello')))));
@@ -294,9 +308,9 @@ sandbox.appendChild(
createDOM('div', {'id': 'host', 'class': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(div:host, div#host.host:host) > div { background-color: green; }')),
+ document.createTextNode(':ancestor(div:ancestor, div#host.host:ancestor) > div { background-color: green; }')),
createDOM('style', {},
- document.createTextNode(':host(body) > div#target { background-color: red; }')),
+ document.createTextNode(':ancestor(body) > div#target { background-color: red; }')),
createDOM('div', {'id': 'target'},
document.createTextNode('Hello')))));
@@ -308,9 +322,9 @@ sandbox.appendChild(
createDOM('div', {'id': 'host', 'class': 'host'},
createShadowRoot(
createDOM('style', {},
- document.createTextNode(':host(div:host(div:host(div:host(div:host)))) > div { background-color: green; }')),
+ document.createTextNode(':ancestor(div:ancestor(div:ancestor(div:ancestor(div:ancestor)))) > div { background-color: green; }')),
createDOM('style', {},
- document.createTextNode(':host(div) > div { background-color: red; }')),
+ document.createTextNode(':ancestor(div) > div { background-color: red; }')),
createDOM('div', {'id': 'target'},
document.createTextNode('Hello')))));
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/ancestor-pseudo-class-expected.txt » ('j') | LayoutTests/fast/dom/shadow/ancestor-pseudo-class-expected.txt » ('J')

Powered by Google App Engine
This is Rietveld 408576698