LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html - Issue 210813003: Rename :ancestor to :host-context.

Side by Side Diff: LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html

Issue 210813003: Rename :ancestor to :host-context. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Patch for landing Created 6 years, 9 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/ancestor-first-child-expected.txt ('k') | LayoutTests/fast/dom/shadow/ancestor-pseudo-class-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/js-test.js"></script>

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

6 <style>

7 :ancestor {

8 background-color: red;

9 }

10 </style>

11 </head>

12 <body class='mytheme'>

13 <div>

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

15 </div>

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

17 <script>

18 description('Test whether :ancestor matches a shadow host correctly.');

19

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

21

22 function backgroundColorOf(selector) {

23 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol or;

24 }

25

26 function backgroundColorShouldBe(selector, expected) {

27 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);

28 }

29

30 function cleanUp() {

31 sandbox.innerHTML = '';

32 }

33

34 debug(':ancestor out of shadow tree should not match any shadow hosts.');

35

36 sandbox.appendChild(

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

38 createShadowRoot(

39 createDOM('div', {},

40 document.createTextNode('Hello')))));

41

42 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

43

44 cleanUp();

45

46 debug(':ancestor with * should not match any shadow hosts.');

47

48 sandbox.appendChild(

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

50 createShadowRoot(

51 createDOM('style', {},

52 document.createTextNode('*:ancestor { background-color: green; } ')),

53 createDOM('div', {},

54 document.createTextNode('Hello')))));

55

56 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

57

58 cleanUp();

59

60 debug(':ancestor with tag selector should not match any shadow hosts.');

61

62 sandbox.appendChild(

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

64 createShadowRoot(

65 createDOM('style', {},

66 document.createTextNode('div:ancestor { background-color: green; }')),

67 createDOM('div', {},

68 document.createTextNode('Hello')))));

69

70 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

71

72 cleanUp();

73

74 debug(':ancestor with class selector should not match any shadow hosts.');

75

76 sandbox.appendChild(

77 createDOM('div', {'id': 'host', 'class': 'host'},

78 createShadowRoot(

79 createDOM('style', {},

80 document.createTextNode('.host:ancestor { background-color: gree n; }')),

81 createDOM('div', {},

82 document.createTextNode('Hello')))));

83

84 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

85

86 cleanUp();

87

88 debug(':ancestor with id selector should not match any shadow hosts.');

89

90 sandbox.appendChild(

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

92 createShadowRoot(

93 createDOM('style', {},

94 document.createTextNode('#host:ancestor { background-color: gree n; }')),

95 createDOM('div', {},

96 document.createTextNode('Hello')))));

97

98 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

99

100 cleanUp();

101

102 debug(':ancestor with attribute selector should not match any shadow hosts.');

103

104 sandbox.appendChild(

105 createDOM('div', {'id': 'host', 'foo': 'bar'},

106 createShadowRoot(

107 createDOM('style', {},

108 document.createTextNode('[foo=bar]:ancestor { background-color: green; }')),

109 createDOM('div', {},

110 document.createTextNode('Hello')))));

111

112 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

113

114 cleanUp();

115

116 debug(':ancestor in a shadow tree should match its shadow host.');

117

118 sandbox.appendChild(

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

120 createShadowRoot(

121 createDOM('style', {},

122 document.createTextNode(':ancestor(body.mytheme) { background-co lor: green; }')),

123 createDOM('div', {},

124 document.createTextNode('Hello')))));

125

126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

127

128 cleanUp();

129

130 debug(':ancestor with :host in a shadow tree should match its shadow host.');

131

132 sandbox.appendChild(

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

134 createShadowRoot(

135 createDOM('style', {},

136 document.createTextNode(':ancestor(div:host) { background-color: green; }')),

137 createDOM('div', {},

138 document.createTextNode('Hello')))));

139

140 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

141

142 cleanUp();

143

144 debug(':ancestor takes simple selectors and matches when one of the simple selec tors matches.');

145

146 sandbox.appendChild(

147 createDOM('div', {'id': 'parentOfHost'},

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

149 createShadowRoot(

150 createDOM('style', {},

151 document.createTextNode(':ancestor(body:not(.mytheme), span, div#parentOfHost) { background-color: green; }')),

152 createDOM('div', {},

153 document.createTextNode('Hello'))))));

154

155 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

156

157 cleanUp();

158

159 debug(':ancestor matches a shadow host in just a nested shadow tree, not all enc losing shadow trees.');

160

161 sandbox.appendChild(

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

163 createShadowRoot(

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

165 createShadowRoot(

166 createDOM('style', {},

167 document.createTextNode(':ancestor { background-color: g reen; }')),

168 createDOM('div', {},

169 document.createTextNode('Hello')))))));

170

171 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)');

172 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)');

173

174 debug(':ancestor matches based on a composed tree.');

175

176 sandbox.appendChild(

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

178 createShadowRoot(

179 createDOM('span', {'id': 'spanA'},

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

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

182 createShadowRoot(

183 createDOM('style', {},

184 document.createTextNode(':ancestor(span#spanA) > div { backg round-color: green; }')),

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

186 document.createTextNode('Hello'))))));

187

188 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');

189

190 cleanUp();

191

192 debug(':ancestor matches based on a composed tree when having multiple shadow ro ots.');

193

194 sandbox.appendChild(

195 createDOM('div', {'id': 'parentOfHost'},

196 createShadowRoot(

197 createDOM('span', {'id': 'spanA'},

198 document.createTextNode('no content, no shadow'))),

199 createShadowRoot(

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

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

202 createShadowRoot(

203 createDOM('span', {'id': 'spanC'},

204 createDOM('shadow', {},

205 createDOM('content')))),

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

207 createShadowRoot(

208 createDOM('style', {},

209 document.createTextNode(':ancestor(span#spanA) > #targetA { background-color: red; }')),

210 createDOM('style', {},

211 document.createTextNode(':ancestor(span#spanB) > #targetB { background-color: green; }')),

212 createDOM('style', {},

213 document.createTextNode(':ancestor(span#spanC) > #targetC { background-color: green; }')),

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

215 document.createTextNode('Hello')),

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

217 document.createTextNode('Hello')),

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

219 document.createTextNode('Hello'))))));

220

221 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)');

222 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)');

223 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)');

224

225 cleanUp();

226

227 debug(':ancestor is updated when its matched ancestor changes className or id.') ;

228

229 sandbox.appendChild(

230 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' },

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

232 createShadowRoot(

233 createDOM('style', {},

234 document.createTextNode(':ancestor(div#parentOfHost.somethem e) { background-color: green; }')),

235 createDOM('div', {},

236 document.createTextNode('Hello'))))));

237

238 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

239 document.getElementById('parentOfHost').className = 'mytheme';

240 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

241

242 cleanUp();

243

244 sandbox.appendChild(

245 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' },

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

247 createShadowRoot(

248 createDOM('style', {},

249 document.createTextNode(':ancestor(div#parentOfHost.somethem e) { background-color: green; }')),

250 createDOM('div', {},

251 document.createTextNode('Hello'))))));

252

253 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

254 var parentOfHost = document.getElementById('parentOfHost');

255 parentOfHost.id = 'differntIdValue';

256 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');

257

258 cleanUp();

259

260 debug('Compare :ancestor with :ancestor.');

261

262 sandbox.appendChild(

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

264 createShadowRoot(

265 createDOM('style', {},

266 document.createTextNode(':ancestor(div:ancestor, div#sandbox) { background-color: green; }')),

267 createDOM('style', {},

268 document.createTextNode(':ancestor(body.mytheme) { background-co lor: red; }')),

269 createDOM('div', {},

270 document.createTextNode('Hello')))));

271

272 // :ancestor(div:ancestor, div#sandbox) wins, because div#sandbox > body.mytheme .

273 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');

274

275 cleanUp();

276

277 sandbox.appendChild(

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

279 createShadowRoot(

280 createDOM('style', {},

281 document.createTextNode(':ancestor(div:ancestor, div#nomatch) { background-color: green; }')),

282 createDOM('style', {},

283 document.createTextNode(':ancestor(body.mytheme) { background-co lor: red; }')),

284 createDOM('div', {},

285 document.createTextNode('Hello')))));

286

287 // :ancestor(body.mytheme) wins, because div:ancestor < body.mytheme.

288 backgroundColorShouldBe('host', 'rgb(255, 0, 0)');

289

290 cleanUp();

291

292 // Test for specificiy of ":ancestor(...) > ...".

293 sandbox.appendChild(

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

295 createShadowRoot(

296 createDOM('style', {},

297 document.createTextNode(':ancestor(div:ancestor, div#host:ancest or) > div { background-color: green; }')),

298 createDOM('style', {},

299 document.createTextNode(':ancestor(body.mytheme) > div { backgro und-color: red; }')),

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

301 document.createTextNode('Hello')))));

302

303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');

304

305 cleanUp();

306

307 sandbox.appendChild(

308 createDOM('div', {'id': 'host', 'class': 'host'},

309 createShadowRoot(

310 createDOM('style', {},

311 document.createTextNode(':ancestor(div:ancestor, div#host.host:a ncestor) > div { background-color: green; }')),

312 createDOM('style', {},

313 document.createTextNode(':ancestor(body) > div#target { backgrou nd-color: red; }')),

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

315 document.createTextNode('Hello')))));

316

317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');

318

319 cleanUp();

320

321 sandbox.appendChild(

322 createDOM('div', {'id': 'host', 'class': 'host'},

323 createShadowRoot(

324 createDOM('style', {},

325 document.createTextNode(':ancestor(div:ancestor(div:ancestor(div :ancestor(div:ancestor)))) > div { background-color: green; }')),

326 createDOM('style', {},

327 document.createTextNode(':ancestor(div) > div { background-color : red; }')),

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

329 document.createTextNode('Hello')))));

330

331 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');

332

333 cleanUp();

334

335 </script>

336 </body>

OLD	NEW