| Index: LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host1.html
|
| diff --git a/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host1.html b/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host1.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..32e6fa867d5d7a605d10389865bfbefa5379d7f9
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host1.html
|
| @@ -0,0 +1,91 @@
|
| +<!DOCTYPE html>
|
| +<script src="../../../resources/js-test.js"></script>
|
| +<script src="resources/shadow-dom.js"></script>
|
| +<style>
|
| +div {
|
| + background-color: white;
|
| +}
|
| +
|
| +div#shadow-host:focus {
|
| + background-color: green;
|
| +}
|
| +</style>
|
| +<body>
|
| +<div id="sandbox"></div>
|
| +</body>
|
| +<script>
|
| +function backgroundColorOf(selector) {
|
| + return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundColor;
|
| +}
|
| +
|
| +function backgroundColorShouldBe(selector, expected) {
|
| + shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);
|
| +}
|
| +
|
| +function testWithoutDelegatesFocus()
|
| +{
|
| + debug(':focus and shadow host without delegatesFocus for crbug/479050');
|
| +
|
| + // Setting up the DOM tree
|
| + var sandbox = document.querySelector('#sandbox');
|
| + sandbox.innerHTML = '';
|
| + sandbox.appendChild(
|
| + createDOM('div', {},
|
| + createDOM('input', {'id': 'outer-input1'}),
|
| + createDOM('div', {'id': 'shadow-host'},
|
| + createDOM('input', {'id': 'lightdom-input'}),
|
| + createShadowRoot(
|
| + createDOM('content'),
|
| + createDOM('input', {'id': 'inner-input'}))),
|
| + createDOM('input', {'id': 'outer-input2'})));
|
| + sandbox.offsetTop;
|
| +
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| +
|
| + var host = getNodeInTreeOfTrees('shadow-host');
|
| + var innerInput = getNodeInTreeOfTrees('shadow-host/inner-input');
|
| + var lightdomInput = getNodeInTreeOfTrees('lightdom-input');
|
| + var outerInput1 = getNodeInTreeOfTrees('outer-input1');
|
| + var outerInput2 = getNodeInTreeOfTrees('outer-input2');
|
| +
|
| + debug('Test shadow host without tabindex');
|
| + outerInput1.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + outerInput2.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + innerInput.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + lightdomInput.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + host.focus(); // host will not get focus as it is not focusable.
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| +
|
| + debug('Test shadow host with tabindex=-1');
|
| + host.tabIndex = -1;
|
| + outerInput1.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + outerInput2.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + innerInput.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + lightdomInput.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + host.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
|
| +
|
| + debug('Test shadow host without tabindex=0');
|
| + host.tabIndex = 0;
|
| + outerInput1.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + outerInput2.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + innerInput.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + lightdomInput.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
|
| + host.focus();
|
| + backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
|
| +}
|
| +
|
| +testWithoutDelegatesFocus();
|
| +</script>
|
|
|