third_party/WebKit/LayoutTests/animations/interpolation/offset-position-interpolation.html - Issue 2364503002: CSS Motion Path: animate offset-anchor and offset-position

Unified Diff: third_party/WebKit/LayoutTests/animations/interpolation/offset-position-interpolation.html

Issue 2364503002: CSS Motion Path: animate offset-anchor and offset-position (Closed)

Patch Set: alphabetical Created 4 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

« third_party/WebKit/LayoutTests/animations/interpolation/offset-anchor-interpolation.html ('K') | « third_party/WebKit/LayoutTests/animations/interpolation/offset-anchor-interpolation.html ('k') | third_party/WebKit/Source/core/animation/CSSPositionInterpolationType.h » ('j') | third_party/WebKit/Source/core/animation/CSSPositionInterpolationType.h » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/animations/interpolation/offset-position-interpolation.html

diff --git a/third_party/WebKit/LayoutTests/animations/interpolation/perspective-origin-interpolation.html b/third_party/WebKit/LayoutTests/animations/interpolation/offset-position-interpolation.html

similarity index 57%

copy from third_party/WebKit/LayoutTests/animations/interpolation/perspective-origin-interpolation.html

copy to third_party/WebKit/LayoutTests/animations/interpolation/offset-position-interpolation.html

index b2bcffd77c62c3d33249964003e19373850e36f7..cb29ba085f8b895f1fc2122805c16918dd42c844 100644

--- a/third_party/WebKit/LayoutTests/animations/interpolation/perspective-origin-interpolation.html

+++ b/third_party/WebKit/LayoutTests/animations/interpolation/offset-position-interpolation.html

@@ -2,29 +2,10 @@

<style>

.parent {

- perspective-origin: 30px 10px;

+ offset-position: 30px 10px;

}

.target {

- display: inline-block;

- -webkit-perspective: 50;

- perspective: 50;

- margin-top: 50px;

- margin-bottom: 25px;

- perspective-origin: 10px 30px;

-.transformed {

- width: 50px;

- height: 50px;

- background: black;

- transform: rotateY(45deg);

-.expected .transformed {

- background: green;

-.expected {

- position: relative;

- left: -50px;

- opacity: 0.75;

+ offset-position: 10px 30px;

}

</style>

<body>

@@ -34,7 +15,7 @@

assertInterpolation({

- property: 'perspective-origin',

+ property: 'offset-position',

from: neutralKeyframe,

to: '20px 20px',

}, [

@@ -47,20 +28,20 @@ assertInterpolation({

]);

assertInterpolation({

- property: 'perspective-origin',

+ property: 'offset-position',

from: 'initial',

to: '20px 20px',

}, [

- {at: -0.3, is: '26.5px 26.5px'},

- {at: 0, is: '25px 25px'},

- {at: 0.3, is: '23.5px 23.5px'},

- {at: 0.6, is: '22px 22px'},

+ {at: -0.3, is: 'auto'},

+ {at: 0, is: 'auto'},

+ {at: 0.3, is: 'auto'},

+ {at: 0.6, is: '20px 20px'},

{at: 1, is: '20px 20px'},

- {at: 1.5, is: '17.5px 17.5px'},

+ {at: 1.5, is: '20px 20px'},

]);

assertInterpolation({

- property: 'perspective-origin',

+ property: 'offset-position',

from: 'inherit',

to: '20px 20px',

}, [

@@ -73,20 +54,20 @@ assertInterpolation({

]);

assertInterpolation({

- property: 'perspective-origin',

+ property: 'offset-position',

from: 'unset',

to: '20px 20px',

}, [

- {at: -0.3, is: '26.5px 26.5px'},

- {at: 0, is: '25px 25px'},

- {at: 0.3, is: '23.5px 23.5px'},

- {at: 0.6, is: '22px 22px'},

+ {at: -0.3, is: 'auto'},

+ {at: 0, is: 'auto'},

+ {at: 0.3, is: 'auto'},

+ {at: 0.6, is: '20px 20px'},

{at: 1, is: '20px 20px'},

- {at: 1.5, is: '17.5px 17.5px'},

+ {at: 1.5, is: '20px 20px'},

]);

assertInterpolation({

- property: 'perspective-origin',

+ property: 'offset-position',

from: '0% 50%',

to: '100% 150%'

}, [

@@ -97,5 +78,18 @@ assertInterpolation({

{at: 1, is: '100% 150%'},

{at: 1.5, is: '150% 200%'}

]);

+assertInterpolation({

alancutter (OOO until 2018) 2016/09/22 08:05:47 Use assertNoInterpolation(). Doesn't this fail for

Eric Willigers 2016/09/22 09:57:06 It didn't as AnimatableLengthPoint never implement

+ property: 'offset-position',

+ from: 'auto',

+ to: '20px 20px',

+}, [

+ {at: -0.3, is: 'auto'},

+ {at: 0, is: 'auto'},

+ {at: 0.3, is: 'auto'},

+ {at: 0.6, is: '20px 20px'},

+ {at: 1, is: '20px 20px'},

+ {at: 1.5, is: '20px 20px'},

+]);

</script>

</body>