Skip to content

GitLab

T
tangled
Commit 836967d5 authored by Xida Chen's avatar Xida Chen Committed by Commit Bot
Browse files
Options

Port perspective and perspective-origin interpolation tests to wpt 

The overflow regression tests was not moved because of this example:
https://chromium-review.googlesource.com/c/chromium/src/+/1804695

Firefox falls partially for some cases in perspective
interpolation, where the expectation is 'none' and Firefox produces
0px. The spec says the value must be either 'none' or positive values.


Bug: 900581
Change-Id: I8562cd51476178919ecf9a393f0d169eb7244461
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1808585Reviewed-by: default avatarStephen McGruer <smcgruer@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697323}
parent 16ea754e
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 65 deletions
third_party/blink/web_tests/animations/interpolation/perspective-origin-interpolation.html
View file @ 836967d5
...@@ -33,71 +33,6 @@ ...@@ -33,71 +33,6 @@
</template> </template>
<script src="resources/interpolation-test.js"></script> <script src="resources/interpolation-test.js"></script>
<script> <script>
assertInterpolation({
property: 'perspective-origin',
from: neutralKeyframe,
to: '20px 20px',
}, [
{at: -0.3, is: '7px 33px'},
{at: 0, is: '10px 30px'},
{at: 0.3, is: '13px 27px'},
{at: 0.6, is: '16px 24px'},
{at: 1, is: '20px 20px'},
{at: 1.5, is: '25px 15px'},
]);
assertInterpolation({
property: 'perspective-origin',
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: 1, is: '20px 20px'},
{at: 1.5, is: '17.5px 17.5px'},
]);
assertInterpolation({
property: 'perspective-origin',
from: 'inherit',
to: '20px 20px',
}, [
{at: -0.3, is: '33px 7px'},
{at: 0, is: '30px 10px'},
{at: 0.3, is: '27px 13px'},
{at: 0.6, is: '24px 16px'},
{at: 1, is: '20px 20px'},
{at: 1.5, is: '15px 25px'},
]);
assertInterpolation({
property: 'perspective-origin',
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: 1, is: '20px 20px'},
{at: 1.5, is: '17.5px 17.5px'},
]);
assertInterpolation({
property: 'perspective-origin',
from: '0% 50%',
to: '100% 150%'
}, [
{at: -0.3, is: '-30% 20%'},
{at: 0, is: '0% 50%'},
{at: 0.3, is: '30% 80%'},
{at: 0.6, is: '60% 110%'},
{at: 1, is: '100% 150%'},
{at: 1.5, is: '150% 200%'}
]);
// Regression test for https://crbug.com/984700 // Regression test for https://crbug.com/984700
assertInterpolation({ assertInterpolation({
property: 'perspective-origin', property: 'perspective-origin',
......
third_party/blink/web_tests/animations/interpolation/perspective-interpolation.html → third_party/blink/web_tests/external/wpt/css/css-transforms/animation/perspective-interpolation.html
View file @ 836967d5
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="UTF-8"> <meta charset="utf-8">
<title> perspective interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective">
<meta name="assert" content="perspective supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style> <style>
.parent { .parent {
perspective: 30px; perspective: 30px;
} }
.target { .target {
display: inline-block;
margin-top: 50px;
margin-bottom: 25px;
perspective: 10px; perspective: 10px;
} }
.transformed { .transformed {
...@@ -29,66 +34,65 @@ ...@@ -29,66 +34,65 @@
<template id="target-template"> <template id="target-template">
<div><div class="transformed"></div></div> <div><div class="transformed"></div></div>
</template> </template>
<script src="resources/interpolation-test.js"></script>
<script> <script>
assertInterpolation({ test_interpolation({
property: 'perspective', property: 'perspective',
from: neutralKeyframe, from: neutralKeyframe,
to: '20px', to: '20px',
}, [ }, [
{at: -20, is: 'none'}, {at: -20, expect: 'none'},
{at: -1, is: 'none'}, {at: -1, expect: 'none'},
{at: -0.3, is: '7px'}, {at: -0.3, expect: '7px'},
{at: 0, is: '10px'}, {at: 0, expect: '10px'},
{at: 0.3, is: '13px'}, {at: 0.3, expect: '13px'},
{at: 0.6, is: '16px'}, {at: 0.6, expect: '16px'},
{at: 1, is: '20px'}, {at: 1, expect: '20px'},
{at: 1.5, is: '25px'}, {at: 1.5, expect: '25px'},
]); ]);
assertNoInterpolation({ test_no_interpolation({
property: 'perspective', property: 'perspective',
from: 'initial', from: 'initial',
to: '20px', to: '20px',
}); });
assertInterpolation({ test_interpolation({
property: 'perspective', property: 'perspective',
from: 'inherit', from: 'inherit',
to: '20px', to: '20px',
}, [ }, [
{at: -20, is: '230px'}, {at: -20, expect: '230px'},
{at: -1, is: '40px'}, {at: -1, expect: '40px'},
{at: -0.3, is: '33px'}, {at: -0.3, expect: '33px'},
{at: 0, is: '30px'}, {at: 0, expect: '30px'},
{at: 0.3, is: '27px'}, {at: 0.3, expect: '27px'},
{at: 0.6, is: '24px'}, {at: 0.6, expect: '24px'},
{at: 1, is: '20px'}, {at: 1, expect: '20px'},
{at: 1.5, is: '15px'}, {at: 1.5, expect: '15px'},
]); ]);
assertNoInterpolation({ test_no_interpolation({
property: 'perspective', property: 'perspective',
from: 'unset', from: 'unset',
to: '20px', to: '20px',
}); });
assertInterpolation({ test_interpolation({
property: 'perspective', property: 'perspective',
from: '50px', from: '50px',
to: '100px', to: '100px',
}, [ }, [
{at: -20, is: 'none'}, // perspective does not accept 0 or negative values {at: -20, expect: 'none'}, // perspective does not accept 0 or negative values
{at: -1, is: 'none'}, // perspective does not accept 0 or negative values {at: -1, expect: 'none'}, // perspective does not accept 0 or negative values
{at: -0.3, is: '35px'}, {at: -0.3, expect: '35px'},
{at: 0, is: '50px'}, {at: 0, expect: '50px'},
{at: 0.3, is: '65px'}, {at: 0.3, expect: '65px'},
{at: 0.6, is: '80px'}, {at: 0.6, expect: '80px'},
{at: 1, is: '100px'}, {at: 1, expect: '100px'},
{at: 1.5, is: '125px'}, {at: 1.5, expect: '125px'},
]); ]);
assertNoInterpolation({ test_no_interpolation({
property: 'perspective', property: 'perspective',
from: '50px', from: '50px',
to: 'none', to: 'none',
......
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/perspective-origin-interpolation.html 0 → 100644
View file @ 836967d5
<!DOCTYPE html>
<meta charset="UTF-8">
<title>perspective-origin interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property">
<meta name="assert" content="perspective-origin supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.parent {
perspective-origin: 30px 10px;
}
.target {
display: inline-block;
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;
}
</style>
<body>
<template id="target-template">
<div><div class="transformed"></div></div>
</template>
<script>
test_interpolation({
property: 'perspective-origin',
from: neutralKeyframe,
to: '20px 20px',
}, [
{at: -0.3, expect: '7px 33px'},
{at: 0, expect: '10px 30px'},
{at: 0.3, expect: '13px 27px'},
{at: 0.6, expect: '16px 24px'},
{at: 1, expect: '20px 20px'},
{at: 1.5, expect: '25px 15px'},
]);
test_interpolation({
property: 'perspective-origin',
from: 'initial',
to: '20px 20px',
}, [
{at: -0.3, expect: '26.5px 26.5px'},
{at: 0, expect: '25px 25px'},
{at: 0.3, expect: '23.5px 23.5px'},
{at: 0.6, expect: '22px 22px'},
{at: 1, expect: '20px 20px'},
{at: 1.5, expect: '17.5px 17.5px'},
]);
test_interpolation({
property: 'perspective-origin',
from: 'inherit',
to: '20px 20px',
}, [
{at: -0.3, expect: '33px 7px'},
{at: 0, expect: '30px 10px'},
{at: 0.3, expect: '27px 13px'},
{at: 0.6, expect: '24px 16px'},
{at: 1, expect: '20px 20px'},
{at: 1.5, expect: '15px 25px'},
]);
test_interpolation({
property: 'perspective-origin',
from: 'unset',
to: '20px 20px',
}, [
{at: -0.3, expect: '26.5px 26.5px'},
{at: 0, expect: '25px 25px'},
{at: 0.3, expect: '23.5px 23.5px'},
{at: 0.6, expect: '22px 22px'},
{at: 1, expect: '20px 20px'},
{at: 1.5, expect: '17.5px 17.5px'},
]);
test_interpolation({
property: 'perspective-origin',
from: '0% 50%',
to: '100% 150%'
}, [
{at: -0.3, expect: '-30% 20%'},
{at: 0, expect: '0% 50%'},
{at: 0.3, expect: '30% 80%'},
{at: 0.6, expect: '60% 110%'},
{at: 1, expect: '100% 150%'},
{at: 1.5, expect: '150% 200%'}
]);
</script>
</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