Bug 1912798 [wpt PR 47568] - Make CSS view-transition-class a tree-sc…

…oped name, a=testonly

Automatic update from web-platform-tests
Make CSS view-transition-class a tree-scoped name

Parse view-transition-class a s CSSScopedNameList, and match with the
document tree-scoped when capturing the old+new element.

CSSWG resolution: w3c/csswg-drafts#10529 (comment)

Bug: 358159341
Change-Id: Ib40816b8358bb9390a427bc4ea456d86f6060eab
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5776943
Reviewed-by: Khushal Sagar <khushalsagarchromium.org>
Commit-Queue: Noam Rosenthal <nrosenthalchromium.org>
Cr-Commit-Position: refs/heads/main{#1340430}

--

wpt-commits: c88a90be14eeb523b2941c994e605da1feb61e77
wpt-pr: 47568

UltraBlame original commit: 26eb8cfa4b79e31b94b703759edb04a4658ec2e5

testing/web-platform/tests/css/css-view-transitions/shadow-part-with-class-inside-shadow-important.html

@@ -0,0 +1,391 @@
+<
+!
+DOCTYPE
+html
+>
+<
+html
+class
+=
+reftest
+-
+wait
+>
+<
+title
+>
+View
+transitions
+:
+shadow
+parts
+<
+/
+title
+>
+<
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+drafts
+.
+csswg
+.
+org
+/
+css
+-
+view
+-
+transitions
+-
+1
+/
+"
+>
+<
+link
+rel
+=
+"
+match
+"
+href
+=
+"
+names
+-
+are
+-
+tree
+-
+scoped
+-
+ref
+.
+html
+"
+>
+<
+script
+src
+=
+"
+/
+common
+/
+reftest
+-
+wait
+.
+js
+"
+>
+<
+/
+script
+>
+<
+style
+>
+div
+{
+width
+:
+100px
+;
+height
+:
+100px
+;
+background
+:
+red
+;
+}
+:
+:
+part
+(
+party
+)
+{
+view
+-
+transition
+-
+name
+:
+party
+;
+view
+-
+transition
+-
+class
+:
+red
+;
+}
+:
+root
+{
+view
+-
+transition
+-
+name
+:
+none
+;
+}
+html
+:
+:
+view
+-
+transition
+-
+group
+(
+*
+)
+{
+animation
+-
+play
+-
+state
+:
+paused
+;
+}
+html
+:
+:
+view
+-
+transition
+-
+old
+(
+*
+)
+{
+animation
+:
+unset
+;
+opacity
+:
+0
+}
+html
+:
+:
+view
+-
+transition
+-
+new
+(
+*
+)
+{
+animation
+:
+unset
+;
+opacity
+:
+0
+}
+html
+:
+:
+view
+-
+transition
+-
+group
+(
+party
+)
+{
+position
+:
+absolute
+;
+width
+:
+100px
+;
+height
+:
+100px
+;
+background
+:
+green
+;
+}
+html
+:
+:
+view
+-
+transition
+-
+group
+(
+party
+.
+red
+)
+{
+background
+:
+red
+;
+}
+<
+/
+style
+>
+<
+custom
+-
+component
+>
+<
+template
+shadowrootmode
+=
+"
+open
+"
+>
+<
+style
+>
+div
+{
+width
+:
+100px
+;
+height
+:
+100px
+;
+}
+<
+/
+style
+>
+<
+div
+part
+=
+"
+party
+"
+style
+=
+"
+view
+-
+transition
+-
+class
+:
+none
+!
+important
+"
+>
+<
+/
+div
+>
+<
+/
+template
+>
+<
+/
+custom
+-
+component
+>
+<
+script
+>
+failIfNot
+(
+document
+.
+startViewTransition
+"
+Missing
+document
+.
+startViewTransition
+"
+)
+;
+function
+runTest
+(
+)
+{
+document
+.
+startViewTransition
+(
+)
+.
+ready
+.
+then
+(
+takeScreenshot
+)
+;
+}
+onload
+=
+(
+)
+=
+>
+requestAnimationFrame
+(
+(
+)
+=
+>
+requestAnimationFrame
+(
+runTest
+)
+)
+;
+<
+/
+script
+>
+<
+/
+body
+>