[csswg-drafts] [css-display-4] [css-animations-2] clarify and test how `display` animations involving `none` interact with pseudo-elements (#10111)

graouts has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-display-4] [css-animations-2] clarify and test how `display` animations involving `none` interact with pseudo-elements ==
Chrome has added support for the `display` property and work to add similar support in WebKit is ongoing ([bug 267762](https://bugs.webkit.org/show_bug.cgi?id=267762)). As part of this work, I noticed the Blink test [fast/css-generated-content/pseudo-animation-display.html](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/fast/css-generated-content/pseudo-animation-display.html;l=1?q=pseudo-animation-display&sq=&ss=chromium) was yielding different results in Chrome and WebKit and it was not obvious to me which of the two engines, if any, is correct. Here is the relevant part of this test:

```css
#target:after {
    display: block;
    content: "";
    background-color: blue;    
}

#target.animated:after {
    animation: anim 1ms forwards;
}

@keyframes anim {
    from { left: 0px; display: block; }
    to { left: 100px; display: none; }
}
```

```javascript
const target = document.getElementById('target');
target.addEventListener('animationend', () => {
    const style = getComputedStyle(target, ':after');
    test(style, 'left', '100px');
    test(style, 'display', 'block');
});
target.classList.add('animated');
```

In WebKit, the obtained values will be (once the mentioned feature bug is fixed) `left: 100px; display: none;` matching the `to` keyframe of the forwards-filling animation. In Chrome, the values are `left: auto; display: block;`, indicating that the animation is not applied.

It's not immediately obvious to me what the right behavior is here, and additionally I don't think WPT has test coverage that matches this.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10111 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 21 March 2024 10:58:28 UTC