commit 7f5b1ef2f0852ba06682b60ee571258db1ba0bc1
parent 2dc0dd8efa5813724e624450dee99b061b3c3c5f
Author: Daniil Sakhapov <sakhapov@chromium.org>
Date: Fri, 31 Oct 2025 08:52:36 +0000
Bug 1996378 [wpt PR 55653] - Activate border-shape interpolation tests, a=testonly
Automatic update from web-platform-tests
Activate border-shape interpolation tests
Bug: 450326418
Change-Id: I531d4a77eb2b10464f89d337db152bc17065547f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7079454
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1535867}
--
wpt-commits: 56e61c0de2585e1a3bbca6dfa9faa240c76fea97
wpt-pr: 55653
Diffstat:
1 file changed, 62 insertions(+), 63 deletions(-)
diff --git a/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-animation.tentative.html b/testing/web-platform/tests/css/css-borders/tentative/border-shape/border-shape-animation.tentative.html
@@ -9,38 +9,38 @@
<body>
<script>
- // // Outer and inner shapes are identical when only one value is specified.
- // test_interpolation({
- // property: 'border-shape',
- // from: 'circle(10px at 10px 10px)',
- // to: 'circle(30px at 30px 30px)',
- // }, [
- // { at: 0, expect: 'circle(10px at 10px 10px)' },
- // { at: 0.5, expect: 'circle(20px at 20px 20px)' },
- // { at: 1, expect: 'circle(30px at 30px 30px)' },
- // ]);
+ // Outer and inner shapes are identical when only one value is specified.
+ test_interpolation({
+ property: 'border-shape',
+ from: 'circle(10px at 10px 10px)',
+ to: 'circle(30px at 30px 30px)',
+ }, [
+ { at: 0, expect: 'circle(10px at 10px 10px)' },
+ { at: 0.5, expect: 'circle(20px at 20px 20px)' },
+ { at: 1, expect: 'circle(30px at 30px 30px)' },
+ ]);
- // // Explicit inner shape animates alongside the outer shape.
- // test_interpolation({
- // property: 'border-shape',
- // from: 'circle(20px at 10px 20px) circle(10px at 10px 20px)',
- // to: 'circle(40px at 30px 40px) circle(20px at 30px 40px)',
- // }, [
- // { at: 0, expect: 'circle(20px at 10px 20px) circle(10px at 10px 20px)' },
- // { at: 0.5, expect: 'circle(30px at 20px 30px) circle(15px at 20px 30px)' },
- // { at: 1, expect: 'circle(40px at 30px 40px) circle(20px at 30px 40px)' },
- // ]);
+ // Explicit inner shape animates alongside the outer shape.
+ test_interpolation({
+ property: 'border-shape',
+ from: 'circle(20px at 10px 20px) circle(10px at 10px 20px)',
+ to: 'circle(40px at 30px 40px) circle(20px at 30px 40px)',
+ }, [
+ { at: 0, expect: 'circle(20px at 10px 20px) circle(10px at 10px 20px)' },
+ { at: 0.5, expect: 'circle(30px at 20px 30px) circle(15px at 20px 30px)' },
+ { at: 1, expect: 'circle(40px at 30px 40px) circle(20px at 30px 40px)' },
+ ]);
- // // With different shapes, we interpolate discretely.
- // test_interpolation({
- // property: 'border-shape',
- // behavior: 'allow-discrete',
- // from: 'circle(20px at 10px 20px) circle(10px at 10px 20px)',
- // to: 'polygon(10px 10px, 100px 10px, 10px 100px) polygon(20px 20px, 80px 20px, 20px 80px)',
- // }, [
- // { at: 0, expect: 'circle(20px at 10px 20px) circle(10px at 10px 20px)' },
- // { at: 1, expect: 'polygon(10px 10px, 100px 10px, 10px 100px) polygon(20px 20px, 80px 20px, 20px 80px)' },
- // ]);
+ // With different shapes, we interpolate discretely.
+ test_interpolation({
+ property: 'border-shape',
+ behavior: 'allow-discrete',
+ from: 'circle(20px at 10px 20px) circle(10px at 10px 20px)',
+ to: 'polygon(10px 10px, 100px 10px, 10px 100px) polygon(20px 20px, 80px 20px, 20px 80px)',
+ }, [
+ { at: 0, expect: 'circle(20px at 10px 20px) circle(10px at 10px 20px)' },
+ { at: 1, expect: 'polygon(10px 10px, 100px 10px, 10px 100px) polygon(20px 20px, 80px 20px, 20px 80px)' },
+ ]);
// With different coordinate boxes, we interpolate discretely.
test_interpolation({
@@ -53,38 +53,38 @@
{ at: 1, expect: 'circle() content-box circle() border-box' },
]);
- // // With the same coordinate boxes, we interpolate normally.
- // test_interpolation({
- // property: 'border-shape',
- // from: 'circle(20px at 10px 20px) border-box circle(10px at 10px 20px) border-box',
- // to: 'circle(40px at 30px 40px) border-box circle(20px at 30px 40px) border-box',
- // }, [
- // { at: 0, expect: 'circle(20px at 10px 20px) circle(10px at 10px 20px)' },
- // { at: 0.5, expect: 'circle(30px at 20px 30px) circle(15px at 20px 30px)' },
- // { at: 1, expect: 'circle(40px at 30px 40px) circle(20px at 30px 40px)' },
- // ]);
+ // With the same coordinate boxes, we interpolate normally.
+ test_interpolation({
+ property: 'border-shape',
+ from: 'circle(20px at 10px 20px) border-box circle(10px at 10px 20px) padding-box',
+ to: 'circle(40px at 30px 40px) border-box circle(20px at 30px 40px) padding-box',
+ }, [
+ { at: 0, expect: 'circle(20px at 10px 20px) circle(10px at 10px 20px)' },
+ { at: 0.5, expect: 'circle(30px at 20px 30px) circle(15px at 20px 30px)' },
+ { at: 1, expect: 'circle(40px at 30px 40px) circle(20px at 30px 40px)' },
+ ]);
- // // With different number of shapes, inner shape becomes identical to outer shape.
- // test_interpolation({
- // property: 'border-shape',
- // from: 'circle(20px at 10px 20px)',
- // to: 'circle(40px at 30px 40px) circle(40px at 30px 40px)',
- // }, [
- // { at: 0, expect: 'circle(20px at 10px 20px) circle(20px at 10px 20px)' },
- // { at: 0.5, expect: 'circle(30px at 20px 30px) circle(30px at 20px 30px)' },
- // { at: 1, expect: 'circle(40px at 30px 40px) circle(40px at 30px 40px)' },
- // ]);
+ // With different number of shapes, inner shape becomes identical to outer shape.
+ test_interpolation({
+ property: 'border-shape',
+ from: 'circle(20px at 10px 20px)',
+ to: 'circle(40px at 30px 40px) half-border-box circle(40px at 30px 40px) half-border-box',
+ }, [
+ { at: 0, expect: 'circle(20px at 10px 20px) half-border-box circle(20px at 10px 20px) half-border-box' },
+ { at: 0.5, expect: 'circle(30px at 20px 30px) half-border-box circle(30px at 20px 30px) half-border-box' },
+ { at: 1, expect: 'circle(40px at 30px 40px) half-border-box circle(40px at 30px 40px) half-border-box' },
+ ]);
- // // From none to a shape, we interpolate discretely.
- // test_interpolation({
- // property: 'border-shape',
- // behavior: 'allow-discrete',
- // from: 'none',
- // to: 'circle() circle()',
- // }, [
- // { at: 0, expect: 'none' },
- // { at: 0.5, expect: 'none' },
- // { at: 1, expect: 'circle() circle()' },
- // ]);
+ // From none to a shape, we interpolate discretely.
+ test_interpolation({
+ property: 'border-shape',
+ behavior: 'allow-discrete',
+ from: 'none',
+ to: 'circle() circle()',
+ }, [
+ { at: 0, expect: 'none' },
+ { at: 0.5, expect: 'circle() circle()' },
+ { at: 1, expect: 'circle() circle()' },
+ ]);
</script>
-</body>
-\ No newline at end of file
+</body>
