From 480a92e4e069ab1e9f7c75d83a94066f137b7b83 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Wed, 15 Sep 2021 12:23:23 -0700 Subject: [PATCH] Use interpolation at the endpoints of animations. Use interpolation at the endpoints of animations, since it's needed to get the correct axis for animation of the 'rotate' property. The changes to translate-composition.html and scale-composition.html cause Firefox to pass the tests whose expectations are being modified, and thus, like Chrome, pass the entire file (whereas they cause Safari to fail additional tests). The test changes are discussed further in https://github.com/web-platform-tests/wpt/issues/30377 . Bug: 1180834 Change-Id: I6320b74b0aff29989a748fab1bff78b91426701e --- .../animations/box-shadow-composition.html | 6 +++--- css/css-transforms/animation/rotate-composition.html | 6 ++++-- css/css-transforms/animation/scale-composition.html | 4 ++-- .../animation/translate-composition.html | 10 +++++----- .../animations/text-shadow-composition.html | 6 +++--- 5 files changed, 17 insertions(+), 15 deletions(-) diff --git a/css/css-backgrounds/animations/box-shadow-composition.html b/css/css-backgrounds/animations/box-shadow-composition.html index 3f01473a29f52c..7cc1ba299231a2 100644 --- a/css/css-backgrounds/animations/box-shadow-composition.html +++ b/css/css-backgrounds/animations/box-shadow-composition.html @@ -87,7 +87,7 @@ {at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(130, 130, 130) 13px 26px 39px 52px'}, {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'}, {at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px'}, - {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px'}, + {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, {at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -5px -10px 0px -20px'}, ]); test_composition({ @@ -97,7 +97,7 @@ addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px', }, [ {at: -0.3, expect: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px 50.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px, rgba(0, 0, 0, 0) -6px -12px 0px -24px'}, - {at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px 40px'}, + {at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, {at: 0.5, expect: 'rgb(55, 60, 65) 5.5px 11px 16.5px 22px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'}, {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'}, {at: 1.5, expect: 'rgb(0, 0, 0) -3.5px -7px 0px -14px, rgb(30, 60, 90) 3px 6px 9px 12px, rgb(255, 255, 255) 30px 60px 90px 120px'}, @@ -111,7 +111,7 @@ {at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px, rgb(130, 130, 130) 13px 26px 39px 52px, rgb(255, 255, 255) 26px 52px 78px 104px'}, {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px'}, {at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'}, - {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px'}, + {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px'}, {at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -2px -4px 0px -8px, rgba(0, 0, 0, 0) -5px -10px 0px -20px, rgba(0, 0, 0, 0) -10px -20px 0px -40px'}, ]); diff --git a/css/css-transforms/animation/rotate-composition.html b/css/css-transforms/animation/rotate-composition.html index f9a4527342ffb4..6ab07050542d11 100644 --- a/css/css-transforms/animation/rotate-composition.html +++ b/css/css-transforms/animation/rotate-composition.html @@ -125,7 +125,8 @@ comparisonFunction: compareRotations }, [ {at: -1, expect: '0 -1 0 100deg'}, - {at: 0, expect: '0.27 0.53 0.8 360deg'}, + // Accept both the SLERP and the common axis solution, which are equivalent. + {at: 0, expect: '0.27 0.53 0.8 360deg', option: '0.27 0.53 0.8 0deg'}, {at: 0.25, expect: 'y 25deg'}, {at: 0.75, expect: 'y 75deg'}, {at: 1, expect: 'y 100deg'}, @@ -141,7 +142,8 @@ comparisonFunction: compareRotations }, [ {at: -1, expect: '0 -1 0 100deg'}, - {at: 0, expect: '0.27 0.53 0.8 360deg'}, + // Accept both the SLERP and the common axis solution, which are equivalent. + {at: 0, expect: '0.27 0.53 0.8 360deg', option: '0.27 0.53 0.8 0deg'}, {at: 0.25, expect: 'y 25deg'}, {at: 0.75, expect: 'y 75deg'}, {at: 1, expect: 'y 100deg'}, diff --git a/css/css-transforms/animation/scale-composition.html b/css/css-transforms/animation/scale-composition.html index 6fc4de61132cd2..107aa0b273f83e 100644 --- a/css/css-transforms/animation/scale-composition.html +++ b/css/css-transforms/animation/scale-composition.html @@ -64,7 +64,7 @@ {at: 0, expect: '4 5 6'}, {at: 0.25, expect: '3.25 4 4.75'}, {at: 0.75, expect: '1.75 2 2.25'}, - {at: 1, expect: 'none'}, + {at: 1, expect: '1'}, {at: 2, expect: '-2 -3 -4'}, ]); @@ -94,7 +94,7 @@ {at: 0.25, expect: '3.25 7.75 13.75'}, {at: 0.5, expect: '2.5 5.5 9.5'}, {at: 0.75, expect: '1.75 3.25 5.25'}, - {at: 1, expect: 'none'}, + {at: 1, expect: '1'}, {at: 1.5, expect: '-0.5 -3.5 -7.5'}, ]); diff --git a/css/css-transforms/animation/translate-composition.html b/css/css-transforms/animation/translate-composition.html index 3abdb4522b0709..3250d746a3815f 100644 --- a/css/css-transforms/animation/translate-composition.html +++ b/css/css-transforms/animation/translate-composition.html @@ -65,7 +65,7 @@ addTo: '100px', }, [ {at: -1, expect: '-100px'}, - {at: 0, expect: 'none'}, + {at: 0, expect: '0px'}, {at: 0.25, expect: '25px'}, {at: 0.75, expect: '75px'}, {at: 1, expect: '100px'}, @@ -79,7 +79,7 @@ addTo: '100px', }, [ {at: -1, expect: '-100px'}, - {at: 0, expect: 'none'}, + {at: 0, expect: '0px'}, {at: 0.25, expect: '25px'}, {at: 0.75, expect: '75px'}, {at: 1, expect: '100px'}, @@ -96,7 +96,7 @@ {at: 0, expect: '0px 40px 60px'}, {at: 0.25, expect: '0px 30px 45px'}, {at: 0.75, expect: '0px 10px 15px'}, - {at: 1, expect: 'none'}, + {at: 1, expect: '0px'}, {at: 2, expect: '0px -40px -60px'}, ]); @@ -110,7 +110,7 @@ {at: 0, expect: '0px 40px 60px'}, {at: 0.25, expect: '0px 30px 45px'}, {at: 0.75, expect: '0px 10px 15px'}, - {at: 1, expect: 'none'}, + {at: 1, expect: '0px'}, {at: 2, expect: '0px -40px -60px'}, ]); @@ -140,7 +140,7 @@ {at: 0.25, expect: '60px 45px 45px'}, {at: 0.5, expect: '40px 30px 30px'}, {at: 0.75, expect: '20px 15px 15px'}, - {at: 1, expect: 'none'}, + {at: 1, expect: '0px'}, {at: 2, expect: '-80px -60px -60px'}, ]); diff --git a/css/css-transitions/animations/text-shadow-composition.html b/css/css-transitions/animations/text-shadow-composition.html index dc297ec9fac9dc..d7d29c416ac03d 100644 --- a/css/css-transitions/animations/text-shadow-composition.html +++ b/css/css-transitions/animations/text-shadow-composition.html @@ -68,7 +68,7 @@ {at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(130, 130, 130) 13px 26px 39px'}, {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'}, {at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(100, 100, 100, 0.5) 5px 10px 15px'}, - {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'}, + {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px'}, {at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -5px -10px 0px'}, ]); @@ -79,7 +79,7 @@ addTo: 'rgb(200, 200, 200) 20px 40px 60px', }, [ {at: -0.3, expect: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px, rgba(0, 0, 0, 0) -6px -12px 0px'}, - {at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px'}, + {at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px'}, {at: 0.5, expect: 'rgb(55, 60, 65) 5.5px 11px 16.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(200, 200, 200, 0.5) 10px 20px 30px'}, {at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'}, {at: 1.5, expect: 'rgb(0, 0, 0) -3.5px -7px 0px, rgb(30, 60, 90) 3px 6px 9px, rgb(255, 255, 255) 30px 60px 90px'}, @@ -94,7 +94,7 @@ {at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px, rgb(130, 130, 130) 13px 26px 39px, rgb(255, 255, 255) 26px 52px 78px'}, {at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px, rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px'}, {at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(40, 80, 120, 0.5) 2px 4px 6px, rgba(100, 100, 100, 0.5) 5px 10px 15px, rgba(200, 200, 200, 0.5) 10px 20px 30px'}, - {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'}, + {at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px'}, {at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -2px -4px 0px, rgba(0, 0, 0, 0) -5px -10px 0px, rgba(0, 0, 0, 0) -10px -20px 0px'}, ]);