Bug 269051 - :empty selector with animation not working properly
Summary: :empty selector with animation not working properly
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: All All
: P2 Normal
Assignee: Antoine Quint
URL:
Keywords: BrowserCompat, InRadar
: 270885 (view as bug list)
Depends on:
Blocks:
 
Reported: 2024-02-08 23:45 PST by ynagai
Modified: 2024-03-20 02:35 PDT (History)
7 users (show)

See Also:


Attachments
Test (802 bytes, text/html)
2024-03-06 13:30 PST, Antoine Quint
no flags Details
Test (441 bytes, text/html)
2024-03-06 13:40 PST, Antoine Quint
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description ynagai 2024-02-08 23:45:22 PST
This happens on Safari 17.4 beta and Technology Preview.

https://jsbin.com/lilakiqene/edit?html,css,js,output
The :empty selector with animation style continues to be applied even after adding child elements.
Comment 1 Alexey Proskuryakov 2024-02-12 15:22:37 PST
Thank you for the report! Could you please clarify if this a new issue Safari 17.4 beta and Technology Preview that does NOT affect shipping Safari?
Comment 2 ynagai 2024-02-12 16:07:20 PST
I confirmed that this issue does NOT happen in Safari 17.3.
Comment 3 Radar WebKit Bug Importer 2024-02-12 16:29:51 PST
<rdar://problem/122838142>
Comment 4 Antoine Quint 2024-02-13 03:11:42 PST
Here is what I am seeing when I click on the "Add Child" button:

Chrome and Firefox: spinning blue square at the bottom becomes a static white square with "Child" label

Safari 17.4 and STP 188: spinning blue square at the bottom remains blue and keeps spinning but also as a "Child" label 

Safari 17.3.1: spinning blue square at the bottom is unchanged

Is the change between Safari 17.3.1 and Safari 17.4 described above what you are seeing as well? In either case, I believe we are not doing the right thing.
Comment 5 ynagai 2024-02-19 00:27:31 PST
My confirmation was incorrect.
There seems to be something wrong with Safari 17.3.1 as well.
Comment 6 Antoine Quint 2024-03-06 13:22:55 PST
I believe this is unrelated to animations and simply a style invalidation issue since the background-color remains stuck on blue. Querying the computed style from the Web Inspector addresses the issue.
Comment 7 Antoine Quint 2024-03-06 13:30:01 PST
Created attachment 470209 [details]
Test

Actually I cannot make it happen without an `animation` property set on the element, so it does appear like animation is related to this issue.
Comment 8 Antoine Quint 2024-03-06 13:40:16 PST
Comment on attachment 470209 [details]
Test

<!DOCTYPE html>
<html>
<head>
<title>WebKit Bug 269051</title>
<style>

.parent {
    width: 100px;
    height: 100px;
    background-color: green;
}

.parent:empty {
    background-color: red;
    animation: animation 1s;
}

@keyframes animation { }

</style>
</head>
<body>
<div class="parent"></div>
<script>

setTimeout(() => document.querySelector('.parent').appendChild(document.createElement('div')), 1000);

</script>
</body>
</html>
Comment 9 Antoine Quint 2024-03-06 13:40:35 PST
Created attachment 470210 [details]
Test
Comment 10 Antoine Quint 2024-03-07 08:29:05 PST
As the document is initially parsed, Document::finishedParsing() is called and eventually Element::setStyleAffectedByEmpty() is called on the <div> under Style::TreeResolver::styleForStyleable(). The call to setStyleAffectedByEmpty() will set the StyleAffectedByEmpty flag which will allow the static function checkForEmptyStyleChange() to not return early when style changes occur on that <div> element later.

In the case where there is no `animation` style on that element, an additional call to Style::TreeResolver::resolveComposedTree() occurs due to a page rendering update and the <div> element is re-resolved. This time, when the <div> is visited, determineResolutionType() returns AnimationOnly and resetStyleRelations() is called, removing the StyleAffectedByEmpty flag.

This explains the change in behavior with or without the `animation` style. I'm not sure how to deal with this yet. Should we avoid calling resetStyleRelations() or should we have another call to setStyleAffectedByEmpty() afterwards?
Comment 11 Antoine Quint 2024-03-07 09:35:29 PST
Pull request: https://github.com/WebKit/WebKit/pull/25583
Comment 12 Antoine Quint 2024-03-07 09:36:08 PST
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/44984
Comment 13 EWS 2024-03-08 04:21:58 PST
Committed 275832@main (319ecb9c28e3): <https://commits.webkit.org/275832@main>

Reviewed commits have been landed. Closing PR #25583 and removing active labels.
Comment 14 Antoine Quint 2024-03-20 02:35:23 PDT
*** Bug 270885 has been marked as a duplicate of this bug. ***