LayoutTests/fast/dom/shadow/style-with-cat.html - Issue 289923004: Rename layout test filenames with "cat" and "hat" combinators

Side by Side Diff: LayoutTests/fast/dom/shadow/style-with-cat.html

Issue 289923004: Rename layout test filenames with "cat" and "hat" combinators (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 6 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:

View unified diff | Download patch | Annotate | Revision Log

« no previous file with comments | « LayoutTests/fast/dom/shadow/dynamically-added-deep-combinator-and-shadow-pseudo-element-expected.txt ('k') | LayoutTests/fast/dom/shadow/style-with-cat-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(getNodeInTreeOfTrees("' + selector + '"))';

21 shouldBeEqualToString(text, color);

22 }

23

24 function borderColorShouldNotBe(selector, color)

25 {

26 var text = 'borderColorOf(getNodeInTreeOfTrees("' + 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 // .foo /deep/ span, .foo is an ancestor of some shadow host which has span in i ts hosting shadow tree, should match.

176 sandbox.appendChild(

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

178 createShadowRoot(

179 createDOM('style', {},

180 document.createTextNode('.foo /deep/ span { border: 1px solid gr een; }')),

181 createDOM('span', {},

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

183 createShadowRoot(

184 createDOM('shadow', {}),

185 createDOM('div', {'class': 'foo'},

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

187 createShadowRoot(

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

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

190

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

192

193 cleanUp();

194

195

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

197

198 sandbox.appendChild(

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

200 createShadowRoot(

201 createDOM('style', {},

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

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

204 createShadowRoot(

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

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

207

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

209

210 cleanUp();

211

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

213

214 sandbox.appendChild(

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

216 createShadowRoot(

217 createDOM('style', {},

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

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

220 createShadowRoot(

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

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

223

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

225

226 cleanUp();

227

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

229

230 sandbox.appendChild(

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

232 createShadowRoot(

233 createDOM('style', {},

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

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

236 createShadowRoot(

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

238 createShadowRoot(

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

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

241

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

243

244 cleanUp();

245

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

247

248 sandbox.appendChild(

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

250 createShadowRoot(

251 createDOM('style', {},

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

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

254 createShadowRoot(

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

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

257

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

259

260 cleanUp();

261

262 // div + div /deep/ div should match.

263

264 sandbox.appendChild(

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

266 createShadowRoot(

267 createDOM('style', {},

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

269 createDOM('div', {},

270 document.createTextNode('sibling')),

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

272 createShadowRoot(

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

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

275

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

277

278 cleanUp();

279

280 sandbox.appendChild(

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

282 createShadowRoot(

283 createDOM('style', {},

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

285 createDOM('div', {},

286 document.createTextNode('sibling')),

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

288 createShadowRoot(

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

290 createShadowRoot(

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

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

293

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

295

296 cleanUp();

297

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

299

300 sandbox.appendChild(

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

302 createShadowRoot(

303 createDOM('style', {},

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

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

306 createShadowRoot(

307 createDOM('div', {},

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

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

310 createShadowRoot(

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

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

313

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

315

316 cleanUp();

317

318 sandbox.appendChild(

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

320 createShadowRoot(

321 createDOM('style', {},

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

323 createDOM('div', {},

324 document.createTextNode('sibling')),

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

326 createShadowRoot(

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

328 createShadowRoot(

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

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

331

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

333

334 cleanUp();

335

336 // div /deep/ span in a sibling shadow tree can match.

337 sandbox.appendChild(

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

339 createShadowRoot(

340 createDOM('style', {},

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

342 createDOM('span', {},

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

344 createShadowRoot(

345 createDOM('shadow', {}),

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

347 createShadowRoot(

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

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

350

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

352

353 cleanUp();

354

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

356 sandbox.appendChild(

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

358 createShadowRoot(

359 createDOM('style', {},

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

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

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

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

364

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

366

367 cleanUp();

368

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

370

371 sandbox.appendChild(

372 createDOM('div', {},

373 createDOM('style', {},

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

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

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

377 createShadowRoot(

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

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

380

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

382

383 cleanUp();

384

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

386

387 sandbox.appendChild(

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

389 createShadowRoot(

390 createDOM('style', {},

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

392 createDOM('span', {},

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

394 createShadowRoot(

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

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

397

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

399

400 cleanUp();

401

402 sandbox.appendChild(

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

404 createShadowRoot(

405 createDOM('style', {},

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

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

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

409 createDOM('div', {},

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

411 createShadowRoot(

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

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

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

415 createShadowRoot(

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

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

418

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

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

421 cleanUp();

422

423 </script>

424 </html>

425

OLD	NEW