Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit dad8803

Browse files
sorvellsorvell
committed
Fixes #335
1 parent 157fca1 commit dad8803

File tree

4 files changed

+50
-8
lines changed

4 files changed

+50
-8
lines changed

‎src/ShadowCSS.js

+18-5
Original file line numberDiff line numberDiff line change
@@ -396,15 +396,28 @@ var ShadowCSS = {
396396
* to
397397
*
398398
* scopeName.foo > .bar, .foo scopeName > .bar { }
399-
* TODO(sorvell): file bug since native impl does not do the former yet.
400-
* http://jsbin.com/OganOCI/2/edit
399+
*
400+
* and
401+
*
402+
* :host(.foo:host) .bar { ... }
403+
*
404+
* to
405+
*
406+
* scopeName.foo .bar { ... }
401407
*/
402408
convertColonHost: function(cssText) {
403409
// p1 = :host, p2 = contents of (), p3 rest of rule
404410
return cssText.replace(cssColonHostRe, function(m, p1, p2, p3) {
405-
return p2 ? polyfillHostNoCombinator + p2 + p3 + ', '
406-
+ p2 + ' ' + p1 + p3 :
407-
p1 + p3;
411+
p1 = polyfillHostNoCombinator;
412+
if (p2) {
413+
if (p2.match(polyfillHost)) {
414+
return p1 + p2.replace(polyfillHost, '') + p3;
415+
} else {
416+
return p1 + p2 + p3 + ', ' + p2 + ' ' + p1 + p3;
417+
}
418+
} else {
419+
return p1 + p3;
420+
}
408421
});
409422
},
410423
/*

‎test/html/styling/colon-host.html

+26-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<script src="../../../platform.js"></script>
1212
<script src="register.js"></script>
1313
<script src="../../../../tools/test/htmltest.js"></script>
14-
<script src="../../../tools/test/chai/chai.js"></script>
14+
<script src="../../../../tools/test/chai/chai.js"></script>
1515
</head>
1616
<body>
1717
<script>
@@ -70,6 +70,10 @@
7070
:host {
7171
background: green;
7272
}
73+
74+
:host:focus {
75+
background: yellow;
76+
};
7377
</style>
7478
<content></content>
7579
</template>
@@ -90,6 +94,11 @@
9094
:host {
9195
padding: 20px;
9296
}
97+
98+
:host(.foo:host) {
99+
background: green;
100+
display: block;
101+
}
93102
</style>
94103
<div>padding: 20px</div>
95104
</template>
@@ -132,8 +141,12 @@ <h4>Expected: red background with black text and orange border</h4>
132141
<h4>Expected: red background with black text and orange border and 20px padding</h4>
133142
<x-zim></x-zim>
134143

144+
<h4>Expected: 20px padding, background green</h4>
145+
<x-zim2 class="foo"></x-zim2>
135146
<h4>Expected: 20px padding</h4>
136-
<x-zim2></x-zim2>
147+
<div class="foo">
148+
<x-zim2></x-zim2>
149+
</div>
137150

138151
<script>
139152
document.addEventListener('WebComponentsReady', function() {
@@ -202,10 +215,21 @@ <h4>Expected: 20px padding</h4>
202215
chai.assert.equal(zimStyle2.paddingLeft, '20px',
203216
':host styles are loaded via external sheet in import (paddingLeft)');
204217

218+
chai.assert.equal(zimStyle2.backgroundColor, 'rgb(0, 128, 0)',
219+
':host(.foo:host) styles are applied (backgroundColor)');
220+
221+
var zim2_2 = document.querySelector('.foo x-zim2');
222+
var zimStyle2_2 = getComputedStyle(zim2_2);
223+
chai.assert.equal(zimStyle2.backgroundColor, 'rgb(0, 128, 0)',
224+
':host(.foo:host) styles are applied (backgroundColor)');
225+
205226
var btn = document.querySelector('[is=x-button]');
206227
var btnStyle = getComputedStyle(btn);
207228
chai.assert.equal(btnStyle.backgroundColor, 'rgb(0, 128, 0)',
208229
':host styles are shimmed for type extension (backgroundColor)');
230+
btn.focus();
231+
chai.assert.equal(btnStyle.backgroundColor, 'rgb(255, 255, 0)',
232+
':host:active styles are shimmed (backgroundColor)');
209233

210234
done();
211235

‎test/html/styling/combinators.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<script src="../../../platform.js"></script>
1212
<script src="register.js"></script>
1313
<script src="../../../../tools/test/htmltest.js"></script>
14-
<script src="../../../tools/test/chai/chai.js"></script>
14+
<script src="../../../../tools/test/chai/chai.js"></script>
1515
</head>
1616
<body>
1717

‎test/js/tests.js

+5
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ htmlSuite('styling', function() {
2828
htmlTest('html/styling/pseudos.html?shadow&register');
2929
htmlTest('html/styling/polyfill-directive.html');
3030
htmlTest('html/styling/polyfill-rule.html');
31+
// TODO(sorvell): blocked on https://code.google.com/p/chromium/issues/detail?id=313935
32+
//htmlTest('html/styling/colon-host.html');
33+
htmlTest('html/styling/colon-host.html?shadow&register');
34+
htmlTest('html/styling/combinators.html');
35+
htmlTest('html/styling/combinators.html?shadow&register');
3136
});
3237

3338
htmlSuite('Library Cooperation', function() {

0 commit comments

Comments
 (0)