LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow.html - Issue 325663003: Remove scoped styles (retry)

Side by Side Diff: LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow.html

Issue 325663003: Remove scoped styles (retry) (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Fix layout test (and expectation) Created 6 years, 6 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/css/style-scoped/style-scoped-basic-expected.txt ('k') | LayoutTests/fast/css/style-scoped/style-scoped-change-scoped-in-shadow-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="../../dom/shadow/resources/shadow-dom.js"></script>

6 <script>

7 shouldBeDefined("window.internals");

8

9 var textColor;

10

11 function shouldHaveTextColor(node, col)

12 {

13 textColor = document.defaultView.getComputedStyle(node, null).getPropertyVal ue('color');

14 shouldBeEqualToString('textColor', col);

15 }

16

17 function cleanUp()

18 {

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

20 }

21

22 function testScopedStyle()

23 {

24 debug('test a scoped style in shadow tree.');

25 document.getElementById('sandbox').appendChild(

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

27 createShadowRoot(

28 createDOM('div', {},

29 createDOM('style', {'scoped': 'scoped'},

30 document.createTextNode('div { color: red; }')),

31 createDOM('div', {'id': 'E'})),

32 createDOM('div', {'id': 'F'}))));

33

34 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

35 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

36 cleanUp();

37 }

38

39 function testStyle()

40 {

41 debug('test a style in shadow tree.');

42 document.getElementById('sandbox').appendChild(

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

44 createShadowRoot(

45 createDOM('div', {},

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

47 createDOM('style', {},

48 document.createTextNode('div { color: red; }')))),

49 createDOM('div', {'id': 'F'}))));

50

51 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

52 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');

53 cleanUp();

54 }

55

56 function testStyleWithMultipleShadowRoots()

57 {

58 debug('test styles in multiple shadow trees.');

59

60 document.getElementById('sandbox').appendChild(

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

62 createShadowRoot(

63 createDOM('div', {},

64 createDOM('style', {},

65 document.createTextNode('div { color: red; }')),

66 createDOM('div', {'id': 'E'})),

67 createDOM('div', {'id': 'F'})),

68

69 createShadowRoot(

70 createDOM('div', {},

71 createDOM('style', {'scoped': 'scoped'},

72 document.createTextNode('div { color: blue; }')),

73 createDOM('shadow', {}),

74 createDOM('div', {'id': 'G'})))));

75

76 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

77 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');

78 shouldHaveTextColor(getNodeInTreeOfTrees('host//G'), 'rgb(0, 0, 255)');

79 cleanUp();

80 }

81

82 function testScopedStyleWithNestedShadowRoots()

83 {

84 debug('test a scoped style in nested shadow tree.');

85 document.getElementById('sandbox').appendChild(

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

87 createShadowRoot(

88 createDOM('div', {},

89 createDOM('style', {'scoped': 'scoped'},

90 document.createTextNode('div { color: red; }')),

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

92 createShadowRoot(

93 createDOM('div', {},

94 createDOM('style', {'scoped': 'scoped'},

95 document.createTextNode('div { color: blue; }')),

96 createDOM('div', {'id': 'G'})),

97 createDOM('div', {'id': 'H'})))),

98 createDOM('div', {'id': 'F'}))));

99

100 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

101 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

102 shouldHaveTextColor(getNodeInTreeOfTrees('host/E/G'), 'rgb(0, 0, 255)');

103 shouldHaveTextColor(getNodeInTreeOfTrees('host/E/H'), 'rgb(255, 0, 0)');

104 cleanUp();

105 }

106

107 function testStyleWithNestedShadowRoots()

108 {

109 debug('test a style in nested shadow tree.');

110 document.getElementById('sandbox').appendChild(

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

112 createShadowRoot(

113 createDOM('div', {},

114 createDOM('style', {},

115 document.createTextNode('div { color: red; }')),

116 createDOM('div', {'id': 'E'},

117 createShadowRoot(

118 createDOM('div', {},

119 createDOM('style', {},

120 document.createTextNode('div { color: blue; }')),

121 createDOM('div', {'id': 'G'})),

122 createDOM('div', {'id': 'H'})))),

123 createDOM('div', {'id': 'F'}))));

124

125 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

126 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');

127 shouldHaveTextColor(getNodeInTreeOfTrees('host/E/G'), 'rgb(0, 0, 255)');

128 shouldHaveTextColor(getNodeInTreeOfTrees('host/E/H'), 'rgb(0, 0, 255)');

129 cleanUp();

130 }

131

132 function testChangeScopedAttributeOnline()

133 {

134 debug('test changing scoped attribute online.');

135 document.getElementById('sandbox').appendChild(

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

137 createShadowRoot(

138 createDOM('div', {},

139 createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scop ed'},

140 document.createTextNode('div { color: red; }')),

141 createDOM('div', {'id': 'E'})),

142 createDOM('div', {'id': 'F'}))));

143

144 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

145 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

146 document.body.offsetLeft;

147

148 // changing from scoped to scoped.

149 getNodeInTreeOfTrees('host/style-in-shadow').setAttribute('scoped', 'scoped' );

150

151 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

152 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

153

154 // removing scoped.

155 getNodeInTreeOfTrees('host/style-in-shadow').removeAttribute('scoped');

156

157 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

158 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');

159

160 // changing from not scoped to scoped.

161 getNodeInTreeOfTrees('host/style-in-shadow').setAttribute('scoped', 'scoped' );

162 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

163 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

164 cleanUp();

165 }

166

167 function testRemoveScopedStyle()

168 {

169 debug('test removing a scoped style from shadow tree.');

170 document.getElementById('sandbox').appendChild(

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

172 createShadowRoot(

173 createDOM('div', {},

174 createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scop ed'},

175 document.createTextNode('div { color: red; }')),

176 createDOM('div', {'id': 'E'})),

177 createDOM('div', {'id': 'F'}))));

178

179 // before

180 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

181 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

182

183 var styleInShadow = getNodeInTreeOfTrees('host/style-in-shadow');

184 styleInShadow.parentNode.removeChild(styleInShadow);

185

186 // after

187 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(0, 0, 0)');

188 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

189 cleanUp();

190 }

191

192 function testRemoveStyle()

193 {

194 debug('test removing a style from shadow tree.');

195 document.getElementById('sandbox').appendChild(

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

197 createShadowRoot(

198 createDOM('div', {},

199 createDOM('style', {'id': 'style-in-shadow'},

200 document.createTextNode('div { color: red; }')),

201 createDOM('div', {'id': 'E'})),

202 createDOM('div', {'id': 'F'}))));

203

204 // before

205 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

206 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');

207

208 var styleInShadow = getNodeInTreeOfTrees('host/style-in-shadow');

209 styleInShadow.parentNode.removeChild(styleInShadow);

210

211 // after

212 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(0, 0, 0)');

213 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

214 cleanUp();

215 }

216

217 function testInsertScopedStyle()

218 {

219 debug('test inserting a scoped style into shadow tree.');

220 document.getElementById('sandbox').appendChild(

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

222 createShadowRoot(

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

224 createDOM('div', {'id': 'E'})),

225 createDOM('div', {'id': 'F'}))));

226

227 var style = document.createElement('style');

228 style.innerHTML = 'div { color: red; }';

229 style.setAttribute('scoped', 'scoped');

230 getNodeInTreeOfTrees('host/D').appendChild(style);

231

232 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

233 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

234 cleanUp();

235 }

236

237 function testInsertStyle()

238 {

239 debug('test inserting a style into shadow tree.');

240 document.getElementById('sandbox').appendChild(

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

242 createShadowRoot(

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

244 createDOM('div', {'id': 'E'})),

245 createDOM('div', {'id': 'F'}))));

246

247 var style = document.createElement('style');

248 style.innerHTML = 'div { color: red; }';

249 getNodeInTreeOfTrees('host/D').appendChild(style);

250

251 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

252 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');

253 cleanUp();

254 }

255

256 function testChangeScopedAttributeOffline()

257 {

258 debug('test re-inserting a style after changing scoped attribute offline.');

259 document.getElementById('sandbox').appendChild(

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

261 createShadowRoot(

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

263 createDOM('style', {'id': 'style-in-shadow', 'scoped': 'scop ed'},

264 document.createTextNode('div { color: red; }')),

265 createDOM('div', {'id': 'E'})),

266 createDOM('div', {'id': 'F'}))));

267

268 var style = getNodeInTreeOfTrees('host/style-in-shadow');

269 style.parentNode.removeChild(style);

270 style.removeAttribute('scoped');

271 getNodeInTreeOfTrees('host/D').appendChild(style);

272

273 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

274 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(255, 0, 0)');

275

276 style.parentNode.removeChild(style);

277 style.setAttribute('scoped', 'scoped');

278 getNodeInTreeOfTrees('host/D').appendChild(style);

279

280 shouldHaveTextColor(getNodeInTreeOfTrees('host/E'), 'rgb(255, 0, 0)');

281 shouldHaveTextColor(getNodeInTreeOfTrees('host/F'), 'rgb(0, 0, 0)');

282 cleanUp();

283 }

284

285 function runTests()

286 {

287 testScopedStyle();

288 testStyle();

289 testStyleWithMultipleShadowRoots();

290 testScopedStyleWithNestedShadowRoots();

291 testStyleWithNestedShadowRoots();

292 testChangeScopedAttributeOnline();

293 testRemoveScopedStyle();

294 testRemoveStyle();

295 testInsertScopedStyle();

296 testInsertStyle();

297 testChangeScopedAttributeOffline();

298 }

299 </script>

300 </head>

301 <body onload="runTests()">

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

303 </body>

304 </html>

OLD	NEW