LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles.html - Issue 16194002: Make ScopedStyleResolver use apply-author-styles of a given element's treescope.

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

Issue 16194002: Make ScopedStyleResolver use apply-author-styles of a given element's treescope. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Rewrite layout test Created 7 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

OLD	NEW
1 <!DOCTYPE html>	1 <!doctype html>

2 <html>	2 <html>

3 <head>	3 <head>

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

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

5 <script>	6 <script>

6 if (window.testRunner)

7 testRunner.dumpAsText();

8

9 shouldBeDefined("window.internals");	7 shouldBeDefined("window.internals");

10	8

11 function dumpComputedStyle(node)	9 var borderColor;

	10

	11 function borderColorShouldBe(node, color)

12 {	12 {

13 debug(node.id + ": " + document.defaultView.getComputedStyle(node, null).get PropertyValue('border-color'));	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 = '';

14 }	20 }

15	21

16 function testBasic()	22 function testBasic()

17 {	23 {

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

19 var div = document.createElement('div');	25 document.getElementById('sandbox').appendChild(

20 div.innerHTML = '<div><style scoped>div { border: 1px solid red; }</style><d iv id="host"></div></div>';	26 createDOM('div', {},

21 document.body.appendChild(div);	27 createDOM('style', {'scoped': 'scoped'},

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

23 var shadow = document.getElementById("host").webkitCreateShadowRoot();	29 createDOM('div', {'id': 'host'},

24 shadow.innerHTML = '<div id="target">target</div>';	30 createShadowRoot(

25 document.body.appendChild(div);	31 createDOM('div', {'id': 'target'})))));

26	32

27 // before	33 // before

28 shadow.applyAuthorStyles = false;	34 getNodeInShadowTreeStack('host/').applyAuthorStyles = false;

29 dumpComputedStyle(shadow.getElementById("target"));	35 borderColorShouldBe(getNodeInShadowTreeStack('host/target'), 'rgb(0, 0, 0)') ;

30	36

31 // after	37 // after

32 shadow.applyAuthorStyles = true;	38 getNodeInShadowTreeStack('host/').applyAuthorStyles = true;

33 dumpComputedStyle(shadow.getElementById("target"));	39 borderColorShouldBe(getNodeInShadowTreeStack('host/target'), 'rgb(255, 0, 0) ');

34	40

35 document.body.removeChild(div);	41 cleanUp();

36 }	42 }

37	43

38 function testEnclosingShadow()	44 function testEnclosingShadow()

39 {	45 {

40 debug('test a style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true.');	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.');

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

42 var div = document.createElement('div');	48 createDOM('div', {'id': 'host'},

43 document.body.appendChild(div);	49 createShadowRoot(

44	50 createDOM('style', {},

45 var outerShadow = div.webkitCreateShadowRoot();	51 document.createTextNode('div { border: 1px solid red; }')),

46 outerShadow.innerHTML = '<style>div { border: 1px solid red; }</style><div i d="outer">outer</div>';	52 createDOM('div', {'id': 'enclosed'},

47 var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot();	53 createShadowRoot(

48 shadow.innerHTML = '<div id="target">target</div>';	54 createDOM('div', {'id': 'target'}))))));

49	55

50 // before	56 // before

51 shadow.applyAuthorStyles = false;	57 getNodeInShadowTreeStack('host/enclosed/').applyAuthorStyles = false;

52 dumpComputedStyle(shadow.getElementById("target"));	58 borderColorShouldBe(getNodeInShadowTreeStack('host/enclosed/target'), 'rgb(0 , 0, 0)');

53	59

54 // after	60 // after

55 shadow.applyAuthorStyles = true;	61 getNodeInShadowTreeStack('host/enclosed/').applyAuthorStyles = true;

56 dumpComputedStyle(shadow.getElementById("target"));	62 borderColorShouldBe(getNodeInShadowTreeStack('host/enclosed/target'), 'rgb(2 55, 0, 0)');

57 document.body.removeChild(div);	63

	64 cleanUp();

58 }	65 }

59	66

60 function testEnclosingShadowWithScoped()	67 function testEnclosingShadowWithScoped()

61 {	68 {

62 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.');	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'}))))));

63	82

64 var div = document.createElement('div');

65 document.body.appendChild(div);

66

67 var outerShadow = div.webkitCreateShadowRoot();

68 outerShadow.innerHTML = '<div><style scoped>div { border: 1px solid red; }</ style><div id="outerInScope">outerInScope</div></div><div id="outerOutOfScope">o uterOutOfScope</div>';

69

70 var shadow1 = outerShadow.getElementById("outerInScope").webkitCreateShadowR oot();

71 shadow1.innerHTML = '<div id="targetInScope">targetInScope</div>';

72 var shadow2 = outerShadow.getElementById("outerOutOfScope").webkitCreateShad owRoot();

73 shadow2.innerHTML = '<div id="targetOutOfScope">targetOutOfScope</div>';

74	83

75 // before	84 // before

76 shadow1.applyAuthorStyles = false;	85 getNodeInShadowTreeStack('host/outerInScope/').applyAuthorStyles = false;

77 shadow2.applyAuthorStyles = false;	86 getNodeInShadowTreeStack('host/outerOutOfScope/').applyAuthorStyles = false;

78 dumpComputedStyle(shadow1.getElementById("targetInScope"));	87

79 dumpComputedStyle(shadow2.getElementById("targetOutOfScope"));	88 borderColorShouldBe(getNodeInShadowTreeStack('host/outerInScope/targetInScop e'), 'rgb(0, 0, 0)');

	89 borderColorShouldBe(getNodeInShadowTreeStack('host/outerOutOfScope/targetOut OfScope'), 'rgb(0, 0, 0)');

80	90

81 // after	91 // after

82 shadow1.applyAuthorStyles = true;	92 getNodeInShadowTreeStack('host/outerInScope/').applyAuthorStyles = true;

83 shadow2.applyAuthorStyles = true;	93 getNodeInShadowTreeStack('host/outerOutOfScope/').applyAuthorStyles = true;

84 dumpComputedStyle(shadow1.getElementById("targetInScope"));	94 borderColorShouldBe(getNodeInShadowTreeStack('host/outerInScope/targetInScop e'), 'rgb(255, 0, 0)');

85 dumpComputedStyle(shadow2.getElementById("targetOutOfScope"));	95 borderColorShouldBe(getNodeInShadowTreeStack('host/outerOutOfScope/targetOut OfScope'), 'rgb(0, 0, 0)');

86	96

87 document.body.removeChild(div);	97 cleanUp();

88 }	98 }

89	99

90 function testNestedShadow()	100 function testNestedShadow()

91 {	101 {

92 debug('test a style in a shadow subtree is applied to a node in its descenda nt shadow subtree when all apply-author-styles in shadow subtrees between the sh adow subtree and the descendant are true.');	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'})))))))));

93	116

94 var div = document.createElement('div');	117 getNodeInShadowTreeStack('host/').applyAuthorStyles = false;

95 div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div id= "host"></div>';	118 getNodeInShadowTreeStack('host/outerMost/').applyAuthorStyles = false;

96 document.body.appendChild(div);	119 getNodeInShadowTreeStack('host/outerMost/outer/').applyAuthorStyles = false;

97

98 var outerMostShadow = document.getElementById("host").webkitCreateShadowRoot ();

99 outerMostShadow.innerHTML = '<style>div { border: 1px solid blue; }</style>< div id="outerMost">outerMost</div>';

100 outerMostShadow.applyAuthorStyles = false;

101

102 var outerShadow = outerMostShadow.getElementById("outerMost").webkitCreateSh adowRoot();

103 outerShadow.innerHTML = '<div id="outer">outer</div>';

104 outerShadow.applyAuthorStyles = false;

105

106 var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot();

107 shadow.innerHTML = '<div id="target">target</div>';

108 shadow.applyAuthorStyles = false;

109	120

110 // No styles should be applied.	121 // No styles should be applied.

111 dumpComputedStyle(shadow.getElementById("target"));	122 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'), 'rgb(0, 0, 0)');

112	123

113 shadow.applyAuthorStyles = true;	124 getNodeInShadowTreeStack('host/outerMost/outer/').applyAuthorStyles = true;

114 // A style in document should be applied.	125 // A style in document should be applied.

115 dumpComputedStyle(shadow.getElementById("target"));	126 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'), 'rgb(0, 0, 255)');

116	127

117 outerShadow.applyAuthorStyles = true	128 getNodeInShadowTreeStack('host/outerMost/').applyAuthorStyles = true;

118 // A style in 'outerMost' shadow should be applied.	129 // Not depend on apply-author-styles flags of parent shadow trees.

119 dumpComputedStyle(shadow.getElementById("target"));	130 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'), 'rgb(0, 0, 255)');

120	131

121 document.body.removeChild(div);	132 cleanUp();

122 }	133 }

123	134

124 function testMultipleShadow()	135 function testMultipleShadow()

125 {	136 {

126 debug('test a style in document is applied to nodes in multiple shadow subtr ees when apply-author-styles is true.');	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'})),

127	151

128 var div = document.createElement('div');	152 createDOM('style', {'scoped': 'scoped'},

129 div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div>tes t</div>';	153 document.createTextNode('div { border: 1px solid red; }')),

130 document.body.appendChild(div);	154 createDOM('div', {})));

131	155

132 var oldestShadow = div.webkitCreateShadowRoot();	156 getNodeInShadowTreeStack('host/').applyAuthorStyles = false;

133 oldestShadow.innerHTML = '<shadow></shadow><div id="oldestShadow">oldestShad ow</div>';	157 getNodeInShadowTreeStack('host//').applyAuthorStyles = false;

134 oldestShadow.applyAuthorStyles = false;	158 getNodeInShadowTreeStack('host///').applyAuthorStyles = false;

135

136 var olderShadow = div.webkitCreateShadowRoot();

137 olderShadow.innerHTML = '<style scoped>div { border: 1px solid blue }</style ><shadow></shadow><div id="olderShadow">olderShadow</div>';

138 olderShadow.applyAuthorStyles = false;

139

140 var shadow = div.webkitCreateShadowRoot();

141 shadow.innerHTML = '<shadow></shadow><div id="target">shadow</div>';

142 shadow.applyAuthorStyles = false;

143	159

144 // before	160 // before

145 dumpComputedStyle(oldestShadow.getElementById("oldestShadow"));	161 borderColorShouldBe(getNodeInShadowTreeStack('host/oldestShadow'), 'rgb(0, 0 , 0)');

146 dumpComputedStyle(olderShadow.getElementById("olderShadow"));	162 borderColorShouldBe(getNodeInShadowTreeStack('host//olderShadow'), 'rgb(0, 0 , 255)');

147 dumpComputedStyle(shadow.getElementById("target"));	163 borderColorShouldBe(getNodeInShadowTreeStack('host///target'), 'rgb(0, 0, 0) ');

148	164

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

150 // \|	166 // \|

151 // +--- olderShadow	167 // +--- olderShadow

152 // \|	168 // \|

153 // +--- shadow	169 // +--- shadow

154	170

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

156 shadow.applyAuthorStyles = true;	172 getNodeInShadowTreeStack('host///').applyAuthorStyles = true;

157 dumpComputedStyle(oldestShadow.getElementById("oldestShadow"));	173 borderColorShouldBe(getNodeInShadowTreeStack('host/oldestShadow'), 'rgb(0, 0 , 0)');

158 dumpComputedStyle(olderShadow.getElementById("olderShadow"));	174 borderColorShouldBe(getNodeInShadowTreeStack('host//olderShadow'), 'rgb(0, 0 , 255)');

159 dumpComputedStyle(shadow.getElementById("target"));	175 borderColorShouldBe(getNodeInShadowTreeStack('host///target'), 'rgb(255, 0, 0)');

160	176

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

162 shadow.applyAuthorStyles = false;	178 getNodeInShadowTreeStack('host///').applyAuthorStyles = false;

163 olderShadow.applyAuthorStyles = true;	179 getNodeInShadowTreeStack('host//').applyAuthorStyles = true;

164 dumpComputedStyle(oldestShadow.getElementById("oldestShadow"));	180 borderColorShouldBe(getNodeInShadowTreeStack('host/oldestShadow'), 'rgb(0, 0 , 0)');

165 dumpComputedStyle(olderShadow.getElementById("olderShadow"));	181 borderColorShouldBe(getNodeInShadowTreeStack('host//olderShadow'), 'rgb(0, 0 , 255)');

166 dumpComputedStyle(shadow.getElementById("target"));	182 borderColorShouldBe(getNodeInShadowTreeStack('host///target'), 'rgb(0, 0, 0) ');

167	183

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

169 olderShadow.applyAuthorStyles = false;	185 getNodeInShadowTreeStack('host//').applyAuthorStyles = false;

170 oldestShadow.applyAuthorStyles = true;	186 getNodeInShadowTreeStack('host/').applyAuthorStyles = true;

171 dumpComputedStyle(oldestShadow.getElementById("oldestShadow"));	187 borderColorShouldBe(getNodeInShadowTreeStack('host/oldestShadow'), 'rgb(255, 0, 0)');

172 dumpComputedStyle(olderShadow.getElementById("olderShadow"));	188 borderColorShouldBe(getNodeInShadowTreeStack('host//olderShadow'), 'rgb(0, 0 , 255)');

173 dumpComputedStyle(shadow.getElementById("target"));	189 borderColorShouldBe(getNodeInShadowTreeStack('host///target'), 'rgb(0, 0, 0) ');

174	190

175 document.body.removeChild(div);	191 cleanUp();

176 }	192 }

177	193

178 function testOrderOfApplyStyle()	194 function testOrderOfApplyStyle()

179 {	195 {

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

181	197

182 var div = document.createElement('div');	198 document.getElementById('sandbox').appendChild(

183 div.innerHTML = '<style scoped>div { border: 1px solid red }</style><div id= "host"></div>';	199 createDOM('div', {},

184 document.body.appendChild(div);	200 createDOM('style', {'scoped': 'scoped'},

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

186 var outerMostShadow = document.getElementById("host").webkitCreateShadowRoot ();	202 createDOM('div', {'id': 'host'},

187 outerMostShadow.innerHTML = '<style>div { border: 1px solid blue; }</style>< div id="outerMost">outerMost</div>';	203 createShadowRoot(

188 outerMostShadow.applyAuthorStyles = true;	204 createDOM('style', {},

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

190 var outerShadow = outerMostShadow.getElementById("outerMost").webkitCreateSh adowRoot();	206 createDOM('div', {'id': 'outerMost'},

191 outerShadow.innerHTML = '<style>div { border: 1px solid green; }</style><div id="outer">outer</div>';	207 createShadowRoot(

192 outerShadow.applyAuthorStyles = true;	208 createDOM('style', {},

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

194 var shadow = outerShadow.getElementById("outer").webkitCreateShadowRoot();	210 createDOM('div', {'id': 'outer'},

195 shadow.innerHTML = '<style>div { border: 1px solid yellow; }</style><div id= "target">target</div>';	211 createShadowRoot(

196 shadow.applyAuthorStyles = true;	212 createDOM('style', {},

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

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

	215

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

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

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

197	219

198 // The last scoped style should be applied.	220 // The last scoped style should be applied.

199 dumpComputedStyle(shadow.getElementById("target"));	221 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'), 'rgb(255, 255, 0)');

200	222

201 shadow.innerHTML = '<div id="target">target</div>';	223 getNodeInShadowTreeStack('host/outerMost/outer/').innerHTML = '<div id="targ et">target</div>';

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

203 dumpComputedStyle(shadow.getElementById("target"));	225 borderColorShouldBe(getNodeInShadowTreeStack('host/outerMost/outer/target'), 'rgb(0, 128, 0)');

204	226

205 document.body.removeChild(div);	227 cleanUp();

206 }	228 }

207	229

208 function runTests() {	230 function runTests() {

209 testBasic();	231 testBasic();

210 testEnclosingShadow();	232 testEnclosingShadow();

211 testEnclosingShadowWithScoped();	233 testEnclosingShadowWithScoped();

212 testNestedShadow();	234 testNestedShadow();

213 testMultipleShadow();	235 testMultipleShadow();

214 testOrderOfApplyStyle();	236 testOrderOfApplyStyle();

215 }	237 }

216

217 </script>	238 </script>

218 </head>	239 </head>

219 <body onload="runTests()">	240 <body onload="runTests()">

220 <script src="../../js/resources/js-test-post.js"></script>	241 <div id='sandbox'></div>

221 </body>	242 </body>

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

222 </html>	244 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/css/style-scoped/style-scoped-apply-author-styles-expected.txt » ('j') | no next file with comments »