Skip to content

GitLab

T
tangled
Commit 8d24de75 authored by Xida Chen's avatar Xida Chen Committed by Commit Bot
Browse files
Options

Port rotate-interpolation.html to wpt 

There is already a rotate-interpolation.html under wpt/. This CL adds
more test cases to it.

Bug: 900581
Change-Id: I4bfc7678d2ec266e243394f4886c0ad7f03497d7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1832561Reviewed-by: default avatarYi Gu <yigu@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#701546}
parent 7e365259
Hide whitespace changes
Inline Side-by-side
Showing with 232 additions and 230 deletions
third_party/blink/web_tests/animations/interpolation/rotate-interpolation.html deleted 100644 → 0
View file @ 7e365259
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
rotate: 90deg;
}
.target {
width: 40px;
height: 20px;
background-color: grey;
rotate: 10deg;
}
.expected {
background-color: green;
}
</style>
<template id="target-template">
<div class="parent">
<div class="target">Text</div>
</div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'rotate',
from: 'none',
to: '30deg',
}, [
{at: -1, is: '-30deg'},
{at: 0, is: 'none'},
{at: 0.25, is: '7.5deg'},
{at: 0.75, is: '22.5deg'},
{at: 1, is: '30deg'},
{at: 2, is: '60deg'},
]);
assertInterpolation({
property: 'rotate',
from: neutralKeyframe,
to: '30deg',
}, [
{at: -1, is: '-10deg'},
{at: 0, is: '10deg'},
{at: 0.25, is: '15deg'},
{at: 0.75, is: '25deg'},
{at: 1, is: '30deg'},
{at: 2, is: '50deg'},
]);
assertInterpolation({
property: 'rotate',
from: 'inherit',
to: '270deg',
}, [
{at: -1, is: '-90deg'},
{at: 0, is: '90deg'},
{at: 0.25, is: '135deg'},
{at: 0.75, is: '225deg'},
{at: 1, is: '270deg'},
{at: 2, is: '450deg'},
]);
assertInterpolation({
property: 'rotate',
from: 'unset',
to: '30deg',
}, [
{at: -1, is: '-30deg'},
{at: 0, is: 'none'},
{at: 0.25, is: '7.5deg'},
{at: 0.75, is: '22.5deg'},
{at: 1, is: '30deg'},
{at: 2, is: '60deg'},
]);
assertInterpolation({
property: 'rotate',
from: '100deg',
to: '-100deg',
}, [
{at: -1, is: '300deg'},
{at: 0, is: '100deg'},
{at: 0.25, is: '50deg'},
{at: 0.75, is: '-50deg'},
{at: 1, is: '-100deg'},
{at: 2, is: '-300deg'},
]);
assertInterpolation({
property: 'rotate',
from: '0 1 0 100deg',
to: '0 1 0 -100deg',
}, [
{at: -1, is: '0 1 0 300deg'},
{at: 0, is: '0 1 0 100deg'},
{at: 0.25, is: '0 1 0 50deg'},
{at: 0.75, is: '0 1 0 -50deg'},
{at: 1, is: '0 1 0 -100deg'},
{at: 2, is: '0 1 0 -300deg'},
]);
assertInterpolation({
property: 'rotate',
from: '1 -2.5 3.64 100deg',
to: '1 -2.5 3.64 -100deg',
}, [
{at: -1, is: '1 -2.5 3.64 300deg'},
{at: 0, is: '1 -2.5 3.64 100deg'},
{at: 0.25, is: '1 -2.5 3.64 50deg'},
{at: 0.75, is: '1 -2.5 3.64 -50deg'},
{at: 1, is: '1 -2.5 3.64 -100deg'},
{at: 2, is: '1 -2.5 3.64 -300deg'},
]);
assertInterpolation({
property: 'rotate',
from: '1 0 0 0deg',
to: '0 1 0 10deg',
}, [
{at: -1, is: '0 1 0 -10deg'},
{at: 0, is: '1 0 0 0deg'},
{at: 0.25, is: '0 1 0 2.5deg'},
{at: 0.75, is: '0 1 0 7.5deg'},
{at: 1, is: '0 1 0 10deg'},
{at: 2, is: '0 1 0 20deg'},
]);
assertInterpolation({
property: 'rotate',
from: '1 1 0 90deg',
to: '0 1 1 135deg',
}, [
{at: -1, is: '0.67 -0.06 -0.74 124.97deg'},
{at: 0, is: '1 1 0 90deg'},
{at: 0.25, is: '0.54 0.8 0.26 94.83deg'},
{at: 0.75, is: '0.17 0.78 0.61 118.68deg'},
{at: 1, is: '0 1 1 135deg'},
{at: 2, is: '0.52 -0.29 -0.81 151.04deg'},
]);
assertInterpolation({
property: 'rotate',
from: '0 1 0 0deg',
to: '1 0 0 450deg',
}, [
{at: -1, is: '1 0 0 -450deg'},
{at: 0, is: '0 1 0 0deg'},
{at: 0.25, is: '1 0 0 112.5deg'},
{at: 0.75, is: '1 0 0 337.5deg'},
{at: 1, is: '1 0 0 450deg'},
{at: 2, is: '1 0 0 900deg'},
]);
assertInterpolation({
property: 'rotate',
from: '1 0 0 450deg',
to: '0 1 0 0deg',
}, [
{at: -1, is: '1 0 0 900deg'},
{at: 0, is: '1 0 0 450deg'},
{at: 0.25, is: '1 0 0 337.5deg'},
{at: 0.75, is: '1 0 0 112.5deg'},
{at: 1, is: '0 1 0 0deg'},
{at: 2, is: '1 0 0 -450deg'},
]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/rotate-interpolation.html
View file @ 8d24de75
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rotate interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
<meta name="assert" content="rotate supports animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
</head>
<body>
<script>
test_interpolation({
property: 'rotate',
from: '100deg',
to: '180deg',
}, [
{at: -1, expect: '20deg'},
{at: 0, expect: '100deg'},
{at: 0.125, expect: '110deg'},
{at: 0.875, expect: '170deg'},
{at: 1, expect: '180deg'},
{at: 2, expect: '260deg'}
]);
test_interpolation({
property: 'rotate',
from: '45deg',
to: '-1 1 0 60deg',
}, [
{at: -1, expect: '0.447214 -0.447214 0.774597 104.478deg'},
{at: 0, expect: '45deg'},
{at: 0.125, expect: '-0.136456 0.136456 0.981203 40.6037deg'},
{at: 0.875, expect: '-0.70246 0.70246 0.114452 53.1994deg'},
{at: 1, expect: '-1 1 0 60deg'},
{at: 2, expect: '-0.637897 0.637897 -0.431479 124.975deg'}
]);
test_interpolation({
property: 'rotate',
from: 'none',
to: '7 -8 9 400grad',
}, [
{at: -1, expect: '7 -8 9 -400grad'},
{at: 0, expect: 'none'},
{at: 0.125, expect: '7 -8 9 50grad'},
{at: 0.875, expect: '7 -8 9 350grad'},
{at: 1, expect: '7 -8 9 400grad'},
{at: 2, expect: '7 -8 9 800grad'}
]);
test_interpolation({
property: 'rotate',
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'}
]);
</script>
</body>
<head>
<meta charset="utf-8">
<title>rotate interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
<meta name="assert" content="rotate supports animation.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
</head>
<style>
.parent {
rotate: 90deg;
}
.target {
width: 40px;
height: 20px;
background-color: grey;
rotate: 10deg;
}
.expected {
background-color: green;
}
</style>
<template id="target-template">
<div class="parent">
<div class="target">Text</div>
</div>
</template>
<body>
<script>
test_interpolation({
property: 'rotate',
from: '100deg',
to: '180deg',
}, [
{at: -1, expect: '20deg'},
{at: 0, expect: '100deg'},
{at: 0.125, expect: '110deg'},
{at: 0.875, expect: '170deg'},
{at: 1, expect: '180deg'},
{at: 2, expect: '260deg'}
]);
test_interpolation({
property: 'rotate',
from: '45deg',
to: '-1 1 0 60deg',
}, [
{at: -1, expect: '0.447214 -0.447214 0.774597 104.478deg'},
{at: 0, expect: '45deg'},
{at: 0.125, expect: '-0.136456 0.136456 0.981203 40.6037deg'},
{at: 0.875, expect: '-0.70246 0.70246 0.114452 53.1994deg'},
{at: 1, expect: '-1 1 0 60deg'},
{at: 2, expect: '-0.637897 0.637897 -0.431479 124.975deg'}
]);
test_interpolation({
property: 'rotate',
from: 'none',
to: '7 -8 9 400grad',
}, [
{at: -1, expect: '7 -8 9 -400grad'},
{at: 0, expect: 'none'},
{at: 0.125, expect: '7 -8 9 50grad'},
{at: 0.875, expect: '7 -8 9 350grad'},
{at: 1, expect: '7 -8 9 400grad'},
{at: 2, expect: '7 -8 9 800grad'}
]);
test_interpolation({
property: 'rotate',
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'}
]);
test_interpolation({
property: 'rotate',
from: 'none',
to: '30deg',
}, [
{at: -1, expect: '-30deg'},
{at: 0, expect: 'none'},
{at: 0.25, expect: '7.5deg'},
{at: 0.75, expect: '22.5deg'},
{at: 1, expect: '30deg'},
{at: 2, expect: '60deg'},
]);
test_interpolation({
property: 'rotate',
from: neutralKeyframe,
to: '30deg',
}, [
{at: -1, expect: '-10deg'},
{at: 0, expect: '10deg'},
{at: 0.25, expect: '15deg'},
{at: 0.75, expect: '25deg'},
{at: 1, expect: '30deg'},
{at: 2, expect: '50deg'},
]);
test_interpolation({
property: 'rotate',
from: 'inherit',
to: '270deg',
}, [
{at: -1, expect: '-90deg'},
{at: 0, expect: '90deg'},
{at: 0.25, expect: '135deg'},
{at: 0.75, expect: '225deg'},
{at: 1, expect: '270deg'},
{at: 2, expect: '450deg'},
]);
test_interpolation({
property: 'rotate',
from: 'unset',
to: '30deg',
}, [
{at: -1, expect: '-30deg'},
{at: 0, expect: 'none'},
{at: 0.25, expect: '7.5deg'},
{at: 0.75, expect: '22.5deg'},
{at: 1, expect: '30deg'},
{at: 2, expect: '60deg'},
]);
test_interpolation({
property: 'rotate',
from: '100deg',
to: '-100deg',
}, [
{at: -1, expect: '300deg'},
{at: 0, expect: '100deg'},
{at: 0.25, expect: '50deg'},
{at: 0.75, expect: '-50deg'},
{at: 1, expect: '-100deg'},
{at: 2, expect: '-300deg'},
]);
test_interpolation({
property: 'rotate',
from: '0 1 0 100deg',
to: '0 1 0 -100deg',
}, [
{at: -1, expect: '0 1 0 300deg'},
{at: 0, expect: '0 1 0 100deg'},
{at: 0.25, expect: '0 1 0 50deg'},
{at: 0.75, expect: '0 1 0 -50deg'},
{at: 1, expect: '0 1 0 -100deg'},
{at: 2, expect: '0 1 0 -300deg'},
]);
test_interpolation({
property: 'rotate',
from: '1 -2.5 3.64 100deg',
to: '1 -2.5 3.64 -100deg',
}, [
{at: -1, expect: '1 -2.5 3.64 300deg'},
{at: 0, expect: '1 -2.5 3.64 100deg'},
{at: 0.25, expect: '1 -2.5 3.64 50deg'},
{at: 0.75, expect: '1 -2.5 3.64 -50deg'},
{at: 1, expect: '1 -2.5 3.64 -100deg'},
{at: 2, expect: '1 -2.5 3.64 -300deg'},
]);
test_interpolation({
property: 'rotate',
from: '1 0 0 0deg',
to: '0 1 0 10deg',
}, [
{at: -1, expect: '0 1 0 -10deg'},
{at: 0, expect: '1 0 0 0deg'},
{at: 0.25, expect: '0 1 0 2.5deg'},
{at: 0.75, expect: '0 1 0 7.5deg'},
{at: 1, expect: '0 1 0 10deg'},
{at: 2, expect: '0 1 0 20deg'},
]);
test_interpolation({
property: 'rotate',
from: '1 1 0 90deg',
to: '0 1 1 135deg',
}, [
{at: -1, expect: '0.67 -0.06 -0.74 124.97deg'},
{at: 0, expect: '1 1 0 90deg'},
{at: 0.25, expect: '0.54 0.8 0.26 94.83deg'},
{at: 0.75, expect: '0.17 0.78 0.61 118.68deg'},
{at: 1, expect: '0 1 1 135deg'},
{at: 2, expect: '0.52 -0.29 -0.81 151.04deg'},
]);
test_interpolation({
property: 'rotate',
from: '0 1 0 0deg',
to: '1 0 0 450deg',
}, [
{at: -1, expect: '1 0 0 -450deg'},
{at: 0, expect: '0 1 0 0deg'},
{at: 0.25, expect: '1 0 0 112.5deg'},
{at: 0.75, expect: '1 0 0 337.5deg'},
{at: 1, expect: '1 0 0 450deg'},
{at: 2, expect: '1 0 0 900deg'},
]);
test_interpolation({
property: 'rotate',
from: '1 0 0 450deg',
to: '0 1 0 0deg',
}, [
{at: -1, expect: '1 0 0 900deg'},
{at: 0, expect: '1 0 0 450deg'},
{at: 0.25, expect: '1 0 0 337.5deg'},
{at: 0.75, expect: '1 0 0 112.5deg'},
{at: 1, expect: '0 1 0 0deg'},
{at: 2, expect: '1 0 0 -450deg'},
]);
</script>
</body>
</html>
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