third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-deep-combinator.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-deep-combinator.html

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

Patch Set: rev Created 3 years, 7 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-and-shadow-element-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-deep-combinator-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 function borderColorOf(node)

14 {

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

16 }

17

18 function borderColorShouldBe(selector, color)

19 {

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

21 shouldBeEqualToString(text, color);

22 }

23

24 function borderColorShouldNotBe(selector, color)

25 {

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

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

28 shouldNotBe(text, unevaledString);

29 }

30

31 function cleanUp()

32 {

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

34 }

35

36 description('Test for /deep/ combinator, http://crbug.com/309504.');

37

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

39

40 // div /deep/ span should match host/target.

41

42 sandbox.appendChild(

43 createDOM('div', {},

44 createDOM('style', {},

45 document.createTextNode('div /deep/ span { border: 1px solid green; }')),

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

47 createShadowRoot(

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

49 document.createTextNode('green border, because of hat.'))))) );

50

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

52

53 cleanUp();

54

55 // div /deep/ span should match host/host2/target and target2.

56

57 sandbox.appendChild(

58 createDOM('div', {},

59 createDOM('style', {},

60 document.createTextNode('div /deep/ span { border: 1px solid green; }')),

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

62 createShadowRoot(

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

64 createShadowRoot(

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

66 document.createTextNode('green border, because of ha t.')))))),

67 createDOM('span', {'id': 'target2'})));

68

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

70 borderColorShouldBe('target2', 'rgb(0, 128, 0)');

71

72 cleanUp();

73

74 sandbox.appendChild(

75 createDOM('div', {},

76 createDOM('style', {},

77 document.createTextNode('div#sandbox > div > div /deep/ span { borde r: 1px solid green; }')),

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

79 createShadowRoot(

80 createDOM('content', {}),

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

82 document.createTextNode('green border, because of hat.'))),

83 createDOM('span', {'id': 'target2'}))));

84

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

86 borderColorShouldBe('target2', 'rgb(0, 128, 0)');

87

88 cleanUp();

89

90 // Testing div /deep/ span in inner scope vs div /deep/ span in outer scope

91

92 sandbox.appendChild(

93 createDOM('div', {},

94 createDOM('style', {},

95 document.createTextNode('div /deep/ span { border: 1px solid green; }')),

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

97 createShadowRoot(

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

99 createDOM('style', {},

100 document.createTextNode('div /deep/ span { border: 1px s olid red; }')),

101 createShadowRoot(

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

103 document.createTextNode('green border, because of ha t.')))))),

104 createDOM('span', {'id': 'target2'})));

105

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

107

108 cleanUp();

109

110 sandbox.appendChild(

111 createDOM('div', {},

112 createDOM('style', {},

113 document.createTextNode('div /deep/ span { border: 1px solid green; }')),

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

115 createShadowRoot(

116 createDOM('style', {},

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

118 createDOM('div', {},

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

120 document.createTextNode('green border, because parent ha t wins.')))))));

121

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

123

124 cleanUp();

125

126 sandbox.appendChild(

127 createDOM('div', {},

128 createDOM('style', {},

129 document.createTextNode('div /deep/ span { border: 1px solid green; }')),

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

131 createShadowRoot(

132 createDOM('style', {},

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

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

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

136

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

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

139

140 cleanUp();

141

142 sandbox.appendChild(

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

144 createShadowRoot(

145 createDOM('style', {},

146 document.createTextNode(':host /deep/ span { border: 1px solid g reen; }')),

147 createDOM('span', {},

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

149 createShadowRoot(

150 createDOM('shadow', {}),

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

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

153

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

155

156 cleanUp();

157

158 // div /deep/ span cannot match, because div cannot match any shadow host.

159 sandbox.appendChild(

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

161 createShadowRoot(

162 createDOM('style', {},

163 document.createTextNode('div /deep/ span { border: 1px solid gre en; }')),

164 createDOM('span', {},

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

166 createShadowRoot(

167 createDOM('shadow', {}),

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

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

170

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

172

173 cleanUp();

174

175 // :host div /deep/ div should match.

176

177 sandbox.appendChild(

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

179 createShadowRoot(

180 createDOM('style', {},

181 document.createTextNode(':host div /deep/ div { border: 1px soli d green; }')),

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

183 createShadowRoot(

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

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

186

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

188

189 cleanUp();

190

191 // div :host div /deep/ div should not match.

192

193 sandbox.appendChild(

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

195 createShadowRoot(

196 createDOM('style', {},

197 document.createTextNode('div :host div /deep/ div { border: 1px solid green; }')),

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

199 createShadowRoot(

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

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

202

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

204

205 cleanUp();

206

207 // :host /shadow/ :host /deep/ div should not match.

208

209 sandbox.appendChild(

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

211 createShadowRoot(

212 createDOM('style', {},

213 document.createTextNode(':host /shadow/ :host /deep/ div { borde r: 1px solid green; }')),

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

215 createShadowRoot(

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

217 createShadowRoot(

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

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

220

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

222

223 cleanUp();

224

225 // div (=shadow host) div /deep/ div should not match.

226

227 sandbox.appendChild(

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

229 createShadowRoot(

230 createDOM('style', {},

231 document.createTextNode('div > div /deep/ div { border: 1px soli d green; }')),

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

233 createShadowRoot(

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

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

236

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

238

239 cleanUp();

240

241 // div + div /deep/ div should match.

242

243 sandbox.appendChild(

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

245 createShadowRoot(

246 createDOM('style', {},

247 document.createTextNode('div + div /deep/ div { border: 1px soli d green; }')),

248 createDOM('div', {},

249 document.createTextNode('sibling')),

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

251 createShadowRoot(

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

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

254

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

256

257 cleanUp();

258

259 sandbox.appendChild(

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

261 createShadowRoot(

262 createDOM('style', {},

263 document.createTextNode('div + div /deep/ div { border: 1px soli d green; }')),

264 createDOM('div', {},

265 document.createTextNode('sibling')),

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

267 createShadowRoot(

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

269 createShadowRoot(

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

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

272

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

274

275 cleanUp();

276

277 // :host + div /deep/ div should not match.

278

279 sandbox.appendChild(

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

281 createShadowRoot(

282 createDOM('style', {},

283 document.createTextNode(':host + div /deep/ div { border: 1px so lid green; }')),

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

285 createShadowRoot(

286 createDOM('div', {},

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

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

289 createShadowRoot(

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

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

292

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

294

295 cleanUp();

296

297 sandbox.appendChild(

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

299 createShadowRoot(

300 createDOM('style', {},

301 document.createTextNode(':host + div /deep/ div { border: 1px so lid green; }')),

302 createDOM('div', {},

303 document.createTextNode('sibling')),

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

305 createShadowRoot(

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

307 createShadowRoot(

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

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

310

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

312

313 cleanUp();

314

315 // :host /deep/ * should not match desendant nodes of div#host.

316 sandbox.appendChild(

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

318 createShadowRoot(

319 createDOM('style', {},

320 document.createTextNode(':host /deep/ * { border: 1px solid red; }')),

321 createDOM('content', {})),

322 createDOM('div', {'id': 'child'},

323 document.createTextNode('show not red'))));

324

325 borderColorShouldNotBe('child', 'rgb(255, 0, 0)');

326

327 cleanUp();

328

329 // Test for crbug.com/331871. 'div#inner h1' should not cross TreeScope boundary .

330

331 sandbox.appendChild(

332 createDOM('div', {},

333 createDOM('style', {},

334 document.createTextNode('div#outer /deep/ div#inner h1 { border: 1px solid red; }')),

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

336 createDOM('div', {'id': 'inner'},

337 createShadowRoot(

338 createDOM('h1', {'id': 'target'},

339 document.createTextNode('no red border')))))));

340

341 borderColorShouldNotBe('inner/target', 'rgb(255, 0, 0)');

342

343 cleanUp();

344

345 // :host /deep/ span is declared in a shadow tree, but the shadow root does not participate in flat tree.

346

347 sandbox.appendChild(

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

349 createShadowRoot(

350 createDOM('style', {},

351 document.createTextNode(':host /deep/ span { border: 1px solid g reen; }')),

352 createDOM('span', {},

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

354 createShadowRoot(

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

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

357

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

359

360 cleanUp();

361

362 sandbox.appendChild(

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

364 createShadowRoot(

365 createDOM('style', {},

366 document.createTextNode('* /deep/ .x-bar div { border: 1px solid red; }')),

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

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

369 createDOM('div', {},

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

371 createShadowRoot(

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

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

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

375 createShadowRoot(

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

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

378

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

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

381 cleanUp();

382

383 </script>

384 </html>

OLD	NEW