mirror of
https://github.com/servo/servo.git
synced 2025-08-15 02:15:33 +01:00
Update web-platform-tests to revision d75cd4df6722acef7224eb6edcdc52b125680dad
This commit is contained in:
WPT Sync Bot
parent
1af15054e7
commit
d18b651358
120 changed files with 3588 additions and 1362 deletions
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>shape-image-threshold interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property">
|
||||
<meta name="assert" content="shape-image-threshold supports animation by computed value">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
shape-image-threshold: 0.4;
|
||||
}
|
||||
.target {
|
||||
shape-image-threshold: 0.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'shape-image-threshold',
|
||||
from: neutralKeyframe,
|
||||
to: '0.8',
|
||||
}, [
|
||||
{at: -1.5, expect: '0.3'},
|
||||
{at: -0.5, expect: '0.5'},
|
||||
{at: 0, expect: '0.6'},
|
||||
{at: 0.5, expect: '0.7'},
|
||||
{at: 1, expect: '0.8'},
|
||||
{at: 1.5, expect: '0.9'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-image-threshold',
|
||||
from: 'initial',
|
||||
to: '0.8',
|
||||
}, [
|
||||
{at: -1.5, expect: '0'},
|
||||
{at: -0.5, expect: '0'},
|
||||
{at: 0, expect: '0'},
|
||||
{at: 0.5, expect: '0.4'},
|
||||
{at: 1, expect: '0.8'},
|
||||
{at: 1.5, expect: '1'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-image-threshold',
|
||||
from: 'inherit',
|
||||
to: '0.8',
|
||||
}, [
|
||||
{at: -1.5, expect: '0'},
|
||||
{at: -0.5, expect: '0.2'},
|
||||
{at: 0, expect: '0.4'},
|
||||
{at: 0.5, expect: '0.6'},
|
||||
{at: 1, expect: '0.8'},
|
||||
{at: 1.5, expect: '1'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-image-threshold',
|
||||
from: 'unset',
|
||||
to: '0.8',
|
||||
}, [
|
||||
{at: -1.5, expect: '0'},
|
||||
{at: -0.5, expect: '0'},
|
||||
{at: 0, expect: '0'},
|
||||
{at: 0.5, expect: '0.4'},
|
||||
{at: 1, expect: '0.8'},
|
||||
{at: 1.5, expect: '1'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-image-threshold',
|
||||
from: '0.5',
|
||||
to: '1'
|
||||
}, [
|
||||
{at: -1.5, expect: '0'},
|
||||
{at: -0.5, expect: '0.25'},
|
||||
{at: 0, expect: '0.5'},
|
||||
{at: 0.5, expect: '0.75'},
|
||||
{at: 1, expect: '1'},
|
||||
{at: 1.5, expect: '1'}
|
||||
]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>shape-margin interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property">
|
||||
<meta name="assert" content="shape-margin supports animation by computed value">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
shape-margin: 30px;
|
||||
}
|
||||
.target {
|
||||
shape-margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
test_interpolation({
|
||||
property: 'shape-margin',
|
||||
from: neutralKeyframe,
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '7px'},
|
||||
{at: 0, expect: '10px'},
|
||||
{at: 0.3, expect: '13px'},
|
||||
{at: 0.6, expect: '16px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '25px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-margin',
|
||||
from: 'initial',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '6px'},
|
||||
{at: 0.6, expect: '12px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '30px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-margin',
|
||||
from: 'inherit',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '33px'},
|
||||
{at: 0, expect: '30px'},
|
||||
{at: 0.3, expect: '27px'},
|
||||
{at: 0.6, expect: '24px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '15px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-margin',
|
||||
from: 'unset',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '6px'},
|
||||
{at: 0.6, expect: '12px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 1.5, expect: '30px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-margin',
|
||||
from: '0px',
|
||||
to: '100px'
|
||||
}, [
|
||||
{at: -0.3, expect: '0px'}, // CSS shape-margin can't be negative.
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.3, expect: '30px'},
|
||||
{at: 0.6, expect: '60px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 1.5, expect: '150px'},
|
||||
]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>shape-outside interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property">
|
||||
<meta name="assert" content="shape-outside supports animation as <basic-shape> or discrete">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<style>
|
||||
.parent {
|
||||
shape-outside: circle(80% at 30% 10%);
|
||||
}
|
||||
.target {
|
||||
shape-outside: circle(60% at 10% 30%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<body></body>
|
||||
|
||||
<script>
|
||||
/* TODO: add inset test once blend() works for it */
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: neutralKeyframe,
|
||||
to: 'circle(40% at 20% 20%)',
|
||||
}, [
|
||||
{at: -0.3, expect: 'circle(66% at 7% 33%)'},
|
||||
{at: 0, expect: 'circle(60% at 10% 30%)'},
|
||||
{at: 0.3, expect: 'circle(54% at 13% 27%)'},
|
||||
{at: 0.6, expect: 'circle(48% at 16% 24%)'},
|
||||
{at: 1, expect: 'circle(40% at 20% 20%)'},
|
||||
{at: 1.5, expect: 'circle(30% at 25% 15%)'},
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'initial',
|
||||
to: 'circle(40% at 20% 20%)',
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'inherit',
|
||||
to: 'circle(40% at 20% 20%)',
|
||||
}, [
|
||||
{at: -0.3, expect: 'circle(92% at 33% 7%)'},
|
||||
{at: 0, expect: 'circle(80% at 30% 10%)'},
|
||||
{at: 0.3, expect: 'circle(68% at 27% 13%)'},
|
||||
{at: 0.6, expect: 'circle(56% at 24% 16%)'},
|
||||
{at: 1, expect: 'circle(40% at 20% 20%)'},
|
||||
{at: 1.5, expect: 'circle(20% at 15% 25%)'},
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'unset',
|
||||
to: 'circle(40% at 20% 20%)',
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'circle(100% at 0% 0%)',
|
||||
to: 'circle(50% at 25% 25%)',
|
||||
}, [
|
||||
{at: -0.3, expect: 'circle(115% at -7.5% -7.5%)'},
|
||||
{at: 0, expect: 'circle(100% at 0% 0%)'},
|
||||
{at: 0.3, expect: 'circle(85% at 7.5% 7.5%)'},
|
||||
{at: 0.6, expect: 'circle(70% at 15% 15%)'},
|
||||
{at: 1, expect: 'circle(50% at 25% 25%)'},
|
||||
{at: 1.5, expect: 'circle(25% at 37.5% 37.5%)'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'ellipse(100% 100% at 0% 0%)',
|
||||
to: 'ellipse(50% 50% at 25% 25%)',
|
||||
}, [
|
||||
{at: -0.3, expect: 'ellipse(115% 115% at -7.5% -7.5%)'},
|
||||
{at: 0, expect: 'ellipse(100% 100% at 0% 0%)'},
|
||||
{at: 0.3, expect: 'ellipse(85% 85% at 7.5% 7.5%)'},
|
||||
{at: 0.6, expect: 'ellipse(70% 70% at 15% 15%)'},
|
||||
{at: 1, expect: 'ellipse(50% 50% at 25% 25%)'},
|
||||
{at: 1.5, expect: 'ellipse(25% 25% at 37.5% 37.5%)'}
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)',
|
||||
to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
|
||||
}, [
|
||||
{at: -0.3, expect: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'},
|
||||
{at: 0, expect: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'},
|
||||
{at: 0.3, expect: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'},
|
||||
{at: 0.6, expect: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'},
|
||||
{at: 1, expect: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'},
|
||||
{at: 1.5, expect: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'}
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)',
|
||||
to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)',
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'inset(100%)',
|
||||
to: 'inset(120%)',
|
||||
}, [
|
||||
{at: -0.3, expect: 'inset(94%)'},
|
||||
{at: 0, expect: 'inset(100%)'},
|
||||
{at: 0.3, expect: 'inset(106%)'},
|
||||
{at: 0.6, expect: 'inset(112%)'},
|
||||
{at: 1, expect: 'inset(120%)'},
|
||||
{at: 1.5, expect: 'inset(130%)'},
|
||||
]);
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'none',
|
||||
to: 'ellipse(100% 100% at 0% 0%)',
|
||||
});
|
||||
|
||||
// TODO: add intermediate keyframe tests when CSS shapes position computed values are cleaned up
|
||||
test_interpolation({
|
||||
property: 'shape-outside',
|
||||
from: 'circle(25% at right 5% bottom 15px)',
|
||||
to: 'circle(45% at right 25% bottom 35px)',
|
||||
}, [
|
||||
{at: 0.25, expect: 'circle(30% at 90% calc(-20px + 100%))'},
|
||||
{at: 0.5, expect: 'circle(35% at 85% calc(-25px + 100%))'},
|
||||
{at: 0.75, expect: 'circle(40% at 80% calc(-30px + 100%))'},
|
||||
]);
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue