Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(106)

Side by Side Diff: LayoutTests/fast/dom/shadow/focus-with-dom-mutation.html

Issue 1177673005: Implement ShadowRoot.delegatesFocus 4/4 (match CSS :focus for shadow host) (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: fix for comments Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <script src="../../../resources/js-test.js"></script>
3 <script src="resources/shadow-dom.js"></script>
4 <style>
5 div { background-color: white; }
6 div:focus { background-color: green; }
7 </style>
8 <body>
9 <div id="sandbox"></div>
10 </body>
11 <script>
12 description('Test if :focus matching state of shadow host is properly handled in case of DOM mutation.');
13
14 function backgroundColorOf(selector) {
15 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol or;
16 }
17
18 function backgroundColorShouldBe(selector, expected) {
19 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);
20 }
21
22 function buildTree(parent, delegatesFocus)
23 {
24 parent.innerHTML = '';
25 parent.appendChild(
26 createDOM('div', {id: 'host'},
27 createShadowRoot({delegatesFocus: delegatesFocus},
28 createDOM('input', {id: 'input'})),
29 createDOM('div', {id: 'dest'})));
30
31 parent.offsetTop;
32 }
33
34 var sandbox = document.getElementById('sandbox');
35
36 debug('(1/2) DOM mutation across shadow boundary with delegatesFocus=false');
37 buildTree(sandbox, false);
38 var host = getNodeInTreeOfTrees('host');
39 var input = getNodeInTreeOfTrees('host/input');
40 var dest = getNodeInTreeOfTrees('dest');
41
42 backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
43 input.focus();
44 backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
45 dest.appendChild(input);
46 backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
47 input.focus();
48 host.shadowRoot.appendChild(input);
49 backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
50
51 debug('(2/2) DOM mutation across shadow boundary with delegatesFocus=true');
52 buildTree(sandbox, true);
53 var host = getNodeInTreeOfTrees('host');
54 var input = getNodeInTreeOfTrees('host/input');
55 var dest = getNodeInTreeOfTrees('dest');
56
57 backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
58 input.focus();
59 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
60 dest.appendChild(input);
61 backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
62 input.focus();
63 host.shadowRoot.appendChild(input);
64 // appendChild() will blur the focus from input element, thus input is no longer focused.
65 backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
66 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698