LayoutTests/fast/dom/shadow/tabstop-focus-highlight-sibling.html - Issue 1152623012: WIP: delegatesFocus

Side by Side Diff: LayoutTests/fast/dom/shadow/tabstop-focus-highlight-sibling.html

Issue 1152623012: WIP: delegatesFocus (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: 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

« no previous file with comments | « LayoutTests/fast/dom/shadow/focusable-elements-with-tabstop-expected.txt ('k') | LayoutTests/fast/dom/shadow/tabstop-focus-highlight-sibling-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

2 <script src="../../../resources/js-test.js"></script>

3 <script src="resources/shadow-dom.js"></script>

4 <!-- Adapted from http://jsbin.com/dexinu/6/edit for layout test -->

5

6 <template id="XMenuTemplate">

7 <style>

8 :host {

9 display: inline-block;

10 position: relative;

11 background-color: #aaa;

12 }

13 :host(:focus) {

14 background-color: #ccc;

15 }

16 li {

17 display: inline-block;

18 position: relative;

19 background-color: #eee;

20 }

21 li:focus {

22 background-color: #fff;

23 }

24 </style>

25 <li tabindex="0">Item One</li>

26 <li tabindex="0">Item Two</li>

27 <li tabindex="0">Item Three</li>

28 </template>

29

30 <section>

31 <x-menu id="XMenu1" tabindex="0"></x-menu>

32 </section>

33 <section>

34 <x-menu id="XMenu2" tabindex="0" tabstop="false"></x-menu>

35 <x-menu id="XMenu3" tabindex="0" tabstop="false"></x-menu>

36 </section>

37 <section>

38 <x-menu id="XMenu4" tabindex="0" tabstop="false"></x-menu>

39 </section>

40

41 <script>

42 function RegisterXMenu() {

43 var template = document.getElementById('XMenuTemplate');

44 var xMenuProto = Object.create(HTMLElement.prototype);

45 xMenuProto.createdCallback = function() {

46 this.createShadowRoot()

47 .appendChild(

48 document.importNode(template.content, true)

49 );

50 };

51 document.registerElement('x-menu', {

52 prototype: xMenuProto

53 });

54 }

55

56 function backgroundColorOf(selector) {

57 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol or;

58 }

59

60 function backgroundColorShouldBe(selector, expected) {

61 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);

62 }

63

64 function test() {

65 debug("crbug/474687 :focus style should properly be applied to shadow hosts. ");

66

67 if (window.testRunner)

68 testRunner.dumpAsText();

69

70 var xmenu1 = document.getElementById("XMenu1");

71 xmenu1.focus();

72 navigateFocusForward();

73 navigateFocusForward();

74 navigateFocusForward();

75 shouldBeEqualToString('document.activeElement.id', 'XMenu1');

76 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

77 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

78 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

79 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

80

81 navigateFocusForward();

82 navigateFocusForward();

83 navigateFocusForward();

84 shouldBeEqualToString('document.activeElement.id', 'XMenu2');

85 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

86 backgroundColorShouldBe('XMenu2', 'rgb(204, 204, 204)');

87 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

88 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

89

90 navigateFocusForward();

91 navigateFocusForward();

92 navigateFocusForward();

93 shouldBeEqualToString('document.activeElement.id', 'XMenu3');

94 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

95 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

96 backgroundColorShouldBe('XMenu3', 'rgb(204, 204, 204)');

97 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

98

99 navigateFocusForward();

100 navigateFocusForward();

101 navigateFocusForward();

102 shouldBeEqualToString('document.activeElement.id', 'XMenu4');

103 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

104 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

105 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

106 backgroundColorShouldBe('XMenu4', 'rgb(204, 204, 204)');

107

108 navigateFocusBackward();

109 navigateFocusBackward();

110 navigateFocusBackward();

111 shouldBeEqualToString('document.activeElement.id', 'XMenu3');

112 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

113 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

114 backgroundColorShouldBe('XMenu3', 'rgb(204, 204, 204)');

115 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

116

117 navigateFocusBackward();

118 navigateFocusBackward();

119 navigateFocusBackward();

120 shouldBeEqualToString('document.activeElement.id', 'XMenu2');

121 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

122 backgroundColorShouldBe('XMenu2', 'rgb(204, 204, 204)');

123 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

124 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

125

126 navigateFocusBackward();

127 navigateFocusBackward();

128 navigateFocusBackward();

129 shouldBeEqualToString('document.activeElement.id', 'XMenu1');

130 backgroundColorShouldBe('XMenu1', 'rgb(170, 170, 170)');

131 backgroundColorShouldBe('XMenu2', 'rgb(170, 170, 170)');

132 backgroundColorShouldBe('XMenu3', 'rgb(170, 170, 170)');

133 backgroundColorShouldBe('XMenu4', 'rgb(170, 170, 170)');

134 }

135

136 RegisterXMenu();

137 test();

138 </script>

OLD	NEW