Add support for new CSS ::slotted() pseudo element

Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.
::slotted() can take only one compound selector as
a parameter in contrast that ::content can have arbitrary
complex selector on its left.

The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.

[kochi, 2015-12-21 10:46:15]

Description was changed from

==========
**WIP** Support CSS ::slotted pseudo element


BUG=531990
==========

to

==========
**WIP** Support CSS ::slotted pseudo element

::slotted replaces ::content pseudo element in Shadow DOM V1.
At this moment, ::slotted() only takes a simple selector as
a parameter.  The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331

BUG=531990
==========

[kochi, 2015-12-21 10:49:42]

kochi@chromium.org changed reviewers:
+ rune@opera.com

[kochi, 2015-12-21 10:49:43]

Hi Rune,

This is still work-in-progress, but my attempt to implement
::slotted() pseudo element.

The idea is to have a separate list in RuleSet for ::slotted
rules, and define a new relation (ShadowSlot) to traverse
the slot in SelectorChecker.

I'm not certain about how RuleFeature for this should be,
so any comments are welcome.

[rune, 2015-12-22 11:21:11]

On 2015/12/21 10:49:43, kochi wrote:
> Hi Rune,
> 
> This is still work-in-progress, but my attempt to implement
> ::slotted() pseudo element.

I see now that this matches "distributed nodes" and not "assigned nodes" of the
slots in the style rules' scope. Hopefully, walking the slotted slots chain is
cheaper than when we tried walking up the composed tree for scopes for ::content
rules. I had hoped we could do without the global RuleFeatures for V1 shadows.

> The idea is to have a separate list in RuleSet for ::slotted
> rules, and define a new relation (ShadowSlot) to traverse
> the slot in SelectorChecker.

sgtm

> I'm not certain about how RuleFeature for this should be,
> so any comments are welcome.

[rune, 2015-12-22 14:56:53]

https://codereview.chromium.org/1523843004/diff/60001/third_party/WebKit/Sour...
File third_party/WebKit/Source/core/css/RuleFeature.cpp (right):

https://codereview.chromium.org/1523843004/diff/60001/third_party/WebKit/Sour...
third_party/WebKit/Source/core/css/RuleFeature.cpp:199: case
CSSSelector::PseudoSlotted:
This recalculates a bit more than necessary. Should be possible to do like we do
for ::content where we SubtreeStyleChange insertion points (<content> elements)
which recalculates distributed nodes with descendants.

[kochi, 2016-01-06 06:45:03]

Description was changed from

==========
**WIP** Support CSS ::slotted pseudo element

::slotted replaces ::content pseudo element in Shadow DOM V1.
At this moment, ::slotted() only takes a simple selector as
a parameter.  The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331

BUG=531990
==========

to

==========
Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.

::slotted() can take one compound selector as a parameter.  The spec is
discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

[kochi, 2016-01-06 06:45:04]

kochi@chromium.org changed reviewers:
+ hayato@chromium.org, timloh@chromium.org

[kochi, 2016-01-06 06:45:49]

Description was changed from

==========
Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.

::slotted() can take one compound selector as a parameter.  The spec is
discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

to

==========
Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.
::slotted() takes one compound selector as a parameter.

The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

[kochi, 2016-01-06 06:46:17]

The CQ bit was checked by kochi@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-01-06 06:46:42]

Dry run: CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1523843004/120001
View timeline at
 https://chromium-cq-status.appspot.com/patch-timeline/1523843004/120001

[commit-bot: I haz the power, 2016-01-06 08:17:36]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-01-06 08:17:37]

Dry run: This issue passed the CQ dry run.

[kochi, 2016-01-06 10:55:20]

Description was changed from

==========
Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.
::slotted() takes one compound selector as a parameter.

The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

to

==========
*WIP* Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.
::slotted() takes one compound selector as a parameter.

The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

[kochi, 2016-01-07 08:24:06]

The CQ bit was checked by kochi@chromium.org to run a CQ dry run

[kochi, 2016-01-07 08:24:31]

Description was changed from

==========
*WIP* Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.
::slotted() takes one compound selector as a parameter.

The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

to

==========
Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.
::slotted() takes one compound selector as a parameter.

The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

[commit-bot: I haz the power, 2016-01-07 08:24:56]

Dry run: CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1523843004/140001
View timeline at
 https://chromium-cq-status.appspot.com/patch-timeline/1523843004/140001

[kochi, 2016-01-07 08:26:31]

Description was changed from

==========
Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.
::slotted() takes one compound selector as a parameter.

The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

to

==========
Add support for new CSS ::slotted() pseudo element

::slotted() replaces ::content pseudo element in
Shadow DOM V1.
::slotted() can take only one compound selector as
a parameter in contrast that ::content can have arbitrary
complex selector on its left.

The spec is discussed at GitHub:
https://github.com/w3c/webcomponents/issues/331
and will be upstreamed.

BUG=531990
TEST=new added layout tests.
==========

[commit-bot: I haz the power, 2016-01-07 08:26:49]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-01-07 08:26:50]

Dry run: Try jobs failed on following builders:
  mac_chromium_compile_dbg_ng on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_comp...)
  mac_chromium_gn_rel on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_gn_r...)
  mac_chromium_rel_ng on tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/mac_chromium_rel_...)

[kochi, 2016-01-07 08:28:41]

Rune, Hayato, Tim,
Could you review please?

Rune, Hayato, please review the whole changes.

Tim, especially take a look at parser part?

Thanks in advance,

[kochi, 2016-01-07 08:31:26]

The CQ bit was checked by kochi@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-01-07 08:32:28]

Dry run: CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1523843004/160001
View timeline at
 https://chromium-cq-status.appspot.com/patch-timeline/1523843004/160001

[kochi, 2016-01-07 09:54:09]

https://codereview.chromium.org/1523843004/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/core/css/resolver/SharedStyleFinder.cpp (right):

https://codereview.chromium.org/1523843004/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/core/css/resolver/SharedStyleFinder.cpp:282: if
(element().assignedSlot())
I found that this now causes assertion in ElementShadow::assignedSlotFor(),
as if ElementShadow is not for V1 shadow, ElementShadow does not have
slot assignment information.

A workaround is to change this to call assignedSlotForBinding(), but IMHO
we should have an internal API for checking if an element has any assigned
slot.

[commit-bot: I haz the power, 2016-01-07 09:55:39]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-01-07 09:55:40]

Dry run: Try jobs failed on following builders:
  linux_chromium_rel_ng on tryserver.chromium.linux (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)

[rune, 2016-01-07 10:19:27]

Can we split the parser parts into a separate CL?

I think we should try to get the parsing more strict than we do for ::content
where we currently allow it in the middle of a compound and re-order the
components during parsing. I don't think we should do the same mistake for
::slotted.

[kochi, 2016-01-07 10:35:56]

The CQ bit was checked by kochi@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-01-07 10:36:24]

Dry run: CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1523843004/180001
View timeline at
 https://chromium-cq-status.appspot.com/patch-timeline/1523843004/180001

[kochi, 2016-01-07 10:38:18]

On 2016/01/07 10:19:27, rune wrote:
> Can we split the parser parts into a separate CL?
> 
> I think we should try to get the parsing more strict than we do for ::content
> where we currently allow it in the middle of a compound and re-order the
> components during parsing. I don't think we should do the same mistake for
> ::slotted.

Okay, I'll work on splitting the parser part.

Tim, please hold the review if you haven't started.
I'll create a new one in a day or two.

[commit-bot: I haz the power, 2016-01-07 12:12:47]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-01-07 12:12:48]

Dry run: This issue passed the CQ dry run.

[rune, 2016-01-08 22:12:41]

On 2016/01/07 10:38:18, kochi wrote:
> On 2016/01/07 10:19:27, rune wrote:
> > Can we split the parser parts into a separate CL?
> > 
> > I think we should try to get the parsing more strict than we do for
::content
> > where we currently allow it in the middle of a compound and re-order the
> > components during parsing. I don't think we should do the same mistake for
> > ::slotted.
> 
> Okay, I'll work on splitting the parser part.
> 
> Tim, please hold the review if you haven't started.
> I'll create a new one in a day or two.

I've looked at bit at the pseudo element parsing, and I don't think it makes
most sense to look at pseudo element validity in common, and not just for
::slotted. I think you can just proceed by doing it like for ::content, and
we'll fix both the same way along with other pseudo element validity checking.

[rune, 2016-01-09 01:15:37]

I need another round through this when I'm more awake. Comments so far.

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
File
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html
(right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html:5:
.foo::slotted(div) .bar::before { display: block; }
This should be invalid, I think. ::slotted should only be allowed as the last
selector of the last compound. You don't need to fix in it this CL since this is
a general problem with our selector parsing, but add a comment that it should be
invalid, but currently isn't.

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html:18:
span::slotted(*) { color: blue; } /* never matches, but valid */
could you add a case or two where you have a compound preceding the ::slotted
with a combinator like "div ::slotted(#x)", "div + ::slotted(.x)"?

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html:34:
"*::slotted(*) { color: blue; }");
Why does the serialization contain the (first) '*' selector here?

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
File
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-shared-style.html
(right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-shared-style.html:6:
<body>
unnecessary html/head/body.

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
File third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element.html
(right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element.html:2:
<html>
We normally drop html/head/body.

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Sou...
File third_party/WebKit/Source/core/css/RuleFeature.cpp (right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Sou...
third_party/WebKit/Source/core/css/RuleFeature.cpp:200: // to avoid unnecessary
recalculation.
This shouldn't be necessary as long as we extract the right invalidation set
features and set insertionPointCrossing correctly below.

[rune, 2016-01-11 10:07:23]

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Sou...
File third_party/WebKit/Source/core/css/SelectorChecker.cpp (right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Sou...
third_party/WebKit/Source/core/css/SelectorChecker.cpp:470: case
CSSSelector::ShadowSlot:
It's possible to implement this without this combinator and add the code below
to the PseudoSlotted handling instead. You only need to make sure PseudoSlotted
is listed first in the compound (which we already do in the parser to make sure
it ends up in a separate right-most compound) to make sure we match .slot for
the slot, not the slotted element, in .slot::slotted(.slotted).

[rune, 2016-01-11 10:39:45]

I have a question about pseudo elements of the slotted element:

https://github.com/w3c/webcomponents/issues/331#issuecomment-170502997

[kochi, 2016-01-13 07:49:32]

The parser part is split at
https://codereview.chromium.org/1565263003/

And other part will also be split to another CL.

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
File
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html
(right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html:5:
.foo::slotted(div) .bar::before { display: block; }
On 2016/01/09 01:15:36, rune wrote:
> This should be invalid, I think. ::slotted should only be allowed as the last
> selector of the last compound. You don't need to fix in it this CL since this
is
> a general problem with our selector parsing, but add a comment that it should
be
> invalid, but currently isn't.

Done.

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html:18:
span::slotted(*) { color: blue; } /* never matches, but valid */
On 2016/01/09 01:15:36, rune wrote:
> could you add a case or two where you have a compound preceding the ::slotted
> with a combinator like "div ::slotted(#x)", "div + ::slotted(.x)"?

Done.

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html:34:
"*::slotted(*) { color: blue; }");
On 2016/01/09 01:15:36, rune wrote:
> Why does the serialization contain the (first) '*' selector here?

Because we add an implicit universal type selector before ::slotted().

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
File
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-shared-style.html
(right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-shared-style.html:6:
<body>
On 2016/01/09 01:15:36, rune wrote:
> unnecessary html/head/body.

Done.

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
File third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element.html
(right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element.html:2:
<html>
On 2016/01/09 01:15:36, rune wrote:
> We normally drop html/head/body.

Done.

[rune, 2016-01-13 10:02:30]

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
File
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html
(right):

https://codereview.chromium.org/1523843004/diff/180001/third_party/WebKit/Lay...
third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html:34:
"*::slotted(*) { color: blue; }");
On 2016/01/13 07:49:31, kochi wrote:
> On 2016/01/09 01:15:36, rune wrote:
> > Why does the serialization contain the (first) '*' selector here?
> 
> Because we add an implicit universal type selector before ::slotted().

Implicit means we shouldn't need to serialize it, but I see that this is just
exposing the same bug we have with *::content and *::-webkit-*. I've
coincidentally fixed that in https://codereview.chromium.org/1574323003/

[kochi, 2016-01-21 09:05:54]

This was split into 2 CLs:
https://codereview.chromium.org/1565263003/
https://codereview.chromium.org/1575363006/