Index: LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html |
diff --git a/LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html b/LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html |
deleted file mode 100644 |
index 93d6e570c6b91123b8ad3f44f5caddfa8c7f25b2..0000000000000000000000000000000000000000 |
--- a/LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html |
+++ /dev/null |
@@ -1,336 +0,0 @@ |
-<!DOCTYPE html> |
-<html> |
-<head> |
-<script src="../../../resources/js-test.js"></script> |
-<script src="resources/shadow-dom.js"></script> |
-<style> |
-:ancestor { |
- background-color: red; |
-} |
-</style> |
-</head> |
-<body class='mytheme'> |
- <div> |
- <div id='sandbox'></div> |
- </div> |
- <pre id='console'></pre> |
-<script> |
-description('Test whether :ancestor matches a shadow host correctly.'); |
- |
-var sandbox = document.getElementById('sandbox'); |
- |
-function backgroundColorOf(selector) { |
- return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundColor; |
-} |
- |
-function backgroundColorShouldBe(selector, expected) { |
- shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected); |
-} |
- |
-function cleanUp() { |
- sandbox.innerHTML = ''; |
-} |
- |
-debug(':ancestor out of shadow tree should not match any shadow hosts.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
- |
-cleanUp(); |
- |
-debug(':ancestor with * should not match any shadow hosts.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode('*:ancestor { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
- |
-cleanUp(); |
- |
-debug(':ancestor with tag selector should not match any shadow hosts.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode('div:ancestor { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
- |
-cleanUp(); |
- |
-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:ancestor { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
- |
-cleanUp(); |
- |
-debug(':ancestor with id selector should not match any shadow hosts.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode('#host:ancestor { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
- |
-cleanUp(); |
- |
-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]:ancestor { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
- |
-cleanUp(); |
- |
-debug(':ancestor in a shadow tree should match its shadow host.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(body.mytheme) { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
- |
-cleanUp(); |
- |
-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(':ancestor(body:not(.mytheme), span, div#parentOfHost) { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello')))))); |
- |
-backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
- |
-cleanUp(); |
- |
-debug(':ancestor matches a shadow host in just a nested shadow tree, not all enclosing shadow trees.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host1'}, |
- createShadowRoot( |
- createDOM('div', {'id': 'host2'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- 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(':ancestor matches based on a composed tree.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'parentOfHost'}, |
- createShadowRoot( |
- createDOM('span', {'id': 'spanA'}, |
- createDOM('content', {}))), |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(span#spanA) > div { background-color: green; }')), |
- createDOM('div', {'id': 'target'}, |
- document.createTextNode('Hello')))))); |
- |
-backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
- |
-cleanUp(); |
- |
-debug(':ancestor matches based on a composed tree when having multiple shadow roots.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'parentOfHost'}, |
- createShadowRoot( |
- createDOM('span', {'id': 'spanA'}, |
- document.createTextNode('no content, no shadow'))), |
- createShadowRoot( |
- createDOM('span', {'id': 'spanB'}, |
- createDOM('content', {}))), |
- createShadowRoot( |
- createDOM('span', {'id': 'spanC'}, |
- createDOM('shadow', {}, |
- createDOM('content')))), |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(span#spanA) > #targetA { background-color: red; }')), |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(span#spanB) > #targetB { background-color: green; }')), |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(span#spanC) > #targetC { background-color: green; }')), |
- createDOM('div', {'id': 'targetA'}, |
- document.createTextNode('Hello')), |
- createDOM('div', {'id': 'targetB'}, |
- document.createTextNode('Hello')), |
- createDOM('div', {'id': 'targetC'}, |
- document.createTextNode('Hello')))))); |
- |
-backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)'); |
-backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)'); |
-backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)'); |
- |
-cleanUp(); |
- |
-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(':ancestor(div#parentOfHost.sometheme) { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello')))))); |
- |
-backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
-document.getElementById('parentOfHost').className = 'mytheme'; |
-backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
- |
-cleanUp(); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(div#parentOfHost.sometheme) { background-color: green; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello')))))); |
- |
-backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
-var parentOfHost = document.getElementById('parentOfHost'); |
-parentOfHost.id = 'differntIdValue'; |
-backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
- |
-cleanUp(); |
- |
-debug('Compare :ancestor with :ancestor.'); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(div:ancestor, div#sandbox) { background-color: green; }')), |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(body.mytheme) { background-color: red; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-// :ancestor(div:ancestor, div#sandbox) wins, because div#sandbox > body.mytheme. |
-backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
- |
-cleanUp(); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(div:ancestor, div#nomatch) { background-color: green; }')), |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(body.mytheme) { background-color: red; }')), |
- createDOM('div', {}, |
- document.createTextNode('Hello'))))); |
- |
-// :ancestor(body.mytheme) wins, because div:ancestor < body.mytheme. |
-backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); |
- |
-cleanUp(); |
- |
-// Test for specificiy of ":ancestor(...) > ...". |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(div:ancestor, div#host:ancestor) > div { background-color: green; }')), |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(body.mytheme) > div { background-color: red; }')), |
- createDOM('div', {'id': 'target'}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
- |
-cleanUp(); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host', 'class': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(div:ancestor, div#host.host:ancestor) > div { background-color: green; }')), |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(body) > div#target { background-color: red; }')), |
- createDOM('div', {'id': 'target'}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
- |
-cleanUp(); |
- |
-sandbox.appendChild( |
- createDOM('div', {'id': 'host', 'class': 'host'}, |
- createShadowRoot( |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(div:ancestor(div:ancestor(div:ancestor(div:ancestor)))) > div { background-color: green; }')), |
- createDOM('style', {}, |
- document.createTextNode(':ancestor(div) > div { background-color: red; }')), |
- createDOM('div', {'id': 'target'}, |
- document.createTextNode('Hello'))))); |
- |
-backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
- |
-cleanUp(); |
- |
-</script> |
-</body> |