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

Side by Side Diff: LayoutTests/fast/dom/shadow/style-with-hat.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/style-with-deep-combinator-expected.txt ('k') | LayoutTests/fast/dom/shadow/style-with-hat-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(getNodeInTreeOfTrees("' + selector + '"))';

23 shouldBeEqualToString(text, color);

24 }

25

26 function borderColorShouldNotBe(selector, color)

27 {

28 var text = 'borderColorOf(getNodeInTreeOfTrees("' + 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 hat.'))))) );

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

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

123

124 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0).

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

126

127 cleanUp();

128

129 sandbox.appendChild(

130 createDOM('div', {},

131 createDOM('style', {},

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

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

134 createShadowRoot(

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

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

137

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

139

140 cleanUp();

141

142 sandbox.appendChild(

143 createDOM('div', {},

144 createDOM('style', {},

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

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

147 createShadowRoot(

148 createDOM('style', {},

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

150 createDOM('div', {},

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

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

153

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

155

156 cleanUp();

157

158 sandbox.appendChild(

159 createDOM('div', {},

160 createDOM('style', {},

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

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

163 createShadowRoot(

164 createDOM('style', {},

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

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

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

168

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

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

171

172 cleanUp();

173

174 sandbox.appendChild(

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

176 createShadowRoot(

177 createDOM('style', {},

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

179 createDOM('span', {},

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

181 createShadowRoot(

182 createDOM('shadow', {}),

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

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

185

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

187

188 cleanUp();

189

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

191 sandbox.appendChild(

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

193 createShadowRoot(

194 createDOM('style', {},

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

196 createDOM('span', {},

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

198 createShadowRoot(

199 createDOM('shadow', {}),

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

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

202

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

204

205 cleanUp();

206

207

208 // div::shadow span can match [div -- sr -- span] in its sibling shadow tree.

209 sandbox.appendChild(

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

211 createShadowRoot(

212 createDOM('style', {},

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

214 createDOM('span', {},

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

216 createShadowRoot(

217 createDOM('shadow', {}),

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

219 createShadowRoot(

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

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

222

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

224

225 cleanUp();

226

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

228 sandbox.appendChild(

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

230 createShadowRoot(

231 createDOM('style', {},

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

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

234 createShadowRoot(

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

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

237

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

239

240 cleanUp();

241

242 // div:host

243 sandbox.appendChild(

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

245 createShadowRoot(

246 createDOM('style', {},

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

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

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

250

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

252

253 cleanUp();

254

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

256

257 sandbox.appendChild(

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

259 createShadowRoot(

260 createDOM('style', {},

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

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

263 createShadowRoot(

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

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

266

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

268

269 cleanUp();

270

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

272

273 sandbox.appendChild(

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

275 createShadowRoot(

276 createDOM('style', {},

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

278 createDOM('div', {},

279 document.createTextNode('sibling')),

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

281 createShadowRoot(

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

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

284

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

286

287 cleanUp();

288

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

290

291 sandbox.appendChild(

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

293 createShadowRoot(

294 createDOM('style', {},

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

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

297 createShadowRoot(

298 createDOM('div', {},

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

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

301 createShadowRoot(

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

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

304

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

306

307 cleanUp();

308

309 // div::shadow span in an insert shadow tree cannot match any element in active shadow tree.

310 sandbox.appendChild(

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

312 createShadowRoot(

313 createDOM('style', {},

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

315 createDOM('span', {},

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

317 createShadowRoot(

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

319 createShadowRoot(

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

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

322

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

324

325 cleanUp();

326

327 sandbox.appendChild(

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

329 createShadowRoot(

330 createDOM('style', {},

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

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

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

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

335 createShadowRoot(

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

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

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

339 createShadowRoot(

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

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

342

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

344 cleanUp();

345

346 </script>

347 </html>

348

OLD	NEW