Skip to content

GitLab

T
tangled
Commit c71e8832 authored by Stephen McGruer's avatar Stephen McGruer Committed by Commit Bot
Browse files
Options

Port scale-interpolation.html to WPT 

There were some remaining tests in the Blink-internal version that were
not present in the external/WPT version, so port those over.

This work revealed two separate issues; one where the spec does not
specify the behavior to use
(https://github.com/w3c/csswg-drafts/issues/3290), and one where there
is a Chrome bug (https://crbug.com/1007978)

Bug: 900581
Change-Id: I8e47cba411f6787440282be3519d18f89a68bbc9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1823891
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699807}
parent 766cb6fd
Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 211 deletions
third_party/blink/web_tests/animations/interpolation/scale-interpolation.html deleted 100644 → 0
View file @ 766cb6fd
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
scale: 0.5 1 2
}
.target {
width: 10px;
height: 10px;
background-color: black;
scale: 1.1 1;
}
.expected {
background-color: green;
}
</style>
<template id="target-template">
<div class="parent">
<div class="target"></div>
</div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'scale',
from: 'none',
to: '1.5 1',
}, [
{at: -1, is: '0.5 1'},
{at: 0, is: 'none'},
{at: 0.25, is: '1.125 1'},
{at: 0.75, is: '1.375 1'},
{at: 1, is: '1.5 1'},
{at: 2, is: '2 1'},
]);
assertInterpolation({
property: 'scale',
from: neutralKeyframe,
to: '1.5 1',
}, [
{at: -1, is: '0.7 1'},
{at: 0, is: '1.1 1'},
{at: 0.25, is: '1.2 1'},
{at: 0.75, is: '1.4 1'},
{at: 1, is: '1.5 1'},
{at: 2, is: '1.9 1'},
]);
assertInterpolation({
property: 'scale',
from: 'unset',
to: '1.5 1',
}, [
{at: -1, is: '0.5 1'},
{at: 0, is: 'none'},
{at: 0.25, is: '1.125 1'},
{at: 0.75, is: '1.375 1'},
{at: 1, is: '1.5 1'},
{at: 2, is: '2 1'},
]);
assertInterpolation({
property: 'scale',
from: '-10 1',
to: '10 1',
}, [
{at: -1, is: '-30 1'},
{at: 0, is: '-10 1'},
{at: 0.25, is: '-5 1'},
{at: 0.75, is: '5 1'},
{at: 1, is: '10 1'},
{at: 2, is: '30 1'},
]);
assertInterpolation({
property: 'scale',
from: '-10 5',
to: '10 -5',
}, [
{at: -1, is: '-30 15'},
{at: 0, is: '-10 5'},
{at: 0.25, is: '-5 2.5'},
{at: 0.75, is: '5 -2.5'},
{at: 1, is: '10 -5'},
{at: 2, is: '30 -15'},
]);
assertInterpolation({
property: 'scale',
from: '-10 5 1',
to: '10 -5 0',
}, [
{at: -1, is: '-30 15 2'},
{at: 0, is: '-10 5 1'},
{at: 0.25, is: '-5 2.5 0.75'},
{at: 0.75, is: '5 -2.5 0.25'},
{at: 1, is: '10 -5 0'},
{at: 2, is: '30 -15 -1'},
]);
assertInterpolation({
property: 'scale',
from: '1',
to: '10 -5 0',
}, [
{at: -1, is: '-8 7 2'},
{at: 0, is: '1'},
{at: 0.25, is: '3.25 -0.5 0.75'},
{at: 0.75, is: '7.75 -3.5 0.25'},
{at: 1, is: '10 -5 0'},
{at: 2, is: '19 -11 -1'},
]);
assertInterpolation({
property: 'scale',
from: '-10 5 1',
to: '1',
}, [
{at: -1, is: '-21 9'},
{at: 0, is: '-10 5'},
{at: 0.25, is: '-7.25 4'},
{at: 0.75, is: '-1.75 2'},
{at: 1, is: '1'},
{at: 2, is: '12 -3'},
]);
assertInterpolation({
property: 'scale',
from: 'inherit',
to: '2 0.5 1',
}, [
{at: -1, is: '-1 1.5 3'},
{at: 0, is: '0.5 1 2'},
{at: 0.25, is: '0.875 0.875 1.75'},
{at: 0.75, is: '1.625 0.625 1.25'},
{at: 1, is: '2 0.5 1'},
{at: 2, is: '3.5 0 0'},
]);
assertInterpolation({
property: 'scale',
from: '2 0.5 1',
to: 'inherit',
}, [
{at: -1, is: '3.5 0 0'},
{at: 0, is: '2 0.5 1'},
{at: 0.25, is: '1.625 0.625 1.25'},
{at: 0.75, is: '0.875 0.875 1.75'},
{at: 1, is: '0.5 1 2'},
{at: 2, is: '-1 1.5 3'},
]);
assertInterpolation({
property: 'scale',
from: 'initial',
to: '2 0.5 1',
}, [
{at: -1, is: '0 1.5'},
{at: 0, is: 'none'},
{at: 0.25, is: '1.25 0.875'},
{at: 0.75, is: '1.75 0.625'},
{at: 1, is: '2 0.5'},
{at: 2, is: '3 0'},
]);
assertInterpolation({
property: 'scale',
from: '2 0.5 1',
to: 'initial',
}, [
{at: -1, is: '3 0'},
{at: 0, is: '2 0.5 1'},
{at: 0.25, is: '1.75 0.6251'},
{at: 0.75, is: '1.25 0.875'},
{at: 1, is: 'none'},
{at: 2, is: '0 1.5'},
]);
assertInterpolation({
property: 'scale',
from: 'initial',
to: 'inherit',
}, [
{at: -1, is: '1.5 1 0'},
{at: 0, is: 'none'},
{at: 0.25, is: '0.875 1 1.25'},
{at: 0.75, is: '0.625 1 1.75'},
{at: 1, is: '0.5 1 2'},
{at: 2, is: '0 1 3'},
]);
assertInterpolation({
property: 'scale',
from: 'inherit',
to: 'initial',
}, [
{at: -1, is: '0 1 3'},
{at: 0, is: '0.5 1 2'},
{at: 0.25, is: '0.625 1 1.75'},
{at: 0.75, is: '0.875 1 1.25'},
{at: 1, is: 'none'},
{at: 2, is: '1.5 1 0'},
]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/scale-interpolation.html
View file @ c71e8832
...@@ -9,9 +9,44 @@ ...@@ -9,9 +9,44 @@
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script> <script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
scale: 0.5 1 2
}
.target {
width: 10px;
height: 10px;
background-color: black;
scale: 1.1 1;
}
.expected {
background-color: green;
}
</style>
</head> </head>
<body> <body>
<template id="target-template">
<div class="parent">
<div class="target"></div>
</div>
</template>
<script> <script>
// Matching two <number> version.
test_interpolation({
property: 'scale',
from: '-10 5',
to: '10 -5',
}, [
{at: -1, expect: '-30 15'},
{at: 0, expect: '-10 5'},
{at: 0.25, expect: '-5 2.5'},
{at: 0.75, expect: '5 -2.5'},
{at: 1, expect: '10 -5'},
{at: 2, expect: '30 -15'},
]);
// Matching three <number> version.
test_interpolation({ test_interpolation({
property: 'scale', property: 'scale',
from: '2 30 400', from: '2 30 400',
...@@ -25,6 +60,7 @@ ...@@ -25,6 +60,7 @@
{at: 2, expect: '18 190 2000'} {at: 2, expect: '18 190 2000'}
]); ]);
// From three <number> to two <number>; test that it expands correctly.
test_interpolation({ test_interpolation({
property: 'scale', property: 'scale',
from: '26 17 9', from: '26 17 9',
...@@ -38,6 +74,48 @@ ...@@ -38,6 +74,48 @@
{at: 2, expect: '-22 -15 -7'} {at: 2, expect: '-22 -15 -7'}
]); ]);
// Test one <number> is expanded correctly.
test_interpolation({
property: 'scale',
from: '1',
to: '10 -5 0',
}, [
{at: -1, expect: '-8 7 2'},
{at: 0, expect: '1'},
{at: 0.25, expect: '3.25 -0.5 0.75'},
{at: 0.75, expect: '7.75 -3.5 0.25'},
{at: 1, expect: '10 -5 0'},
{at: 2, expect: '19 -11 -1'},
]);
test_interpolation({
property: 'scale',
from: '-10 5 1',
to: '1',
}, [
{at: -1, expect: '-21 9 1'},
{at: 0, expect: '-10 5 1'},
{at: 0.25, expect: '-7.25 4 1'},
{at: 0.75, expect: '-1.75 2 1'},
{at: 1, expect: '1'},
{at: 2, expect: '12 -3 1'},
]);
// Handling of the none value.
test_interpolation({
property: 'scale',
from: 'none',
to: 'none',
}, [
{at: -1, expect: 'none'},
{at: 0, expect: 'none'},
{at: 0.125, expect: 'none'},
{at: 0.875, expect: 'none'},
{at: 1, expect: 'none'},
{at: 2, expect: 'none'}
]);
// Going from none to a valid value; test that it converts properly.
test_interpolation({ test_interpolation({
property: 'scale', property: 'scale',
from: 'none', from: 'none',
...@@ -51,17 +129,114 @@ ...@@ -51,17 +129,114 @@
{at: 2, expect: '7 5 3'} {at: 2, expect: '7 5 3'}
]); ]);
// Test neutral keyframe; make sure it adds the underlying.
test_interpolation({ test_interpolation({
property: 'scale', property: 'scale',
from: 'none', from: neutralKeyframe,
to: 'none', to: '1.5 1',
}, [ }, [
{at: -1, expect: 'none'}, {at: -1, expect: '0.7 1'},
{at: 0, expect: '1.1 1'},
{at: 0.25, expect: '1.2 1'},
{at: 0.75, expect: '1.4 1'},
{at: 1, expect: '1.5 1'},
{at: 2, expect: '1.9 1'},
]);
// Test initial value; for 'scale' this is 'none'.
test_interpolation({
property: 'scale',
from: 'initial',
to: '2 0.5 1',
}, [
{at: -1, expect: '0 1.5 1'},
{at: 0, expect: 'none'}, {at: 0, expect: 'none'},
{at: 0.125, expect: 'none'}, {at: 0.25, expect: '1.25 0.875 1'},
{at: 0.875, expect: 'none'}, {at: 0.75, expect: '1.75 0.625 1'},
{at: 1, expect: '2 0.5 1'},
{at: 2, expect: '3 0 1'},
]);
test_interpolation({
property: 'scale',
from: '2 0.5 1',
to: 'initial',
}, [
{at: -1, expect: '3 0 1'},
{at: 0, expect: '2 0.5 1'},
{at: 0.25, expect: '1.75 0.6251 1'},
{at: 0.75, expect: '1.25 0.875 1'},
{at: 1, expect: 'none'}, {at: 1, expect: 'none'},
{at: 2, expect: 'none'} {at: 2, expect: '0 1.5 1'},
]);
// Test unset value; for 'scale' this is 'none'.
test_interpolation({
property: 'scale',
from: 'unset',
to: '1.5 1',
}, [
{at: -1, expect: '0.5 1'},
{at: 0, expect: 'none'},
{at: 0.25, expect: '1.125 1'},
{at: 0.75, expect: '1.375 1'},
{at: 1, expect: '1.5 1'},
{at: 2, expect: '2 1'},
]);
// Test inherited value.
test_interpolation({
property: 'scale',
from: 'inherit',
to: '2 0.5 1',
}, [
{at: -1, expect: '-1 1.5 3'},
{at: 0, expect: '0.5 1 2'},
{at: 0.25, expect: '0.875 0.875 1.75'},
{at: 0.75, expect: '1.625 0.625 1.25'},
{at: 1, expect: '2 0.5 1'},
{at: 2, expect: '3.5 0 0'},
]);
test_interpolation({
property: 'scale',
from: '2 0.5 1',
to: 'inherit',
}, [
{at: -1, expect: '3.5 0 0'},
{at: 0, expect: '2 0.5 1'},
{at: 0.25, expect: '1.625 0.625 1.25'},
{at: 0.75, expect: '0.875 0.875 1.75'},
{at: 1, expect: '0.5 1 2'},
{at: 2, expect: '-1 1.5 3'},
]);
// Test combination of initial and inherit.
test_interpolation({
property: 'scale',
from: 'initial',
to: 'inherit',
}, [
{at: -1, expect: '1.5 1 0'},
{at: 0, expect: 'none'},
{at: 0.25, expect: '0.875 1 1.25'},
{at: 0.75, expect: '0.625 1 1.75'},
{at: 1, expect: '0.5 1 2'},
{at: 2, expect: '0 1 3'},
]);
test_interpolation({
property: 'scale',
from: 'inherit',
to: 'initial',
}, [
{at: -1, expect: '0 1 3'},
{at: 0, expect: '0.5 1 2'},
{at: 0.25, expect: '0.625 1 1.75'},
{at: 0.75, expect: '0.875 1 1.25'},
{at: 1, expect: 'none'},
{at: 2, expect: '1.5 1 0'},
]); ]);
</script> </script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment