LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html - Issue 214693002: Remove most of scoped styles.

Side by Side Diff: LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html

Issue 214693002: Remove most of scoped styles. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Really remove it Created 6 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 | Annotate | Revision Log

« no previous file with comments | « LayoutTests/fast/css/style-scoped/registering-shadowroot-expected.txt ('k') | LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles-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 <html>

3 <head>

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

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

6 <script>

7 shouldBeDefined("window.internals");

8

9 var borderColor;

10

11 function borderColorShouldBe(node, color)

12 {

13 borderColor = document.defaultView.getComputedStyle(node, null).getPropertyV alue('border-color');

14 shouldBeEqualToString('borderColor', color);

15 }

16

17 function cleanUp()

18 {

19 document.getElementById('sandbox').innerHTML = '';

20 }

21

22 function testBasic()

23 {

24 debug('test a scoped style in document is applied to a node in shadow dom su btree when apply-author-styles is true.');

25 document.getElementById('sandbox').appendChild(

26 createDOM('div', {},

27 createDOM('style', {'scoped': 'scoped'},

28 document.createTextNode('div { border: 1px solid red; }')),

29 createDOM('div', {'id': 'host'},

30 createShadowRoot(

31 createDOM('div', {'id': 'target'})))));

32

33 // before

34 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;

35 borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(0, 0, 0)');

36

37 // after

38 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;

39 borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(255, 0, 0)');

40

41 cleanUp();

42 }

43

44 function testEnclosingShadow()

45 {

46 debug('test a style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true.');

47 document.getElementById('sandbox').appendChild(

48 createDOM('div', {'id': 'host'},

49 createShadowRoot(

50 createDOM('style', {},

51 document.createTextNode('div { border: 1px solid red; }')),

52 createDOM('div', {'id': 'enclosed'},

53 createShadowRoot(

54 createDOM('div', {'id': 'target'}))))));

55

56 // before

57 getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = false;

58 borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(0, 0, 0)');

59

60 // after

61 getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = true;

62 borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(255, 0, 0)');

63

64 cleanUp();

65 }

66

67 function testEnclosingShadowWithScoped()

68 {

69 debug('test a scoped style in an enclosing shadow dom tree is applied to a n ode in shadow subtree when apply-author-styles is true and the node is in the sc ope.');

70 document.getElementById('sandbox').appendChild(

71 createDOM('div', {'id': 'host'},

72 createShadowRoot(

73 createDOM('div', {},

74 createDOM('style', {'scoped': 'scoped'},

75 document.createTextNode('div { border: 1px solid red; }' )),

76 createDOM('div', {'id': 'outerInScope'},

77 createShadowRoot(

78 createDOM('div', {'id': 'targetInScope'})))),

79 createDOM('div', {'id': 'outerOutOfScope'},

80 createShadowRoot(

81 createDOM('div', {'id': 'targetOutOfScope'}))))));

82

83

84 // before

85 getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = false;

86 getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = false;

87

88 borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(0, 0, 0)');

89 borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfSc ope'), 'rgb(0, 0, 0)');

90

91 // after

92 getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = true;

93 getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = true;

94 borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(255, 0, 0)');

95 borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfSc ope'), 'rgb(0, 0, 0)');

96

97 cleanUp();

98 }

99

100 function testNestedShadow()

101 {

102 debug('test styles declared in enclosing shadow trees should be applied to a n enclosed shadow tree whose apply-atur-styles is true.');

103 document.getElementById('sandbox').appendChild(

104 createDOM('div',

105 createDOM('style', {'scoped': 'scoped'},

106 document.createTextNode('div { border: 1px solid red; }')),

107 createDOM('div', {'id': 'host'},

108 createShadowRoot(

109 createDOM('style', {},

110 document.createTextNode('div { border: 1px solid blue; } ')),

111 createDOM('div', {'id': 'outerMost'},

112 createShadowRoot(

113 createDOM('div', {'id': 'outer'},

114 createShadowRoot(

115 createDOM('div', {'id': 'target'})))))))));

116

117 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;

118 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = false;

119 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = false;

120

121 // No styles should be applied.

122 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(0, 0, 0)');

123

124 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;

125 // A style in document should be applied.

126 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(0, 0, 255)');

127

128 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;

129 // Not depend on apply-author-styles flags of parent shadow trees.

130 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(0, 0, 255)');

131

132 cleanUp();

133 }

134

135 function testMultipleShadow()

136 {

137 debug('test a style in document is applied to nodes in multiple shadow subtr ees when apply-author-styles is true.');

138 document.getElementById('sandbox').appendChild(

139 createDOM('div', {'id': 'host'},

140 createShadowRoot(

141 createDOM('shadow', {}),

142 createDOM('div', {'id': 'oldestShadow'})),

143 createShadowRoot(

144 createDOM('style', {'scoped': 'scoped'},

145 document.createTextNode('div { border: 1px solid blue }')),

146 createDOM('shadow', {}),

147 createDOM('div', {'id': 'olderShadow'})),

148 createShadowRoot(

149 createDOM('shadow', {}),

150 createDOM('div', {'id': 'target'})),

151

152 createDOM('style', {'scoped': 'scoped'},

153 document.createTextNode('div { border: 1px solid red; }')),

154 createDOM('div', {})));

155

156 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;

157 getNodeInTreeOfTrees('host//').applyAuthorStyles = false;

158 getNodeInTreeOfTrees('host///').applyAuthorStyles = false;

159

160 // before

161 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0) ');

162 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 25 5)');

163 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');

164

165 // document ---+--- oldestShadow

166 // \|

167 // +--- olderShadow

168 // \|

169 // +--- shadow

170

171 // apply-author-styles affects between shadow and document.

172 getNodeInTreeOfTrees('host///').applyAuthorStyles = true;

173 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0) ');

174 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 25 5)');

175 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(255, 0, 0)') ;

176

177 // apply-author-styles affects between older shadow and document.

178 getNodeInTreeOfTrees('host///').applyAuthorStyles = false;

179 getNodeInTreeOfTrees('host//').applyAuthorStyles = true;

180 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0) ');

181 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 25 5)');

182 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');

183

184 // apply-author-styles affects between oldest shadow and document.

185 getNodeInTreeOfTrees('host//').applyAuthorStyles = false;

186 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;

187 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(255, 0, 0)');

188 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 25 5)');

189 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');

190

191 cleanUp();

192 }

193

194 function testOrderOfApplyStyle()

195 {

196 debug('test a style is applied in document order.');

197

198 document.getElementById('sandbox').appendChild(

199 createDOM('div', {},

200 createDOM('style', {'scoped': 'scoped'},

201 document.createTextNode('div { border: 1px solid red }')),

202 createDOM('div', {'id': 'host'},

203 createShadowRoot(

204 createDOM('style', {},

205 document.createTextNode('div { border: 1px solid blue; } ')),

206 createDOM('div', {'id': 'outerMost'},

207 createShadowRoot(

208 createDOM('style', {},

209 document.createTextNode('div { border: 1px solid green; }')),

210 createDOM('div', {'id': 'outer'},

211 createShadowRoot(

212 createDOM('style', {},

213 document.createTextNode('div { border: 1 px solid yellow; }')),

214 createDOM('div', {'id': 'target'})))))))));

215

216 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;

217 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;

218 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;

219

220 // The last scoped style should be applied.

221 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(255, 255, 0)');

222

223 getNodeInTreeOfTrees('host/outerMost/outer/').innerHTML = '<div id="target"> target</div>';

224 // The outer's scoped style should be applied.

225 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rg b(0, 128, 0)');

226

227 cleanUp();

228 }

229

230 function runTests() {

231 testBasic();

232 testEnclosingShadow();

233 testEnclosingShadowWithScoped();

234 testNestedShadow();

235 testMultipleShadow();

236 testOrderOfApplyStyle();

237 }

238 </script>

239 </head>

240 <body onload="runTests()">

241 <div id='sandbox'></div>

242 </body>

243 </html>

OLD	NEW