mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
web animation updates
This commit is contained in:
56
scripts/vendor/web-animations-js/test/blink/interpolation/width-interpolation.html
vendored
Executable file
56
scripts/vendor/web-animations-js/test/blink/interpolation/width-interpolation.html
vendored
Executable file
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: black solid 1px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
background-color: white;
|
||||
}
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
}
|
||||
.replica {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<template id="target-template">
|
||||
<div class="container">
|
||||
<div class="target"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script src="../testharness/testharness.js"></script>
|
||||
<script src="../testharness/testharnessreport.js"></script>
|
||||
<script src="resources/interpolation-test.js"></script>
|
||||
<script>
|
||||
assertInterpolation({
|
||||
property: 'width',
|
||||
from: '0px',
|
||||
to: '100px'
|
||||
}, [
|
||||
{at: -0.3, is: '0px'}, // CSS width can't be negative.
|
||||
{at: 0, is: '0px'},
|
||||
{at: 0.3, is: '30px'},
|
||||
{at: 0.6, is: '60px'},
|
||||
{at: 1, is: '100px'},
|
||||
{at: 1.5, is: '150px'}
|
||||
]);
|
||||
assertInterpolation({
|
||||
property: 'width',
|
||||
from: '10px',
|
||||
to: '100%'
|
||||
}, [
|
||||
{at: -0.3, is: '0px'}, // CSS width can't be negative.
|
||||
{at: 0, is: '10px'},
|
||||
{at: 0.3, is: '37px'},
|
||||
{at: 0.6, is: '64px'},
|
||||
{at: 1, is: '100px'},
|
||||
{at: 1.5, is: '145px'}
|
||||
]);
|
||||
</script>
|
||||
</body>
|
Reference in New Issue
Block a user