mirror of
https://github.com/servo/servo.git
synced 2025-08-14 18:05:36 +01:00
Update web-platform-tests to revision 74efe51f1faaa2bf3ff91c10f05a4ad9615a1553
This commit is contained in:
WPT Sync Bot
parent
267ce462d8
commit
dacb7e9002
49 changed files with 2889 additions and 59 deletions
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-bottom-left-radius composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
|
||||
<meta name="assert" content="border-bottom-left-radius 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-bottom-left-radius',
|
||||
underlying: '40px 40px',
|
||||
addFrom: '60px 60px',
|
||||
addTo: '160px 160px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.25, expect: '125px'},
|
||||
{at: 0.5, expect: '150px'},
|
||||
{at: 0.75, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-left-radius',
|
||||
underlying: '40px 140px',
|
||||
replaceFrom: '100px 120px',
|
||||
addTo: '160px 60px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 100px'},
|
||||
{at: 0, expect: '100px 120px'},
|
||||
{at: 0.25, expect: '125px 140px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 180px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px 220px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-left-radius',
|
||||
underlying: '40px 60px',
|
||||
addFrom: '60px 140px',
|
||||
replaceTo: '200px 120px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 220px'},
|
||||
{at: 0, expect: '100px 200px'},
|
||||
{at: 0.25, expect: '125px 180px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 140px'},
|
||||
{at: 1, expect: '200px 120px'},
|
||||
{at: 1.25, expect: '225px 100px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-bottom-right-radius composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
|
||||
<meta name="assert" content="border-bottom-right-radius 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-bottom-right-radius',
|
||||
underlying: '40px 40px',
|
||||
addFrom: '60px 60px',
|
||||
addTo: '160px 160px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.25, expect: '125px'},
|
||||
{at: 0.5, expect: '150px'},
|
||||
{at: 0.75, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-right-radius',
|
||||
underlying: '40px 140px',
|
||||
replaceFrom: '100px 120px',
|
||||
addTo: '160px 60px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 100px'},
|
||||
{at: 0, expect: '100px 120px'},
|
||||
{at: 0.25, expect: '125px 140px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 180px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px 220px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-right-radius',
|
||||
underlying: '40px 60px',
|
||||
addFrom: '60px 140px',
|
||||
replaceTo: '200px 120px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 220px'},
|
||||
{at: 0, expect: '100px 200px'},
|
||||
{at: 0.25, expect: '125px 180px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 140px'},
|
||||
{at: 1, expect: '200px 120px'},
|
||||
{at: 1.25, expect: '225px 100px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-bottom-width composition</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties">
|
||||
<meta name="assert" content="border-bottom-width 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-bottom-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-width',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-width',
|
||||
underlying: '10em',
|
||||
addFrom: '100px',
|
||||
addTo: '20em',
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(130px + 4em)'},
|
||||
{at: 0, expect: 'calc(100px + 10em)'},
|
||||
{at: 0.5, expect: 'calc(50px + 20em)'},
|
||||
{at: 1, expect: '30em'},
|
||||
{at: 1.5, expect: 'calc(-50px + 40em)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-bottom-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-outset composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-outset">
|
||||
<meta name="assert" content="border-image-outset 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '1 2 3 4',
|
||||
addFrom: '1 2 3 4',
|
||||
addTo: '101 102 103 104',
|
||||
}, [
|
||||
{at: -0.25, expect: '0'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6 8'},
|
||||
{at: 0.25, expect: '27 29 31 33'},
|
||||
{at: 0.5, expect: '52 54 56 58'},
|
||||
{at: 0.75, expect: '77 79 81 83'},
|
||||
{at: 1, expect: '102 104 106 108'},
|
||||
{at: 1.25, expect: '127 129 131 133'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '100 200 300 400',
|
||||
addFrom: '100',
|
||||
addTo: '200 300 500',
|
||||
}, [
|
||||
{at: -0.25, expect: '175 250 300 450'},
|
||||
{at: 0, expect: '200 300 400 500'},
|
||||
{at: 0.25, expect: '225 350 500 550'},
|
||||
{at: 0.5, expect: '250 400 600 600'},
|
||||
{at: 0.75, expect: '275 450 700 650'},
|
||||
{at: 1, expect: '300 500 800 700'},
|
||||
{at: 1.25, expect: '325 550 900 750'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '1 2 3px 4px',
|
||||
addFrom: '1 2 3px 4px',
|
||||
addTo: '101 102 103px 104px',
|
||||
}, [
|
||||
{at: -0.25, expect: '0 0 0px 0px'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6px 8px'},
|
||||
{at: 0.25, expect: '27 29 31px 33px'},
|
||||
{at: 0.5, expect: '52 54 56px 58px'},
|
||||
{at: 0.75, expect: '77 79 81px 83px'},
|
||||
{at: 1, expect: '102 104 106px 108px'},
|
||||
{at: 1.25, expect: '127 129 131px 133px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10px 20px',
|
||||
addFrom: '190px 180px 290px 280px',
|
||||
addTo: '90px 80px',
|
||||
}, [
|
||||
{at: -0.25, expect: '225px 225px 350px 350px'},
|
||||
{at: 0, expect: '200px 200px 300px 300px'},
|
||||
{at: 0.25, expect: '175px 175px 250px 250px'},
|
||||
{at: 0.5, expect: '150px 150px 200px 200px'},
|
||||
{at: 0.75, expect: '125px 125px 150px 150px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 1.25, expect: '75px 75px 50px 50px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10 20px',
|
||||
replaceFrom: '100 100px',
|
||||
addTo: '190 180px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75 75px'},
|
||||
{at: 0, expect: '100 100px'},
|
||||
{at: 0.25, expect: '125 125px'},
|
||||
{at: 0.5, expect: '150 150px'},
|
||||
{at: 0.75, expect: '175 175px'},
|
||||
{at: 1, expect: '200 200px'},
|
||||
{at: 1.25, expect: '225 225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10px 20',
|
||||
addFrom: '90px 80',
|
||||
replaceTo: '0px 0 0px 0',
|
||||
}, [
|
||||
{at: -0.25, expect: '125px 125'},
|
||||
{at: 0, expect: '100px 100'},
|
||||
{at: 0.25, expect: '75px 75'},
|
||||
{at: 0.5, expect: '50px 50'},
|
||||
{at: 0.75, expect: '25px 25'},
|
||||
{at: 1, expect: '0px 0'},
|
||||
{at: 1.25, expect: '0px 0'}, // Non-negative.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10 20',
|
||||
addFrom: '100px 150px',
|
||||
addTo: '200px 250px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 125px'},
|
||||
{at: 0, expect: '100px 150px'},
|
||||
{at: 0.25, expect: '125px 175px'},
|
||||
{at: 0.5, expect: '150px 200px'},
|
||||
{at: 0.75, expect: '175px 225px'},
|
||||
{at: 1, expect: '200px 250px'},
|
||||
{at: 1.25, expect: '225px 275px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-outset',
|
||||
underlying: '10 20',
|
||||
addFrom: '100 150px',
|
||||
addTo: '200px 250',
|
||||
}, [
|
||||
{at: -0.25, expect: '100 150px'},
|
||||
{at: 0, expect: '100 150px'},
|
||||
{at: 0.25, expect: '100 150px'},
|
||||
{at: 0.5, expect: '200px 250'},
|
||||
{at: 0.75, expect: '200px 250'},
|
||||
{at: 1, expect: '200px 250'},
|
||||
{at: 1.25, expect: '200px 250'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-slice composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice">
|
||||
<meta name="assert" content="border-image-slice 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '1 2 3 4',
|
||||
addFrom: '1 2 3 4',
|
||||
addTo: '101 102 103 104',
|
||||
}, [
|
||||
{at: -0.25, expect: '0'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6 8'},
|
||||
{at: 0.25, expect: '27 29 31 33'},
|
||||
{at: 0.5, expect: '52 54 56 58'},
|
||||
{at: 0.75, expect: '77 79 81 83'},
|
||||
{at: 1, expect: '102 104 106 108'},
|
||||
{at: 1.25, expect: '127 129 131 133'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '100 200 300 400 fill',
|
||||
addFrom: '100 fill',
|
||||
addTo: '200 300 500 fill',
|
||||
}, [
|
||||
{at: -0.25, expect: '175 250 300 450 fill'},
|
||||
{at: 0, expect: '200 300 400 500 fill'},
|
||||
{at: 0.25, expect: '225 350 500 550 fill'},
|
||||
{at: 0.5, expect: '250 400 600 600 fill'},
|
||||
{at: 0.75, expect: '275 450 700 650 fill'},
|
||||
{at: 1, expect: '300 500 800 700 fill'},
|
||||
{at: 1.25, expect: '325 550 900 750 fill'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '1 2 3% 4%',
|
||||
addFrom: '1 2 3% 4%',
|
||||
addTo: '101 102 103% 104%',
|
||||
}, [
|
||||
{at: -0.25, expect: '0 0 0% 0%'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6% 8%'},
|
||||
{at: 0.25, expect: '27 29 31% 33%'},
|
||||
{at: 0.5, expect: '52 54 56% 58%'},
|
||||
{at: 0.75, expect: '77 79 81% 83%'},
|
||||
{at: 1, expect: '102 104 106% 108%'},
|
||||
{at: 1.25, expect: '127 129 131% 133%'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10% 20%',
|
||||
addFrom: '190% 180% 290% 280%',
|
||||
addTo: '90% 80%',
|
||||
}, [
|
||||
{at: -0.25, expect: '225% 225% 350% 350%'},
|
||||
{at: 0, expect: '200% 200% 300% 300%'},
|
||||
{at: 0.25, expect: '175% 175% 250% 250%'},
|
||||
{at: 0.5, expect: '150% 150% 200% 200%'},
|
||||
{at: 0.75, expect: '125% 125% 150% 150%'},
|
||||
{at: 1, expect: '100%'},
|
||||
{at: 1.25, expect: '75% 75% 50% 50%'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10 20%',
|
||||
replaceFrom: '100 100%',
|
||||
addTo: '190 180%',
|
||||
}, [
|
||||
{at: -0.25, expect: '75 75%'},
|
||||
{at: 0, expect: '100 100%'},
|
||||
{at: 0.25, expect: '125 125%'},
|
||||
{at: 0.5, expect: '150 150%'},
|
||||
{at: 0.75, expect: '175 175%'},
|
||||
{at: 1, expect: '200 200%'},
|
||||
{at: 1.25, expect: '225 225%'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10% 20',
|
||||
addFrom: '90% 80',
|
||||
replaceTo: '0% 0 0% 0',
|
||||
}, [
|
||||
{at: -0.25, expect: '125% 125'},
|
||||
{at: 0, expect: '100% 100'},
|
||||
{at: 0.25, expect: '75% 75'},
|
||||
{at: 0.5, expect: '50% 50'},
|
||||
{at: 0.75, expect: '25% 25'},
|
||||
{at: 1, expect: '0% 0'},
|
||||
{at: 1.25, expect: '0% 0'}, // Non-negative.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10 20',
|
||||
addFrom: '100% 150%',
|
||||
addTo: '200% 250% fill',
|
||||
}, [
|
||||
{at: -0.25, expect: '100% 150%'},
|
||||
{at: 0, expect: '100% 150%'},
|
||||
{at: 0.25, expect: '100% 150%'},
|
||||
{at: 0.5, expect: '200% 250% fill'},
|
||||
{at: 0.75, expect: '200% 250% fill'},
|
||||
{at: 1, expect: '200% 250% fill'},
|
||||
{at: 1.25, expect: '200% 250% fill'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-slice',
|
||||
underlying: '10 20',
|
||||
addFrom: '100 150%',
|
||||
addTo: '200% 250',
|
||||
}, [
|
||||
{at: -0.25, expect: '100 150%'},
|
||||
{at: 0, expect: '100 150%'},
|
||||
{at: 0.25, expect: '100 150%'},
|
||||
{at: 0.5, expect: '200% 250'},
|
||||
{at: 0.75, expect: '200% 250'},
|
||||
{at: 1, expect: '200% 250'},
|
||||
{at: 1.25, expect: '200% 250'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-image-width composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-width">
|
||||
<meta name="assert" content="border-image-width 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '1 2 3 4',
|
||||
addFrom: '1 2 3 4',
|
||||
addTo: '101 102 103 104',
|
||||
}, [
|
||||
{at: -0.25, expect: '0'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6 8'},
|
||||
{at: 0.25, expect: '27 29 31 33'},
|
||||
{at: 0.5, expect: '52 54 56 58'},
|
||||
{at: 0.75, expect: '77 79 81 83'},
|
||||
{at: 1, expect: '102 104 106 108'},
|
||||
{at: 1.25, expect: '127 129 131 133'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '100 200 300 400',
|
||||
addFrom: '100',
|
||||
addTo: '200 300 500',
|
||||
}, [
|
||||
{at: -0.25, expect: '175 250 300 450'},
|
||||
{at: 0, expect: '200 300 400 500'},
|
||||
{at: 0.25, expect: '225 350 500 550'},
|
||||
{at: 0.5, expect: '250 400 600 600'},
|
||||
{at: 0.75, expect: '275 450 700 650'},
|
||||
{at: 1, expect: '300 500 800 700'},
|
||||
{at: 1.25, expect: '325 550 900 750'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '1 2 3px 4%',
|
||||
addFrom: '1 2 3px 4%',
|
||||
addTo: '101 102 103px 104%',
|
||||
}, [
|
||||
{at: -0.25, expect: '0 0 0px 0%'}, // Non-negative.
|
||||
{at: 0, expect: '2 4 6px 8%'},
|
||||
{at: 0.25, expect: '27 29 31px 33%'},
|
||||
{at: 0.5, expect: '52 54 56px 58%'},
|
||||
{at: 0.75, expect: '77 79 81px 83%'},
|
||||
{at: 1, expect: '102 104 106px 108%'},
|
||||
{at: 1.25, expect: '127 129 131px 133%'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10px 20px',
|
||||
addFrom: '190px 180px 290px 280px',
|
||||
addTo: '90px 80px',
|
||||
}, [
|
||||
{at: -0.25, expect: '225px 225px 350px 350px'},
|
||||
{at: 0, expect: '200px 200px 300px 300px'},
|
||||
{at: 0.25, expect: '175px 175px 250px 250px'},
|
||||
{at: 0.5, expect: '150px 150px 200px 200px'},
|
||||
{at: 0.75, expect: '125px 125px 150px 150px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 1.25, expect: '75px 75px 50px 50px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10 20px',
|
||||
replaceFrom: '100 100px',
|
||||
addTo: '190 180px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75 75px'},
|
||||
{at: 0, expect: '100 100px'},
|
||||
{at: 0.25, expect: '125 125px'},
|
||||
{at: 0.5, expect: '150 150px'},
|
||||
{at: 0.75, expect: '175 175px'},
|
||||
{at: 1, expect: '200 200px'},
|
||||
{at: 1.25, expect: '225 225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10px 20',
|
||||
addFrom: '90px 80',
|
||||
replaceTo: '0px 0 0px 0',
|
||||
}, [
|
||||
{at: -0.25, expect: '125px 125'},
|
||||
{at: 0, expect: '100px 100'},
|
||||
{at: 0.25, expect: '75px 75'},
|
||||
{at: 0.5, expect: '50px 50'},
|
||||
{at: 0.75, expect: '25px 25'},
|
||||
{at: 1, expect: '0px 0'},
|
||||
{at: 1.25, expect: '0px 0'}, // Non-negative.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10 20',
|
||||
addFrom: '100px 150px',
|
||||
addTo: '200px 250px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 125px'},
|
||||
{at: 0, expect: '100px 150px'},
|
||||
{at: 0.25, expect: '125px 175px'},
|
||||
{at: 0.5, expect: '150px 200px'},
|
||||
{at: 0.75, expect: '175px 225px'},
|
||||
{at: 1, expect: '200px 250px'},
|
||||
{at: 1.25, expect: '225px 275px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-image-width',
|
||||
underlying: '10 20',
|
||||
addFrom: '100 150px',
|
||||
addTo: '200% 250',
|
||||
}, [
|
||||
{at: -0.25, expect: '100 150px'},
|
||||
{at: 0, expect: '100 150px'},
|
||||
{at: 0.25, expect: '100 150px'},
|
||||
{at: 0.5, expect: '200% 250'},
|
||||
{at: 0.75, expect: '200% 250'},
|
||||
{at: 1, expect: '200% 250'},
|
||||
{at: 1.25, expect: '200% 250'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-left-width composition</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties">
|
||||
<meta name="assert" content="border-left-width 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-left-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-left-width',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-left-width',
|
||||
underlying: '10em',
|
||||
addFrom: '100px',
|
||||
addTo: '20em',
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(130px + 4em)'},
|
||||
{at: 0, expect: 'calc(100px + 10em)'},
|
||||
{at: 0.5, expect: 'calc(50px + 20em)'},
|
||||
{at: 1, expect: '30em'},
|
||||
{at: 1.5, expect: 'calc(-50px + 40em)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-left-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-right-width composition</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#border-width-properties">
|
||||
<meta name="assert" content="border-right-width 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-right-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-right-width',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-right-width',
|
||||
underlying: '10em',
|
||||
addFrom: '100px',
|
||||
addTo: '20em',
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(130px + 4em)'},
|
||||
{at: 0, expect: 'calc(100px + 10em)'},
|
||||
{at: 0.5, expect: 'calc(50px + 20em)'},
|
||||
{at: 1, expect: '30em'},
|
||||
{at: 1.5, expect: 'calc(-50px + 40em)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-right-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-top-left-radius composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
|
||||
<meta name="assert" content="border-top-left-radius 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-top-left-radius',
|
||||
underlying: '40px 40px',
|
||||
addFrom: '60px 60px',
|
||||
addTo: '160px 160px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.25, expect: '125px'},
|
||||
{at: 0.5, expect: '150px'},
|
||||
{at: 0.75, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-left-radius',
|
||||
underlying: '40px 140px',
|
||||
replaceFrom: '100px 120px',
|
||||
addTo: '160px 60px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 100px'},
|
||||
{at: 0, expect: '100px 120px'},
|
||||
{at: 0.25, expect: '125px 140px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 180px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px 220px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-left-radius',
|
||||
underlying: '40px 60px',
|
||||
addFrom: '60px 140px',
|
||||
replaceTo: '200px 120px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 220px'},
|
||||
{at: 0, expect: '100px 200px'},
|
||||
{at: 0.25, expect: '125px 180px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 140px'},
|
||||
{at: 1, expect: '200px 120px'},
|
||||
{at: 1.25, expect: '225px 100px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-top-right-radius composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
|
||||
<meta name="assert" content="border-top-right-radius 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-top-right-radius',
|
||||
underlying: '40px 40px',
|
||||
addFrom: '60px 60px',
|
||||
addTo: '160px 160px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px'},
|
||||
{at: 0, expect: '100px'},
|
||||
{at: 0.25, expect: '125px'},
|
||||
{at: 0.5, expect: '150px'},
|
||||
{at: 0.75, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-right-radius',
|
||||
underlying: '40px 140px',
|
||||
replaceFrom: '100px 120px',
|
||||
addTo: '160px 60px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 100px'},
|
||||
{at: 0, expect: '100px 120px'},
|
||||
{at: 0.25, expect: '125px 140px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 180px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.25, expect: '225px 220px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-right-radius',
|
||||
underlying: '40px 60px',
|
||||
addFrom: '60px 140px',
|
||||
replaceTo: '200px 120px',
|
||||
}, [
|
||||
{at: -0.25, expect: '75px 220px'},
|
||||
{at: 0, expect: '100px 200px'},
|
||||
{at: 0.25, expect: '125px 180px'},
|
||||
{at: 0.5, expect: '150px 160px'},
|
||||
{at: 0.75, expect: '175px 140px'},
|
||||
{at: 1, expect: '200px 120px'},
|
||||
{at: 1.25, expect: '225px 100px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>border-top-width composition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-width">
|
||||
<meta name="assert" content="border-top-width 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>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_composition({
|
||||
property: 'border-top-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
addTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '120px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '200px'},
|
||||
{at: 1, expect: '250px'},
|
||||
{at: 1.5, expect: '300px'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-width',
|
||||
underlying: '100px',
|
||||
addFrom: '10px',
|
||||
addTo: '2px',
|
||||
}, [
|
||||
{at: -0.5, expect: '114px'},
|
||||
{at: 0, expect: '110px'},
|
||||
{at: 0.5, expect: '106px'},
|
||||
{at: 1, expect: '102px'},
|
||||
{at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-width',
|
||||
underlying: '10em',
|
||||
addFrom: '100px',
|
||||
addTo: '20em',
|
||||
}, [
|
||||
{at: -0.3, expect: 'calc(130px + 4em)'},
|
||||
{at: 0, expect: 'calc(100px + 10em)'},
|
||||
{at: 0.5, expect: 'calc(50px + 20em)'},
|
||||
{at: 1, expect: '30em'},
|
||||
{at: 1.5, expect: 'calc(-50px + 40em)'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'border-top-width',
|
||||
underlying: '50px',
|
||||
addFrom: '100px',
|
||||
replaceTo: '200px',
|
||||
}, [
|
||||
{at: -0.3, expect: '135px'},
|
||||
{at: 0, expect: '150px'},
|
||||
{at: 0.5, expect: '175px'},
|
||||
{at: 1, expect: '200px'},
|
||||
{at: 1.5, expect: '225px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue