[web-animations-1] Clarification about `target` and `pseudoElement` relationship

[graouts]

I'm not sure the spec is clear about what the animation target is if pseudoElement is not null.

Consider these two tests in web-animations/interfaces/Animatable/animate.html for instance:

test(t => {
  const div = createDiv(t);
  div.classList.add('pseudo');
  getComputedStyle(div,"::before").content; // Sync style
  const anim = div.animate(null, {pseudoElement: '::before'});
  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
  assert_equals(anim.effect.pseudoElement, '::before',
                'The returned Animation targets the correct selector');
}, 'animate() with pseudoElement an Animation object targeting ' +
   'the correct pseudo-element');

test(t => {
  const div = createDiv(t);
  const anim = div.animate(null, {pseudoElement: '::before'});
  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
  assert_equals(anim.effect.pseudoElement, '::before',
                'The returned Animation targets the correct selector');
}, 'animate() with pseudoElement without content creates an Animation object targeting ' +
   'the correct pseudo-element');

In the first example, I understand what's happening: the target element has a ::before pseudo-element with content and it's created before Element.animate() is called. It seems clear that the animation target is the ::before pseudo-element.

In the second example, I'm not so sure. When Element.animate() is called the target div has no ::before pseudo-element. So what is the effective target of that animation? Does it actually target any element? What if the animation starts and the div gets a ::before pseudo-element? Does the animation then affects that element?

I guess my question is whether we need a targeted pseudo-element to exist when the API tries to reference it, or if it's all resolved live.

Similarly, I'm confused by this test in web-animations/interfaces/Animation/commitStyles.html:

test(t => {
  const div = createDiv(t);
  div.classList.add('pseudo');
  const animation = div.animate(
    { opacity: 0 },
    { duration: 1, fill: 'forwards', pseudoElement: '::before' }
  );

  assert_throws_dom('NoModificationAllowedError', () => {
    animation.commitStyles();
  });
}, 'Throws if the target element is a pseudo element');

At the time Animation.animate() is called, style resolution has not happened yet and there is no ::before pseudo-element for div. However, there would be when Animation.commitStyles() is called.

Up until pseudoElement was added, it was clear whether an animation was targeting something, because you'd have to pass a value to KeyframeEffect.target. Now that the target is specified across a pair of properties without a direct reference to an Element, it's not as clear.

[graouts]

@george-steel Maybe you can help making sense of this?

[Loirooriol]

When Element.animate() is called the target div has no ::before pseudo-element.

AFAIK, the ::before pseudo-element will always exist (in the element tree). Then, it may not generate any box, but this should be no different than an element with display: none.

[graouts]

When Element.animate() is called the target div has no ::before pseudo-element.

AFAIK, the ::before pseudo-element will always exist (in the element tree). Then, it may not generate any box, but this should be no different than an element with display: none.

If that's true, could you point me to spec text backing this? It would make things easier, indeed.

But there are also tests that specifically test whether elements have or don't have ::before selectors set for elements, specifically web-animations/interfaces/KeyframeEffect/target.html.

[george-steel]

@Loirooriol is correct, a pseudo-element not having a content property is equivilent to display: none, the pseudo-element exists (and can be a target of getComputedStyle()) but does not generate a box. The two types of tests are there because many browsers use two different internal representations for elements with and without ::before selectors. They expect the same behavior.

[graouts]

Is there spec text to back up the notion of "a pseudo-element not having a content property is equivalent to display: none"? Or is it specifically that there is no text that says otherwise?

[george-steel]

@birtles @stephenmcgruer What do you think of this?

[Loirooriol]

@graouts In the definition of content: none,

On pseudo-elements it inhibits the creation of the pseudo-element as if it had display: none.

It's not crystal clear since the pseudo-element is still created in the element tree, only its boxes are inhibited (which is what display: none does), but it points out the equivalence.

I filed #1810 for explicitly defining how the element tree is constructed, but it was deferred.

[graouts]

Right, looking at the full definition of content: none (emphasis mine):

On elements, this inhibits the children of the element from being rendered as children of this element, as if the element was empty.
On pseudo-elements it inhibits the creation of the pseudo-element as if it had display: none.

In neither case does it prevent any pseudo-elements which have this element or pseudo-element as an originating element from being generated.

That last bit seems to be what defines that pseudo-elements generation are not bound by content being set to something other than none.

[birtles]

When it comes to pseudo elements I gladly defer to @emilio.

[stephenmcgruer]

My understanding was that pseudo-elements conceptually always exist for every selector (even ones that aren't supported by the browser or spec'd anywhere). So the idea with the web-animation spec changes was that targeting, say, ::blargh would target the conceptual pseudo-element with that selector (even if no browser would ever implement or create that).

In effect, of course, such animations do nothing, and so browsers would be welcome to optimize them (as long they still stayed around* in case, e.g. the user changed the target).

But yeah, like birtles I defer to others with pseudo-element knowledge :D.