commit 26ed023f4d25db53b8cf3f9150fc75d1e8280f01
parent b7a2d524f8264b0a594c2d3b6c6b44de3689a194
Author: Fredrik Söderquist <fs@opera.com>
Date: Sat, 22 Nov 2025 21:12:56 +0000
Bug 2001673 [wpt PR 56186] - Move animation/composition/*-origin-composition.html to WPT, a=testonly
Automatic update from web-platform-tests
Move animation/composition/*-origin-composition.html to WPT
Move the tests and perform a mechanical rewrite:
* Change assertComposition() to test_composition().
* Change 'is' to 'expect' in the expectation objects.
* Include required testharness.js and framework.
* Add links to spec.
Bug: 40663834
Change-Id: I438372d7227e1aca12c720f84101c59094722d45
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7184842
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Auto-Submit: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/main@{#1548513}
--
wpt-commits: 02dad62adda40c1f8ced7d9cbfe6ddc061372a0b
wpt-pr: 56186
Diffstat:
2 files changed, 150 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-transforms/animation/perspective-origin-composition.html b/testing/web-platform/tests/css/css-transforms/animation/perspective-origin-composition.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<title>perspective-origin composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+<style>
+.target {
+ width: 200px;
+ height: 200px;
+}
+</style>
+<body>
+<script>
+test_composition({
+ property: 'perspective-origin',
+ underlying: '40px 60px',
+ addFrom: '60px 40px',
+ addTo: '160px 140px',
+}, [
+ {at: -0.25, expect: '75px 75px'},
+ {at: 0, expect: '100px 100px'},
+ {at: 0.25, expect: '125px 125px'},
+ {at: 0.5, expect: '150px 150px'},
+ {at: 0.75, expect: '175px 175px'},
+ {at: 1, expect: '200px 200px'},
+ {at: 1.25, expect: '225px 225px'},
+]);
+
+test_composition({
+ property: 'perspective-origin',
+ underlying: 'top 20% left 40%',
+ addFrom: 'left 60% top 80%',
+ addTo: 'right 80% bottom 40%',
+}, [
+ {at: -0.25, expect: '220px 210px'},
+ {at: 0, expect: '200px 200px'},
+ {at: 0.25, expect: '180px 190px'},
+ {at: 0.5, expect: '160px 180px'},
+ {at: 0.75, expect: '140px 170px'},
+ {at: 1, expect: '120px 160px'},
+ {at: 1.25, expect: '100px 150px'},
+]);
+
+test_composition({
+ property: 'perspective-origin',
+ underlying: '40px 60px',
+ replaceFrom: '100px 200px',
+ addTo: '160px 40px',
+}, [
+ {at: -0.25, expect: '75px 225px'},
+ {at: 0, expect: '100px 200px'},
+ {at: 0.25, expect: '125px 175px'},
+ {at: 0.5, expect: '150px 150px'},
+ {at: 0.75, expect: '175px 125px'},
+ {at: 1, expect: '200px 100px'},
+ {at: 1.25, expect: '225px 75px'},
+]);
+
+test_composition({
+ property: 'perspective-origin',
+ underlying: '40px 60px',
+ addFrom: '60px 140px',
+ replaceTo: '200px 100px',
+}, [
+ {at: -0.25, expect: '75px 225px'},
+ {at: 0, expect: '100px 200px'},
+ {at: 0.25, expect: '125px 175px'},
+ {at: 0.5, expect: '150px 150px'},
+ {at: 0.75, expect: '175px 125px'},
+ {at: 1, expect: '200px 100px'},
+ {at: 1.25, expect: '225px 75px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-origin-composition.html b/testing/web-platform/tests/css/css-transforms/animation/transform-origin-composition.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<title>transform-origin composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+<style>
+.target {
+ width: 200px;
+ height: 200px;
+}
+</style>
+<body>
+<script>
+test_composition({
+ property: 'transform-origin',
+ underlying: '40px 60px',
+ addFrom: '60px 40px',
+ addTo: '160px 140px 40px',
+}, [
+ {at: -0.25, expect: '75px 75px -10px'},
+ {at: 0, expect: '100px 100px'},
+ {at: 0.25, expect: '125px 125px 10px'},
+ {at: 0.5, expect: '150px 150px 20px'},
+ {at: 0.75, expect: '175px 175px 30px'},
+ {at: 1, expect: '200px 200px 40px'},
+ {at: 1.25, expect: '225px 225px 50px'},
+]);
+
+test_composition({
+ property: 'transform-origin',
+ underlying: 'top right 20px',
+ addFrom: 'left top 80px',
+ addTo: 'right bottom 20px',
+}, [
+ {at: -0.25, expect: '150px -50px 115px'},
+ {at: 0, expect: '200px 0px 100px'},
+ {at: 0.25, expect: '250px 50px 85px'},
+ {at: 0.5, expect: '300px 100px 70px'},
+ {at: 0.75, expect: '350px 150px 55px'},
+ {at: 1, expect: '400px 200px 40px'},
+ {at: 1.25, expect: '450px 250px 25px'},
+]);
+
+test_composition({
+ property: 'transform-origin',
+ underlying: '40px 60px 100px',
+ replaceFrom: '100px 200px 20px',
+ addTo: '160px 40px',
+}, [
+ {at: -0.25, expect: '75px 225px'},
+ {at: 0, expect: '100px 200px 20px'},
+ {at: 0.25, expect: '125px 175px 40px'},
+ {at: 0.5, expect: '150px 150px 60px'},
+ {at: 0.75, expect: '175px 125px 80px'},
+ {at: 1, expect: '200px 100px 100px'},
+ {at: 1.25, expect: '225px 75px 120px'},
+]);
+
+test_composition({
+ property: 'transform-origin',
+ underlying: '40px 60px 80px',
+ addFrom: '60px 140px 20px',
+ replaceTo: '200px 100px',
+}, [
+ {at: -0.25, expect: '75px 225px 125px'},
+ {at: 0, expect: '100px 200px 100px'},
+ {at: 0.25, expect: '125px 175px 75px'},
+ {at: 0.5, expect: '150px 150px 50px'},
+ {at: 0.75, expect: '175px 125px 25px'},
+ {at: 1, expect: '200px 100px'},
+ {at: 1.25, expect: '225px 75px -25px'},
+]);
+</script>
+</body>
