third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element.html - Issue 2843883002: Remove, or rewrite if necessary, tests which use /deep/ or ::shadow

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element.html

Issue 2843883002: Remove, or rewrite if necessary, tests which use /deep/ or ::shadow (Closed)

Patch Set: rev Created 3 years, 8 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-deep-combinator-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element-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/shadow-dom.js"></script>

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

6 </head>

7 <body>

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

9 <pre id='console'></pre>

10 </body>

11 <script>

12

13 var borderColor;

14

15 function borderColorOf(node)

16 {

17 return document.defaultView.getComputedStyle(node, null).getPropertyValue('b order-color');

18 }

19

20 function borderColorShouldBe(selector, color)

21 {

22 var text = 'borderColorOf(getNodeInComposedTree("' + selector + '"))';

23 shouldBeEqualToString(text, color);

24 }

25

26 function borderColorShouldNotBe(selector, color)

27 {

28 var text = 'borderColorOf(getNodeInComposedTree("' + selector + '"))';

29 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"';

30 shouldNotBe(text, unevaledString);

31 }

32

33 function cleanUp()

34 {

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

36 }

37

38 description('Test for ::shadow, http://crbug.com/309504.');

39

40 var sandbox = document.getElementById('sandbox');

41

42 sandbox.appendChild(

43 createDOM('div', {},

44 createDOM('style', {},

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

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

47 createShadowRoot(

48 createDOM('div', {'id': 'top-div'},

49 createDOM('div', {'id': 'not-top-div'}),

50 createDOM('span', {'id': 'not-top-span'})),

51 createDOM('span', {'id': 'top-span'})))));

52

53 borderColorShouldBe('host/top-div', 'rgb(0, 128, 0)');

54 borderColorShouldNotBe('host/top-span', 'rgb(0, 128, 0)');

55 borderColorShouldNotBe('host/not-top-div', 'rgb(0, 128, 0)');

56 borderColorShouldNotBe('host/not-top-span', 'rgb(0, 128, 0)');

57

58 cleanUp();

59

60 sandbox.appendChild(

61 createDOM('div', {},

62 createDOM('style', {},

63 document.createTextNode('::shadow ::shadow ::shadow span { border: 1 px solid green; }')),

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

65 createShadowRoot(

66 createDOM('span', {'id': 'span1'}),

67 createDOM('div', {'id': 'host1'},

68 createShadowRoot(

69 createDOM('span', {'id': 'span2'}),

70 createDOM('div', {'id': 'host2'},

71 createShadowRoot(

72 createDOM('span', {'id': 'span3'}),

73 createDOM('div', {'id': 'host3'},

74 createShadowRoot(

75 createDOM('span', {'id': 'span4'}))))))) ))));

76

77 borderColorShouldNotBe('host/span1', 'rgb(0, 128, 0)');

78 borderColorShouldNotBe('host/host1/span2', 'rgb(0, 128, 0)');

79 borderColorShouldBe('host/host1/host2/span3', 'rgb(0, 128, 0)');

80 borderColorShouldNotBe('host/host1/host2/host3/span4', 'rgb(0, 128, 0)');

81

82 cleanUp();

83

84 sandbox.appendChild(

85 createDOM('div', {},

86 createDOM('style', {},

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

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

89 createShadowRoot(

90 createDOM('span', {'id': 'target'},

91 document.createTextNode('green border, because of ::shadow.' ))))));

92

93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');

94

95 cleanUp();

96

97 // Cascade order

98 sandbox.appendChild(

99 createDOM('div', {},

100 createDOM('style', {},

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

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

103 createShadowRoot(

104 createDOM('style', {},

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

106 createDOM('span', {'id': 'target'},

107 document.createTextNode('green border, because of ::shadow.' ))))));

108

109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');

110

111 cleanUp();

112

113 sandbox.appendChild(

114 createDOM('div', {},

115 createDOM('style', {},

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

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

118 createShadowRoot(

119 createDOM('style', {},

120 document.createTextNode('span#target { border: 1px solid red ; }')),

121 createDOM('span', {'id': 'target'},

122 document.createTextNode('green border, because of ::shadow.' ))))));

123

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

125

126 cleanUp();

127

128 sandbox.appendChild(

129 createDOM('div', {},

130 createDOM('style', {},

131 document.createTextNode('div#sandbox > div > div::shadow span { bord er: 1px solid green; }')),

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

133 createShadowRoot(

134 createDOM('span', {'id': 'target'},

135 document.createTextNode('green border, because of ::shadow.' ))))));

136

137 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');

138

139 cleanUp();

140

141 sandbox.appendChild(

142 createDOM('div', {},

143 createDOM('style', {},

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

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

146 createShadowRoot(

147 createDOM('style', {},

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

149 createDOM('div', {},

150 createDOM('span', {'id': 'target'},

151 document.createTextNode('green border, because parent :: shadow wins.')))))));

152

153 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');

154

155 cleanUp();

156

157 sandbox.appendChild(

158 createDOM('div', {},

159 createDOM('style', {},

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

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

162 createShadowRoot(

163 createDOM('style', {},

164 document.createTextNode(':host > span { border: 1px solid re d; }')),

165 createDOM('span', {'id': 'target'},

166 document.createTextNode('red border because of specificity.' ))))));

167

168 // Since :host's specificity is the same as *, div::shadow span wins.

169 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');

170

171 cleanUp();

172

173 sandbox.appendChild(

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

175 createShadowRoot(

176 createDOM('style', {},

177 document.createTextNode(':host::shadow span { border: 1px solid green; }')),

178 createDOM('span', {},

179 document.createTextNode('some text'))),

180 createShadowRoot(

181 createDOM('shadow', {}),

182 createDOM('span', {'id': 'target'},

183 document.createTextNode('green border')))));

184

185 borderColorShouldBe('host//target', 'rgb(0, 128, 0)');

186

187 cleanUp();

188

189 // div::shadow span's div cannot match a shadow host whose shadow tree contains the style.

190 sandbox.appendChild(

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

192 createShadowRoot(

193 createDOM('style', {},

194 document.createTextNode('div::shadow span { border: 1px solid gr een; }')),

195 createDOM('span', {},

196 document.createTextNode('some text'))),

197 createShadowRoot(

198 createDOM('shadow', {}),

199 createDOM('span', {'id': 'target'},

200 document.createTextNode('no border')))));

201

202 borderColorShouldBe('host//target', 'rgb(0, 0, 0)');

203

204 cleanUp();

205

206 // :host div::shadow div should match.

207 sandbox.appendChild(

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

209 createShadowRoot(

210 createDOM('style', {},

211 document.createTextNode(':host div::shadow div { border: 1px sol id green; }')),

212 createDOM('div', {'id': 'host2'},

213 createShadowRoot(

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

215 document.createTextNode('green border')))))));

216

217 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');

218

219 cleanUp();

220

221 // div:host

222 sandbox.appendChild(

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

224 createShadowRoot(

225 createDOM('style', {},

226 document.createTextNode('div:host::shadow span { border: 1px sol id green; }')),

227 createDOM('span', {'id': 'target'},

228 document.createTextNode('no border, because div:host matches not hing.')))));

229

230 borderColorShouldBe('host/target', 'rgb(0, 0, 0)');

231

232 cleanUp();

233

234 // div (=shadow host) div::shadow div should not match.

235

236 sandbox.appendChild(

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

238 createShadowRoot(

239 createDOM('style', {},

240 document.createTextNode('div > div::shadow div { border: 1px sol id green; }')),

241 createDOM('div', {'id': 'host2'},

242 createShadowRoot(

243 createDOM('div', {'id': 'target'},

244 document.createTextNode('no border')))))));

245

246 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');

247

248 cleanUp();

249

250 // div + div::shadow div should match.

251

252 sandbox.appendChild(

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

254 createShadowRoot(

255 createDOM('style', {},

256 document.createTextNode('div + div::shadow div { border: 1px sol id green; }')),

257 createDOM('div', {},

258 document.createTextNode('sibling')),

259 createDOM('div', {'id': 'host2'},

260 createShadowRoot(

261 createDOM('div', {'id': 'target'},

262 document.createTextNode('green border')))))));

263

264 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');

265

266 cleanUp();

267

268 // :host + div::shadow div should not match.

269

270 sandbox.appendChild(

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

272 createShadowRoot(

273 createDOM('style', {},

274 document.createTextNode(':host + div::shadow div { border: 1px s olid green; }')),

275 createDOM('div', {'id': 'siblingShadow'},

276 createShadowRoot(

277 createDOM('div', {},

278 document.createTextNode('sibling')))),

279 createDOM('div', {'id': 'host2'},

280 createShadowRoot(

281 createDOM('div', {'id': 'target'},

282 document.createTextNode('no border')))))));

283

284 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');

285

286 cleanUp();

287

288 sandbox.appendChild(

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

290 createShadowRoot(

291 createDOM('style', {},

292 document.createTextNode('.x-bar .x-zot::shadow div { border: 1px solid red; }')),

293 createDOM('div', {'id': 'x-foo'},

294 document.createTextNode('x-foo')),

295 createDOM('div', {'id': 'x-bar-host', 'class': 'x-bar'},

296 createShadowRoot(

297 createDOM('div', {'id': 'x-bar-target'},

298 document.createTextNode('x-bar')),

299 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'},

300 createShadowRoot(

301 createDOM('div', {'id': 'x-zot-target'},

302 document.createTextNode('x-zot')))))))));

303

304 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0 )');

305 cleanUp();

306

307 </script>

308 </html>

OLD	NEW