| Index: LayoutTests/fast/dom/shadow/content-combinator.html
|
| diff --git a/LayoutTests/fast/dom/shadow/content-combinator.html b/LayoutTests/fast/dom/shadow/content-combinator.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..7af59e185fcd10b33fb4152305f61970ccbb4c97
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/dom/shadow/content-combinator.html
|
| @@ -0,0 +1,225 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<script src="resources/shadow-dom.js"></script>
|
| +<script src="../../../resources/js-test.js"></script>
|
| +</head>
|
| +<body>
|
| + <div id="sandbox"></div>
|
| + <pre id="console"></pre>
|
| +<script>
|
| +
|
| +function colorOf(selector)
|
| +{
|
| + return document.defaultView.getComputedStyle(document.querySelector(selector), null).getPropertyValue('color');
|
| +}
|
| +
|
| +function colorOfNodeInTreeOfTrees(selector)
|
| +{
|
| + return document.defaultView.getComputedStyle(getNodeInTreeOfTrees(selector), null).getPropertyValue('color');
|
| +}
|
| +
|
| +function cleanUp()
|
| +{
|
| + document.getElementById('sandbox').innerHTML = '';
|
| +}
|
| +
|
| +var sandbox = document.getElementById('sandbox');
|
| +
|
| +// From content-pseudo-element.html
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('content /content/ div { color: green; }')),
|
| + createDOM('content')),
|
| + createDOM('div', {},
|
| + document.createTextNode('green'))));
|
| +
|
| +shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"');
|
| +
|
| +cleanUp();
|
| +
|
| +// From content-pseudo-element-used-in-selector-list.html
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('content /content/ div, p { color: green; }')),
|
| + createDOM('content'),
|
| + createDOM('p', {'id': 'p-in-shadow'},
|
| + document.createTextNode('green'))),
|
| + createDOM('div', {},
|
| + document.createTextNode('green')),
|
| + createDOM('p', {'class': 'hello'},
|
| + document.createTextNode('normal'))));
|
| +
|
| +shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"');
|
| +shouldBe('colorOfNodeInTreeOfTrees("host/p-in-shadow")', '"rgb(0, 128, 0)"');
|
| +shouldNotBe('colorOf("#host > p")', '"rgb(0, 128, 0)"');
|
| +
|
| +cleanUp();
|
| +
|
| +// From content-pseudo-element-support-selector.html
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('content /content/ div.hello div { color: green; }')),
|
| + createDOM('content')),
|
| + createDOM('div', {'class': 'hello'},
|
| + document.createTextNode('normal'),
|
| + createDOM('div', {},
|
| + document.createTextNode('green'))),
|
| + createDOM('div', {},
|
| + document.createTextNode('normal'),
|
| + createDOM('div', {},
|
| + document.createTextNode('normal')))));
|
| +
|
| +shouldBe('colorOf("#host > div.hello > div")', '"rgb(0, 128, 0)"');
|
| +shouldNotBe('colorOf("#host > div:not(.hello) > div")', '"rgb(0, 128, 0)"');
|
| +cleanUp();
|
| +
|
| +// From content-pseudo-element-reprojection.html
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('div', {'id': 'host2'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('content /content/ .foo { color: green; }')),
|
| + createDOM('content', {'select': '.foo'})),
|
| + createDOM('content'))),
|
| + createDOM('div', {'class': 'foo'},
|
| + document.createTextNode('green'))));
|
| +
|
| +shouldBe('colorOf("#host > div.foo")', '"rgb(0, 128, 0)"');
|
| +cleanUp();
|
| +
|
| +// From content-pseudo-element-match-all.html
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('content /content/ .hello { color: green; }')),
|
| + createDOM('content')),
|
| + createDOM('div', {'class': 'hello', 'id': 'first-child'},
|
| + document.createTextNode('green')),
|
| + createDOM('div', {'class': 'hello', 'id': 'last-child'},
|
| + document.createTextNode('green'))));
|
| +
|
| +shouldBe('colorOf("#host > div.hello#first-child")', '"rgb(0, 128, 0)"');
|
| +shouldBe('colorOf("#host > div.hello#last-child")', '"rgb(0, 128, 0)"');
|
| +
|
| +cleanUp();
|
| +
|
| +// From content-pseudo-element-match-descendant.html
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style',
|
| + document.createTextNode('content /content/ div { color: red; }')),
|
| + createDOM('content')),
|
| + createDOM('p', {},
|
| + createDOM('div', {},
|
| + document.createTextNode('not red')))));
|
| +
|
| +shouldNotBe('colorOf("#host > p > div")', '"rgb(255, 0, 0)"');
|
| +cleanUp();
|
| +
|
| +// From content-pseudo-element-for-shadow-element.html
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('div', {'id': 'target'},
|
| + document.createTextNode('green'))),
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('shadow /content/ div { color: green; }')),
|
| + createDOM('shadow'))));
|
| +
|
| +shouldBe('colorOfNodeInTreeOfTrees("host/target")', '"rgb(0, 128, 0)"');
|
| +cleanUp();
|
| +
|
| +// From content-pseudo-element-with-any.html
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('* /content/ div { color: green; }')),
|
| + createDOM('div', {'id': 'div-in-shadow'},
|
| + document.createTextNode('normal')),
|
| + createDOM('content')),
|
| + createDOM('div', {},
|
| + document.createTextNode('green'))));
|
| +
|
| +shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"');
|
| +shouldNotBe('colorOfNodeInTreeOfTrees("host/div-in-shadow")', '"rgb(0, 128, 0)"');
|
| +cleanUp();
|
| +
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('content /content/ * { color: green; }')),
|
| + createDOM('div', {'id': 'div-in-shadow'},
|
| + document.createTextNode('normal')),
|
| + createDOM('content')),
|
| + createDOM('div', {},
|
| + document.createTextNode('green'))));
|
| +
|
| +shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"');
|
| +shouldNotBe('colorOfNodeInTreeOfTrees("host/div-in-shadow")', '"rgb(0, 128, 0)"');
|
| +cleanUp();
|
| +
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('* /content/ * { color: green; }')),
|
| + createDOM('div', {'id': 'div-in-shadow'},
|
| + document.createTextNode('normal')),
|
| + createDOM('content')),
|
| + createDOM('div', {},
|
| + document.createTextNode('green'))));
|
| +
|
| +shouldBe('colorOf("#host > div")', '"rgb(0, 128, 0)"');
|
| +shouldNotBe('colorOfNodeInTreeOfTrees("host/div-in-shadow")', '"rgb(0, 128, 0)"');
|
| +cleanUp();
|
| +
|
| +// from content-pseudo-element-overriden-2.html / crbug.com/274059
|
| +// Compare rules from a style in a shadow tree with ::content in a different shadow tree.');
|
| +sandbox.appendChild(
|
| + createDOM('div', {'id': 'host'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('content /content/ * { color: green; }')),
|
| + createDOM('content', {})),
|
| + createDOM('div', {'id': 'hostChild', 'class': 'contentClass'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode(':host { color: red; }')),
|
| + createDOM('span', {},
|
| + document.createTextNode('Hello'))))));
|
| +shouldBe('colorOfNodeInTreeOfTrees("hostChild")', '"rgb(0, 128, 0)"');
|
| +cleanUp();
|
| +
|
| +// from content-pseudo-element-overriden.html
|
| +// crbug.com/274059.
|
| +// Should be able to override ::content styles in shadow root style sheet from the document.
|
| +sandbox.appendChild(
|
| + createDOM('div', {},
|
| + createDOM('style', {},
|
| + document.createTextNode('.contentClass { color: green; }')),
|
| + createDOM('div', {'id': 'host', 'class': 'hostClass'},
|
| + createShadowRoot(
|
| + createDOM('style', {},
|
| + document.createTextNode('content /content/ * { color: red; }')),
|
| + createDOM('content')),
|
| + createDOM('div', {'class': 'contentClass'},
|
| + document.createTextNode('content')))));
|
| +shouldBe('colorOf(".contentClass")', '"rgb(0, 128, 0)"');
|
| +cleanUp();
|
| +</script>
|
| +</body>
|
| +</html>
|
|
|