LayoutTests/fast/dom/shadow/tabstop-focus-highlight-sibling.html - Issue 1144953007: Remove tabStop feature

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

Issue 1144953007: Remove tabStop feature (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: rebase 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 var xmenu1 = document.getElementById("XMenu1");

68 xmenu1.focus();

69 navigateFocusForward();

70 navigateFocusForward();

71 navigateFocusForward();

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

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

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

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

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

77

78 navigateFocusForward();

79 navigateFocusForward();

80 navigateFocusForward();

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

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

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

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

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

86

87 navigateFocusForward();

88 navigateFocusForward();

89 navigateFocusForward();

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

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

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

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

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

95

96 navigateFocusForward();

97 navigateFocusForward();

98 navigateFocusForward();

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

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

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

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

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

104

105 navigateFocusBackward();

106 navigateFocusBackward();

107 navigateFocusBackward();

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

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

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

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

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

113

114 navigateFocusBackward();

115 navigateFocusBackward();

116 navigateFocusBackward();

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

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

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

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

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

122

123 navigateFocusBackward();

124 navigateFocusBackward();

125 navigateFocusBackward();

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

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

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

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

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

131 }

132

133 RegisterXMenu();

134 test();

135 </script>

OLD	NEW