third_party/WebKit/LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling.html - Issue 1774113002: Move Shadow DOM V1 tests from fast/dom/shadow to shadow-dom

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/shadow/delegatesFocus-highlight-sibling.html

Issue 1774113002: Move Shadow DOM V1 tests from fast/dom/shadow to shadow-dom (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: . Created 4 years, 9 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/fast/dom/shadow/css-focus-pseudo-match-shadow-host5-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/delegatesFocus-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" delegatesFocus></x-menu>

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

36 </section>

37 <section>

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

39 </section>

40

41 <script>

42 function RegisterXMenu() {

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

44

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

46 xMenuProto.createdCallback = function() {

47 var delegatesFocus = this.hasAttribute('delegatesFocus');

48 this.attachShadow({ 'mode': 'open', 'delegatesFocus': delegatesFocus })

49 .appendChild(

50 document.importNode(template.content, true)

51 );

52 };

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

54 prototype: xMenuProto

55 });

56 }

57

58 function test() {

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

60

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

62 xmenu1.focus();

63 navigateFocusForward();

64 navigateFocusForward();

65 navigateFocusForward();

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

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

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

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

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

71

72 navigateFocusForward();

73 navigateFocusForward();

74 navigateFocusForward();

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

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

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

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', 'XMenu3');

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

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

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

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

89

90 navigateFocusForward();

91 navigateFocusForward();

92 navigateFocusForward();

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

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

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

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

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

98

99 navigateFocusBackward();

100 navigateFocusBackward();

101 navigateFocusBackward();

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

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

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

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

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

107

108 navigateFocusBackward();

109 navigateFocusBackward();

110 navigateFocusBackward();

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

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

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

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

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

116

117 navigateFocusBackward();

118 navigateFocusBackward();

119 navigateFocusBackward();

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

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

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

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

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

125 }

126

127 RegisterXMenu();

128 test();

129 </script>

OLD	NEW