| 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>
|
|
|