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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/shadow-dom/focus-slide-on-shadow-host.html

Issue 2333623003: Convert remaining focus tests in shadow-dom to use testharness.js (Closed)
Patch Set: Created 4 years, 3 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
« no previous file with comments | « third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none-expected.txt ('k') | third_party/WebKit/LayoutTests/shadow-dom/focus-slide-on-shadow-host-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="../resources/js-test.js"></script> 2 <script src='../resources/testharness.js'></script>
3 <script src="../fast/dom/shadow/resources/shadow-dom.js"></script> 3 <script src='../resources/testharnessreport.js'></script>
4 <body> 4 <script src='resources/shadow-dom.js'></script>
5 <pre id="console"></pre> 5 <script src='resources/focus-utils.js'></script>
6 <input id="defaultFocus"> 6 <input id='defaultFocus'>
7 <div id="sandbox"></div> 7 <div id='sandbox'></div>
8 </body>
9 <script> 8 <script>
10 description('Click inside focusable shadow host should focus the host.'); 9 'use strict';
11 10
12 function prepareDOMTree(parent, delegatesFocus) 11 function prepareDOMTree(parent, delegatesFocus)
13 { 12 {
14 parent.innerHTML = ''; 13 parent.innerHTML = '';
15 14 let host = document.createElement('div');
16 parent.appendChild( 15 host.id = 'shadowHost';
17 createDOM('div', {'id': 'shadowHost', 'tabindex': '0'}, 16 host.setAttribute('tabindex', '0');
18 attachShadow({'mode': 'open', 'delegatesFocus': delegatesFocus}, 17 var root = host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus}) ;
19 createDOM('div', {'id': 'innerDiv'}, 18 root.innerHTML = '<div id="innerDiv">Blink</div><input id="inputA"><input id ="inputB">';
20 document.createTextNode('Blink')), 19 parent.appendChild(host);
21 createDOM('input', {'id': 'inputA'}),
22 createDOM('input', {'id': 'inputB'}))));
23
24 } 20 }
25 21
26 var host; 22 var host;
27 var innerDiv; 23 var innerDiv;
28 var inputA; 24 var inputA;
29 var inputB; 25 var inputB;
30 26
31 function clickOn(el) { 27 function clickOn(el) {
32 eventSender.mouseMoveTo(el.offsetLeft + 8, el.offsetTop + 8); 28 eventSender.mouseMoveTo(el.offsetLeft + 8, el.offsetTop + 8);
33 eventSender.mouseDown(); 29 eventSender.mouseDown();
34 eventSender.mouseUp(); 30 eventSender.mouseUp();
35 } 31 }
36 32
37 function resetFocus() { 33 function resetFocus() {
38 document.querySelector('#defaultFocus').focus(); 34 document.querySelector('#defaultFocus').focus();
39 } 35 }
40 36
41 function checkInnermostActiveElement(id) { 37 function assert_innermost_active_element(path) {
42 if (isInnermostActiveElement(id)) 38 assert_true(isInnermostActiveElement(path), 'innermost active element should be ' + path);
43 debug('PASS innermost active element is ' + id);
44 } 39 }
45 40
46 function runTest() { 41 test(() => {
47 var sandbox = document.querySelector('#sandbox');
48 prepareDOMTree(sandbox, false); 42 prepareDOMTree(sandbox, false);
49 resetFocus(); 43 resetFocus();
50 44
51 host = getNodeInComposedTree('shadowHost'); 45 let host = getNodeInComposedTree('shadowHost');
52 innerDiv = getNodeInComposedTree('shadowHost/innerDiv'); 46 let innerDiv = getNodeInComposedTree('shadowHost/innerDiv');
53 inputA = getNodeInComposedTree('shadowHost/inputA'); 47 let inputA = getNodeInComposedTree('shadowHost/inputA');
54 inputB = getNodeInComposedTree('shadowHost/inputB'); 48 let inputB = getNodeInComposedTree('shadowHost/inputB');
55 49
56 debug('click on inner div should focus shadow host');
57 clickOn(innerDiv); 50 clickOn(innerDiv);
58 checkInnermostActiveElement('shadowHost'); 51 assert_innermost_active_element('shadowHost');
59 52
60 inputA.focus(); 53 inputA.focus();
61 checkInnermostActiveElement('shadowHost/inputA'); 54 assert_innermost_active_element('shadowHost/inputA');
62 clickOn(innerDiv); 55 clickOn(innerDiv);
63 checkInnermostActiveElement('shadowHost'); 56 assert_innermost_active_element('shadowHost');
64 57
65 inputB.focus(); 58 inputB.focus();
59 assert_innermost_active_element('shadowHost/inputB');
66 clickOn(innerDiv); 60 clickOn(innerDiv);
67 checkInnermostActiveElement('shadowHost'); 61 assert_innermost_active_element('shadowHost');
62 }, 'click on inner div should focus shadow host (with delegatesFocus = false).') ;
68 63
69 debug('click on inner div should focus inner focusable (with delegatesFocus = true)'); 64 test(() => {
70 prepareDOMTree(sandbox, true); 65 prepareDOMTree(sandbox, true);
71 resetFocus(); 66 resetFocus();
72 67
73 host = getNodeInComposedTree('shadowHost'); 68 let host = getNodeInComposedTree('shadowHost');
74 innerDiv = getNodeInComposedTree('shadowHost/innerDiv'); 69 let innerDiv = getNodeInComposedTree('shadowHost/innerDiv');
75 inputA = getNodeInComposedTree('shadowHost/inputA'); 70 let inputA = getNodeInComposedTree('shadowHost/inputA');
76 inputB = getNodeInComposedTree('shadowHost/inputB'); 71 let inputB = getNodeInComposedTree('shadowHost/inputB');
77 72
78 inputA.value = 'wonderful'; // len = 9 73 inputA.value = 'wonderful'; // len = 9
79 inputB.value = 'beautiful'; 74 inputB.value = 'beautiful';
80 75
81 clickOn(innerDiv); 76 clickOn(innerDiv);
82 checkInnermostActiveElement('shadowHost/inputA'); 77 assert_innermost_active_element('shadowHost/inputA');
83 78
84 // If focus slides from shadow host, all the content will be selected. 79 // If focus slides from shadow host, all the content will be selected.
85 shouldBe('inputA.selectionStart', '0'); 80 assert_equals(inputA.selectionStart, 0);
86 shouldBe('inputA.selectionEnd', '9'); 81 assert_equals(inputA.selectionEnd, 9);
87 82
88 // Clicking on non-focusable area inside shadow should not change the focus state. 83 // Clicking on non-focusable area inside shadow should not change the focus state.
89 clickOn(innerDiv); 84 clickOn(innerDiv);
90 checkInnermostActiveElement('shadowHost/inputA'); 85 assert_innermost_active_element('shadowHost/inputA');
91 shouldBe('inputA.selectionStart', '0'); 86 assert_equals(inputA.selectionStart, 0);
92 shouldBe('inputA.selectionEnd', '9'); 87 assert_equals(inputA.selectionEnd, 9);
93 88
94 // Clicking on focusable directly will cause the element to be focused. 89 // Clicking on focusable directly will cause the element to be focused.
95 clickOn(inputA); 90 clickOn(inputA);
96 checkInnermostActiveElement('shadowHost/inputA'); 91 assert_innermost_active_element('shadowHost/inputA');
97 clickOn(innerDiv); 92 clickOn(innerDiv);
98 checkInnermostActiveElement('shadowHost/inputA'); 93 assert_innermost_active_element('shadowHost/inputA');
99 shouldBe('inputA.selectionStart', '1'); 94 assert_equals(inputA.selectionStart, 1);
100 shouldBe('inputA.selectionEnd', '1'); 95 assert_equals(inputA.selectionEnd, 1);
101 96
102 clickOn(inputB); 97 clickOn(inputB);
103 checkInnermostActiveElement('shadowHost/inputB'); 98 assert_innermost_active_element('shadowHost/inputB');
104 clickOn(innerDiv); 99 clickOn(innerDiv);
105 checkInnermostActiveElement('shadowHost/inputB'); 100 assert_innermost_active_element('shadowHost/inputB');
106 shouldBe('inputB.selectionStart', '1'); 101 assert_equals(inputB.selectionStart, 1);
107 shouldBe('inputB.selectionEnd', '1'); 102 assert_equals(inputB.selectionEnd, 1);
108 } 103 }, 'click on inner div should focus inner focusable (with delegatesFocus = true) .');
109
110 runTest();
111 </script> 104 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none-expected.txt ('k') | third_party/WebKit/LayoutTests/shadow-dom/focus-slide-on-shadow-host-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698