| Index: LayoutTests/fast/dom/shadow/focus-with-dom-mutation.html
|
| diff --git a/LayoutTests/fast/dom/shadow/focus-with-dom-mutation.html b/LayoutTests/fast/dom/shadow/focus-with-dom-mutation.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..a0dc40c4f98100bdbd701c03639a5e81a58bdd86
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/dom/shadow/focus-with-dom-mutation.html
|
| @@ -0,0 +1,66 @@
|
| +<!DOCTYPE html>
|
| +<script src="../../../resources/js-test.js"></script>
|
| +<script src="resources/shadow-dom.js"></script>
|
| +<style>
|
| +div { background-color: white; }
|
| +div:focus { background-color: green; }
|
| +</style>
|
| +<body>
|
| +<div id="sandbox"></div>
|
| +</body>
|
| +<script>
|
| +description('Test if :focus matching state of shadow host is properly handled in case of DOM mutation.');
|
| +
|
| +function backgroundColorOf(selector) {
|
| + return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundColor;
|
| +}
|
| +
|
| +function backgroundColorShouldBe(selector, expected) {
|
| + shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);
|
| +}
|
| +
|
| +function buildTree(parent, delegatesFocus)
|
| +{
|
| + parent.innerHTML = '';
|
| + parent.appendChild(
|
| + createDOM('div', {id: 'host'},
|
| + createShadowRoot({delegatesFocus: delegatesFocus},
|
| + createDOM('input', {id: 'input'})),
|
| + createDOM('div', {id: 'dest'})));
|
| +
|
| + parent.offsetTop;
|
| +}
|
| +
|
| +var sandbox = document.getElementById('sandbox');
|
| +
|
| +debug('(1/2) DOM mutation across shadow boundary with delegatesFocus=false');
|
| +buildTree(sandbox, false);
|
| +var host = getNodeInTreeOfTrees('host');
|
| +var input = getNodeInTreeOfTrees('host/input');
|
| +var dest = getNodeInTreeOfTrees('dest');
|
| +
|
| +backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
|
| +input.focus();
|
| +backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
|
| +dest.appendChild(input);
|
| +backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
|
| +input.focus();
|
| +host.shadowRoot.appendChild(input);
|
| +backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
|
| +
|
| +debug('(2/2) DOM mutation across shadow boundary with delegatesFocus=true');
|
| +buildTree(sandbox, true);
|
| +var host = getNodeInTreeOfTrees('host');
|
| +var input = getNodeInTreeOfTrees('host/input');
|
| +var dest = getNodeInTreeOfTrees('dest');
|
| +
|
| +backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
|
| +input.focus();
|
| +backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
|
| +dest.appendChild(input);
|
| +backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
|
| +input.focus();
|
| +host.shadowRoot.appendChild(input);
|
| +// appendChild() will blur the focus from input element, thus input is no longer focused.
|
| +backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 1177673005:
Implement ShadowRoot.delegatesFocus 4/4 (match CSS :focus for shadow host) (Closed)
Base URL: svn://svn.chromium.org/blink/trunk