Bug 269051

Summary: :empty selector with animation not working properly
Product: WebKit Reporter: ynagai
Component: CSSAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: ap, graouts, heycam, karlcow, koivisto, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: All   
OS: All   
See Also: https://github.com/web-platform-tests/wpt/pull/44984
Attachments:
Description Flags
Test
none
Test none

ynagai
Reported 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.
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
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 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?
ynagai
Comment 2 2024-02-12 16:07:20 PST
I confirmed that this issue does NOT happen in Safari 17.3.
Radar WebKit Bug Importer
Comment 3 2024-02-12 16:29:51 PST
<rdar://problem/122838142>
Antoine Quint
Comment 4 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.
ynagai
Comment 5 2024-02-19 00:27:31 PST
My confirmation was incorrect. There seems to be something wrong with Safari 17.3.1 as well.
Antoine Quint
Comment 6 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.
Antoine Quint
Comment 7 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.
Antoine Quint
Comment 8 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>
Antoine Quint
Comment 9 2024-03-06 13:40:35 PST
Created attachment 470210 [details] Test
Antoine Quint
Comment 10 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?
Antoine Quint
Comment 11 2024-03-07 09:35:29 PST
Pull request: https://github.com/WebKit/WebKit/pull/25583
Antoine Quint
Comment 12 2024-03-07 09:36:08 PST
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/44984
EWS
Comment 13 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.
Antoine Quint
Comment 14 2024-03-20 02:35:23 PDT
*** Bug 270885 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.