Skip to content

GitLab

T
tangled
Commit 1b7bcac5 authored by Xida Chen's avatar Xida Chen Committed by Commit Bot
Browse files
Options

Port clip-interpolation.html to wpt 

Bug: 900581
Change-Id: Id7b0a8dbc03457343ce7fa8d25f30ee0da39f901
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1841071Reviewed-by: default avatarYi Gu <yigu@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702872}
parent 90c93acd
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 0 deletions
third_party/blink/web_tests/animations/interpolation/clip-interpolation.html → third_party/blink/web_tests/external/wpt/css/css-masking/animations/clip-interpolation.html
View file @ 1b7bcac5
<!DOCTYPE html> <!DOCTYPE html>
<body> <meta charset="UTF-8">
<title>clip interpolation</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property">
<meta name="assert" content="clip supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style> <style>
.container { .container {
width: 80px; width: 80px;
...@@ -8,12 +16,15 @@ ...@@ -8,12 +16,15 @@
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
} }
.container:nth-child(2n) { .container:nth-child(2n) {
background: green; background: green;
} }
.parent { .parent {
clip: rect(100px, 0px, 100px, 0px); clip: rect(100px, 0px, 100px, 0px);
} }
.target { .target {
width: 80px; width: 80px;
height: 80px; height: 80px;
...@@ -23,81 +34,82 @@ ...@@ -23,81 +34,82 @@
clip: rect(0px, 100px, 0px, 100px); clip: rect(0px, 100px, 0px, 100px);
} }
</style> </style>
<body>
<template id="target-template"> <template id="target-template">
<div class="container"><div class="target"></div></div> <div class="container"><div class="target"></div></div>
</template> </template>
<script src="resources/interpolation-test.js"></script>
<script> <script>
assertInterpolation({ test_interpolation({
property: 'clip', property: 'clip',
from: neutralKeyframe, from: neutralKeyframe,
to: 'rect(20px, 20px, 20px, 20px)', to: 'rect(20px, 20px, 20px, 20px)',
}, [ }, [
{at: -1, is: 'rect(-20px 180px -20px 180px)'}, {at: -1, expect: 'rect(-20px 180px -20px 180px)'},
{at: 0, is: 'rect(0px 100px 0px 100px)'}, {at: 0, expect: 'rect(0px 100px 0px 100px)'},
{at: 0.25, is: 'rect(5px 80px 5px 80px)'}, {at: 0.25, expect: 'rect(5px 80px 5px 80px)'},
{at: 0.75, is: 'rect(15px 40px 15px 40px)'}, {at: 0.75, expect: 'rect(15px 40px 15px 40px)'},
{at: 1, is: 'rect(20px 20px 20px 20px)'}, {at: 1, expect: 'rect(20px 20px 20px 20px)'},
{at: 2, is: 'rect(40px -60px 40px -60px)'}, {at: 2, expect: 'rect(40px -60px 40px -60px)'},
]); ]);
assertNoInterpolation({ test_no_interpolation({
property: 'clip', property: 'clip',
from: 'initial', from: 'initial',
to: 'rect(20px, 20px, 20px, 20px)', to: 'rect(20px, 20px, 20px, 20px)',
}); });
assertInterpolation({ test_interpolation({
property: 'clip', property: 'clip',
from: 'inherit', from: 'inherit',
to: 'rect(20px, 20px, 20px, 20px)', to: 'rect(20px, 20px, 20px, 20px)',
}, [ }, [
{at: -1, is: 'rect(180px -20px 180px -20px)'}, {at: -1, expect: 'rect(180px -20px 180px -20px)'},
{at: 0, is: 'rect(100px 0px 100px 0px)'}, {at: 0, expect: 'rect(100px 0px 100px 0px)'},
{at: 0.25, is: 'rect(80px 5px 80px 5px)'}, {at: 0.25, expect: 'rect(80px 5px 80px 5px)'},
{at: 0.75, is: 'rect(40px 15px 40px 15px)'}, {at: 0.75, expect: 'rect(40px 15px 40px 15px)'},
{at: 1, is: 'rect(20px 20px 20px 20px)'}, {at: 1, expect: 'rect(20px 20px 20px 20px)'},
{at: 2, is: 'rect(-60px 40px -60px 40px)'}, {at: 2, expect: 'rect(-60px 40px -60px 40px)'},
]); ]);
assertNoInterpolation({ test_no_interpolation({
property: 'clip', property: 'clip',
from: 'unset', from: 'unset',
to: 'rect(20px, 20px, 20px, 20px)', to: 'rect(20px, 20px, 20px, 20px)',
}); });
assertInterpolation({ test_interpolation({
property: 'clip', property: 'clip',
from: 'rect(0px, 75px, 80px, 10px)', from: 'rect(0px, 75px, 80px, 10px)',
to: 'rect(0px, 100px, 90px, 5px)' to: 'rect(0px, 100px, 90px, 5px)'
}, [ }, [
{at: -1, is: 'rect(0px, 50px, 70px, 15px)'}, {at: -1, expect: 'rect(0px, 50px, 70px, 15px)'},
{at: 0, is: 'rect(0px, 75px, 80px, 10px)'}, {at: 0, expect: 'rect(0px, 75px, 80px, 10px)'},
{at: 0.25, is: 'rect(0px, 81.25px, 82.5px, 8.75px)'}, {at: 0.25, expect: 'rect(0px, 81.25px, 82.5px, 8.75px)'},
{at: 0.75, is: 'rect(0px, 93.75px, 87.5px, 6.25px)'}, {at: 0.75, expect: 'rect(0px, 93.75px, 87.5px, 6.25px)'},
{at: 1, is: 'rect(0px, 100px, 90px, 5px)'}, {at: 1, expect: 'rect(0px, 100px, 90px, 5px)'},
{at: 2, is: 'rect(0px, 125px, 100px, 0px)'}, {at: 2, expect: 'rect(0px, 125px, 100px, 0px)'},
]); ]);
assertNoInterpolation({ test_no_interpolation({
property: 'clip', property: 'clip',
from: 'rect(auto, auto, auto, 10px)', from: 'rect(auto, auto, auto, 10px)',
to: 'rect(20px, 50px, 50px, auto)' to: 'rect(20px, 50px, 50px, auto)'
}); });
assertNoInterpolation({ test_no_interpolation({
property: 'clip', property: 'clip',
from: 'rect(auto, 0px, auto, 10px)', from: 'rect(auto, 0px, auto, 10px)',
to: 'rect(auto, 50px, 50px, auto)' to: 'rect(auto, 50px, 50px, auto)'
}); });
assertNoInterpolation({ test_no_interpolation({
property: 'clip', property: 'clip',
from: 'auto', from: 'auto',
to: 'rect(0px, 50px, 50px, 0px)' to: 'rect(0px, 50px, 50px, 0px)'
}); });
assertNoInterpolation({ test_no_interpolation({
property: 'clip', property: 'clip',
from: 'rect(0px, 50px, 50px, 0px)', from: 'rect(0px, 50px, 50px, 0px)',
to: 'auto' to: 'auto'
......
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