commit 91010bc70a351e8ccfe1d21d12ad53812ab387fc
parent 1ed8d51accf511f093a676d907c56c5e23a5bddf
Author: Antoine Quint <graouts@apple.com>
Date: Thu, 9 Oct 2025 20:31:20 +0000
Bug 1986932 [wpt PR 54688] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=296048, a=testonly
Automatic update from web-platform-tests
WebKit export of https://bugs.webkit.org/show_bug.cgi?id=296048
--
wpt-commits: ed20c9fc88862fba1ead4644ea25c922cc16ad34
wpt-pr: 54688
Diffstat:
6 files changed, 276 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-animations/animation-name-in-nested-shadow-ref.html b/testing/web-platform/tests/css/css-animations/animation-name-in-nested-shadow-ref.html
@@ -0,0 +1,41 @@
+<style>
+
+ div {
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+
+ #red {
+ width: 300px;
+ height: 300px;
+ background-color: red;
+ }
+
+ #lightgreen {
+ width: 300px;
+ height: 100px;
+ background-color: lightgreen;
+ }
+
+ #green {
+ left: 100px;
+ top: 100px;
+ width: 200px;
+ height: 100px;
+ background-color: green;
+ }
+
+ #darkgreen {
+ left: 200px;
+ top: 200px;
+ width: 100px;
+ height: 100px;
+ background-color: darkgreen;
+ }
+
+</style>
+<div id="red"></div>
+<div id="lightgreen"></div>
+<div id="green"></div>
+<div id="darkgreen"></div>
diff --git a/testing/web-platform/tests/css/css-animations/animation-name-in-nested-shadow.html b/testing/web-platform/tests/css/css-animations/animation-name-in-nested-shadow.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Matching animation-name with nested shadow roots</title>
+<link rel="author" title="Antoine Quint" href="mailto:graouts@webkit.org">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=296048">
+<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names">
+<link rel="match" href="animation-name-in-nested-shadow-ref.html">
+</head>
+<body>
+
+<style>
+ body {
+ margin: 0;
+ }
+
+ @keyframes doc {
+ from, to { background-color: lightgreen }
+ }
+
+ .anim {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ animation-duration: 1s;
+ animation-fill-mode: both;
+ }
+
+ #doc_anim_doc { animation-name: doc; }
+ #doc_anim_outer { animation-name: outer; }
+ #doc_anim_inner { animation-name: inner; }
+
+ #outer_host {
+ position: absolute;
+ left: 100px;
+ top: 0;
+ }
+</style>
+
+<div id="doc_anim_doc" class="anim"></div>
+<div id="doc_anim_outer" class="anim"></div>
+<div id="doc_anim_inner" class="anim"></div>
+<div id="outer_host">
+ <template shadowrootmode="open">
+ <style>
+ @keyframes outer {
+ from, to { background-color: green }
+ }
+
+ .anim {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ animation-duration: 1s;
+ animation-fill-mode: both;
+ }
+
+ #outer_anim_doc { animation-name: doc; }
+ #outer_anim_outer { animation-name: outer; }
+ #outer_anim_inner { animation-name: inner; }
+
+ #inner_host {
+ position: absolute;
+ left: 100px;
+ top: 0;
+ }
+
+ </style>
+ <div id="outer_anim_doc" class="anim"></div>
+ <div id="outer_anim_outer" class="anim"></div>
+ <div id="outer_anim_inner" class="anim"></div>
+ <div id="inner_host">
+ <template shadowrootmode="open">
+ <style>
+ @keyframes inner {
+ from, to { background-color: darkgreen }
+ }
+
+ .anim {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ animation-duration: 1s;
+ animation-fill-mode: both;
+ }
+
+ #inner_anim_doc { animation-name: doc; }
+ #inner_anim_outer { animation-name: outer; }
+ #inner_anim_inner { animation-name: inner; }
+ </style>
+ <div id="inner_anim_doc" class="anim"></div>
+ <div id="inner_anim_outer" class="anim"></div>
+ <div id="inner_anim_inner" class="anim"></div>
+ </template>
+ </div>
+ </template>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-animations/animation-name-in-shadow-part-inner-match.html b/testing/web-platform/tests/css/css-animations/animation-name-in-shadow-part-inner-match.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Matching animation-name from within a shadow root with multiple @keyframes rules</title>
+<link rel="author" title="Antoine Quint" href="mailto:graouts@webkit.org">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=296048">
+<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names">
+<link rel="match" href="animation-name-in-shadow-part-ref.html">
+</head>
+<body>
+
+<style>
+
+#shadow {
+ width: 100px;
+ height: 100px;
+}
+
+@keyframes animation {
+ from, to { background-color: blue }
+}
+
+#shadow::part(target) {
+ height: 100px;
+ width: 100px;
+ background-color: red;
+}
+
+</style>
+
+<div id="shadow">
+ <template shadowrootmode="open">
+ <style>
+ @keyframes animation {
+ from, to { background-color: green }
+ }
+
+ div {
+ animation: animation 1s both;
+ }
+ </style>
+ <div part="target"></div>
+ </template>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-animations/animation-name-in-shadow-part-outer-match.html b/testing/web-platform/tests/css/css-animations/animation-name-in-shadow-part-outer-match.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Matching animation-name from within a shadow root with multiple @keyframes rules</title>
+<link rel="author" title="Antoine Quint" href="mailto:graouts@webkit.org">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=296048">
+<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names">
+<link rel="match" href="animation-name-in-shadow-part-ref.html">
+</head>
+<body>
+
+<style>
+
+#shadow {
+ width: 100px;
+ height: 100px;
+}
+
+@keyframes animation {
+ from, to { background-color: green }
+}
+
+#shadow::part(target) {
+ height: 100px;
+ width: 100px;
+ animation: animation 1s both;
+ background-color: red;
+}
+
+</style>
+
+<div id="shadow">
+ <template shadowrootmode="open">
+ <style>
+ @keyframes animation {
+ from, to { background-color: blue }
+ }
+ </style>
+ <div part="target"></div>
+ </template>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-animations/animation-name-in-shadow-part-ref.html b/testing/web-platform/tests/css/css-animations/animation-name-in-shadow-part-ref.html
@@ -0,0 +1 @@
+<div style="width: 100px; height: 100px; background-color: green;"></div>
diff --git a/testing/web-platform/tests/css/css-animations/animation-name-in-shadow-part.html b/testing/web-platform/tests/css/css-animations/animation-name-in-shadow-part.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Matching animation-name from within a shadow root with a single @keyframes rule in the outer scope</title>
+<link rel="author" title="Antoine Quint" href="mailto:graouts@webkit.org">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=296048">
+<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names">
+<link rel="match" href="animation-name-in-shadow-part-ref.html">
+</head>
+<body>
+
+<style>
+
+#shadow {
+ width: 100px;
+ height: 100px;
+}
+
+@keyframes animation {
+ from, to { background-color: green }
+}
+
+#shadow::part(target) {
+ height: 100px;
+ width: 100px;
+ animation: animation 1s both;
+ background-color: red;
+}
+
+</style>
+
+<div id="shadow">
+ <template shadowrootmode="open">
+ <div part="target"></div>
+ </template>
+</div>
+
+</body>
+</html>
+\ No newline at end of file
