Chromium Code Reviews 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| 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..61bf1abcac137958f287b368b3276c4cf00514fa |
| --- /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'})), |
|
hayato
2015/06/12 07:59:29
Nit: space is required after ':'.
kochi
2015/06/12 08:21:35
Done.
|
| + 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> |
