mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 17:55:07 +02:00
Tests: Import a bunch of WPT tests from /css/css-transforms
This commit is contained in:
Andreas Kling
committed by
Andreas Kling
Andreas Kling
parent
b64ccb95ec
commit
d6f7fccf49
Notes:
github-actions[bot]
2024-11-22 19:08:01 +00:00
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/d6f7fccf493 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2506 Reviewed-by: https://github.com/shannonbooth
@@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>translate interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||
<meta name="assert" content="translate supports <length> and <percentage> animation.">
|
||||
<meta name="timeout" content="long">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/interpolation-testcommon.js"></script>
|
||||
<style>
|
||||
.parent {
|
||||
translate: 100px 200px 300px;
|
||||
}
|
||||
.target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
translate: 10px;
|
||||
}
|
||||
.expected {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<template id="target-template">
|
||||
<div class="parent">
|
||||
<div class="target"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Matching one-length (pixels) animation.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '-100px',
|
||||
to: '100px',
|
||||
}, [
|
||||
{at: -1, expect: '-300px'},
|
||||
{at: 0, expect: '-100px'},
|
||||
{at: 0.25, expect: '-50px'},
|
||||
{at: 0.75, expect: '50px'},
|
||||
{at: 1, expect: '100px'},
|
||||
{at: 2, expect: '300px'},
|
||||
]);
|
||||
|
||||
// Matching one-length (percentage) animation.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '-100%',
|
||||
to: '100%',
|
||||
}, [
|
||||
{at: -1, expect: '-300%'},
|
||||
{at: 0, expect: '-100%'},
|
||||
{at: 0.25, expect: '-50%'},
|
||||
{at: 0.75, expect: '50%'},
|
||||
{at: 1, expect: '100%'},
|
||||
{at: 2, expect: '300%'},
|
||||
]);
|
||||
|
||||
// Matching two-length (all pixels) animation.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '-100px -50px',
|
||||
to: '100px 50px',
|
||||
}, [
|
||||
{at: -1, expect: '-300px -150px'},
|
||||
{at: 0, expect: '-100px -50px'},
|
||||
{at: 0.25, expect: '-50px -25px'},
|
||||
{at: 0.75, expect: '50px 25px'},
|
||||
{at: 1, expect: '100px 50px'},
|
||||
{at: 2, expect: '300px 150px'},
|
||||
]);
|
||||
|
||||
// Matching three-length (all pixels) animation.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '220px 240px 260px',
|
||||
to: '300px 400px 500px',
|
||||
}, [
|
||||
{at: -1, expect: '140px 80px 20px'},
|
||||
{at: 0, expect: '220px 240px 260px'},
|
||||
{at: 0.125, expect: '230px 260px 290px'},
|
||||
{at: 0.875, expect: '290px 380px 470px'},
|
||||
{at: 1, expect: '300px 400px 500px'},
|
||||
{at: 2, expect: '380px 560px 740px'}
|
||||
]);
|
||||
|
||||
// Going from one length to three lengths.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '0px',
|
||||
to: '-100px -50px 100px',
|
||||
}, [
|
||||
{at: -1, expect: '100px 50px -100px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.25, expect: '-25px -12.5px 25px'},
|
||||
{at: 0.75, expect: '-75px -37.5px 75px'},
|
||||
{at: 1, expect: '-100px -50px 100px'},
|
||||
{at: 2, expect: '-200px -100px 200px'},
|
||||
]);
|
||||
|
||||
// Going from three lengths to one length.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '-100px -50px 100px',
|
||||
to: '0px',
|
||||
}, [
|
||||
{at: -1, expect: '-200px -100px 200px'},
|
||||
{at: 0, expect: '-100px -50px 100px'},
|
||||
{at: 0.25, expect: '-75px -37.5px 75px'},
|
||||
{at: 0.75, expect: '-25px -12.5px 25px'},
|
||||
{at: 1, expect: '0px'},
|
||||
{at: 2, expect: '100px 50px -100px'},
|
||||
]);
|
||||
|
||||
// Going from three-lengths to two-percentages.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '480px 400px 320px',
|
||||
to: '240% 160%',
|
||||
}, [
|
||||
{at: -1, expect: 'calc(960px - 240%) calc(800px - 160%) 640px'},
|
||||
{at: 0, expect: 'calc(0% + 480px) calc(0% + 400px) 320px'},
|
||||
{at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%) 280px'},
|
||||
{at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px) 40px'},
|
||||
{at: 1, expect: '240% 160%'},
|
||||
{at: 2, expect: 'calc(480% - 480px) calc(320% - 400px) -320px'}
|
||||
]);
|
||||
|
||||
// Handling of the none value.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
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'}
|
||||
]);
|
||||
|
||||
// Going from none to a valid value; test that it converts properly.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: 'none',
|
||||
to: '8px 80% 800px',
|
||||
}, [
|
||||
{at: -1, expect: '-8px -80% -800px'},
|
||||
{at: 0, expect: '0px 0%'},
|
||||
{at: 0.125, expect: '1px 10% 100px'},
|
||||
{at: 0.875, expect: '7px 70% 700px'},
|
||||
{at: 1, expect: '8px 80% 800px'},
|
||||
{at: 2, expect: '16px 160% 1600px'}
|
||||
]);
|
||||
|
||||
// Test neutral keyframe; make sure it adds the underlying.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: neutralKeyframe,
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -1, expect: '0px'},
|
||||
{at: 0, expect: '10px'},
|
||||
{at: 0.25, expect: '12.5px'},
|
||||
{at: 0.75, expect: '17.5px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 2, expect: '30px'},
|
||||
]);
|
||||
|
||||
// Test initial value; for 'scale' this is 'none'.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: 'initial',
|
||||
to: '200px 100px 200px',
|
||||
}, [
|
||||
{at: -1, expect: '-200px -100px -200px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.25, expect: '50px 25px 50px'},
|
||||
{at: 0.75, expect: '150px 75px 150px'},
|
||||
{at: 1, expect: '200px 100px 200px'},
|
||||
{at: 2, expect: '400px 200px 400px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '200px 100px 400px',
|
||||
to: 'initial',
|
||||
}, [
|
||||
{at: -1, expect: '400px 200px 800px'},
|
||||
{at: 0, expect: '200px 100px 400px'},
|
||||
{at: 0.25, expect: '150px 75px 300px'},
|
||||
{at: 0.75, expect: '50px 25px 100px'},
|
||||
{at: 1, expect: '0px'},
|
||||
{at: 2, expect: '-200px -100px -400px'},
|
||||
]);
|
||||
|
||||
|
||||
// Test unset value; for 'translate' this is 'none'.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: 'unset',
|
||||
to: '20px',
|
||||
}, [
|
||||
{at: -1, expect: '-20px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.25, expect: '5px'},
|
||||
{at: 0.75, expect: '15px'},
|
||||
{at: 1, expect: '20px'},
|
||||
{at: 2, expect: '40px'},
|
||||
]);
|
||||
|
||||
// Test inherited value.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: 'inherit',
|
||||
to: '200px 100px 200px',
|
||||
}, [
|
||||
{at: -1, expect: '0px 300px 400px'},
|
||||
{at: 0, expect: '100px 200px 300px'},
|
||||
{at: 0.25, expect: '125px 175px 275px'},
|
||||
{at: 0.75, expect: '175px 125px 225px'},
|
||||
{at: 1, expect: '200px 100px 200px'},
|
||||
{at: 2, expect: '300px 0px 100px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: '200px 100px 200px',
|
||||
to: 'inherit',
|
||||
}, [
|
||||
{at: -1, expect: '300px 0px 100px'},
|
||||
{at: 0, expect: '200px 100px 200px'},
|
||||
{at: 0.25, expect: '175px 125px 225px'},
|
||||
{at: 0.75, expect: '125px 175px 275px'},
|
||||
{at: 1, expect: '100px 200px 300px'},
|
||||
{at: 2, expect: '0px 300px 400px'},
|
||||
]);
|
||||
|
||||
// Test combination of initial and inherit.
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: 'initial',
|
||||
to: 'inherit',
|
||||
}, [
|
||||
{at: -1, expect: '-100px -200px -300px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.25, expect: '25px 50px 75px'},
|
||||
{at: 0.75, expect: '75px 150px 225px'},
|
||||
{at: 1, expect: '100px 200px 300px'},
|
||||
{at: 2, expect: '200px 400px 600px'},
|
||||
]);
|
||||
|
||||
test_interpolation({
|
||||
property: 'translate',
|
||||
from: 'inherit',
|
||||
to: 'initial',
|
||||
}, [
|
||||
{at: -1, expect: '200px 400px 600px'},
|
||||
{at: 0, expect: '100px 200px 300px'},
|
||||
{at: 0.25, expect: '75px 150px 225px'},
|
||||
{at: 0.75, expect: '25px 50px 75px'},
|
||||
{at: 1, expect: '0px'},
|
||||
{at: 2, expect: '-100px -200px -300px'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: rotate computed values.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization
|
||||
|
||||
// Serialize as the keyword none if and only if none was originally specified.
|
||||
test_computed_value("rotate", "none");
|
||||
|
||||
// If a 2d rotation is specified, the property must serialize as just an <angle>.
|
||||
test_computed_value("rotate", "0deg");
|
||||
|
||||
// If a 3d rotation is specified, the property must serialize with an axis specified.
|
||||
test_computed_value("rotate", "100 200 300 400grad", "100 200 300 360deg");
|
||||
test_computed_value("rotate", "400grad 100 200 300", "100 200 300 360deg");
|
||||
test_computed_value("rotate", "0 0 0 400grad", "0 0 0 360deg");
|
||||
|
||||
// If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword.
|
||||
test_computed_value("rotate", "x 400grad", "x 360deg");
|
||||
test_computed_value("rotate", "400grad x", "x 360deg");
|
||||
test_computed_value("rotate", "0.5 0 0 400grad", "x 360deg");
|
||||
test_computed_value("rotate", "1 0 0 400grad", "x 360deg");
|
||||
|
||||
test_computed_value("rotate", "y 400grad", "y 360deg");
|
||||
test_computed_value("rotate", "400grad y", "y 360deg");
|
||||
test_computed_value("rotate", "0 0.5 0 400grad", "y 360deg");
|
||||
test_computed_value("rotate", "0 1 0 400grad", "y 360deg");
|
||||
|
||||
// If the axis is parallel with the z axis the property must serialize as just an <angle>.
|
||||
test_computed_value("rotate", "400grad", "360deg");
|
||||
test_computed_value("rotate", "400grad z", "360deg");
|
||||
test_computed_value("rotate", "0 0 0.5 400grad", "360deg");
|
||||
test_computed_value("rotate", "0 0 1 400grad", "360deg");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: parsing rotate with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
|
||||
<meta name="assert" content="rotate supports only the grammar 'none | <number>{3}? <angle>'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("rotate", "100px");
|
||||
|
||||
test_invalid_value("rotate", "100 400deg");
|
||||
test_invalid_value("rotate", "100 200 400deg");
|
||||
test_invalid_value("rotate", "100 200 300 500 400deg");
|
||||
|
||||
test_invalid_value("rotate", "x y 45deg");
|
||||
test_invalid_value("rotate", "45deg x y");
|
||||
test_invalid_value("rotate", "z");
|
||||
test_invalid_value("rotate", "1 2");
|
||||
test_invalid_value("rotate", "1 2 3");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: parsing rotate with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
|
||||
<meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization
|
||||
|
||||
// Serialize as the keyword none if and only if none was originally specified.
|
||||
test_valid_value("rotate", "none");
|
||||
|
||||
// If a 2d rotation is specified, the property must serialize as just an <angle>.
|
||||
test_valid_value("rotate", "0deg");
|
||||
|
||||
// If a 3d rotation is specified, the property must serialize with an axis specified.
|
||||
test_valid_value("rotate", "100 200 300 400grad");
|
||||
test_valid_value("rotate", "400grad 100 200 300", "100 200 300 400grad");
|
||||
test_valid_value("rotate", "0 0 0 400grad", "0 0 0 400grad");
|
||||
|
||||
// If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword.
|
||||
test_valid_value("rotate", "x 400grad");
|
||||
test_valid_value("rotate", "400grad x", "x 400grad");
|
||||
test_valid_value("rotate", "0.5 0 0 400grad", "x 400grad");
|
||||
test_valid_value("rotate", "1 0 0 400grad", "x 400grad");
|
||||
|
||||
test_valid_value("rotate", "y 400grad");
|
||||
test_valid_value("rotate", "400grad y", "y 400grad");
|
||||
test_valid_value("rotate", "0 0.5 0 400grad", "y 400grad");
|
||||
test_valid_value("rotate", "0 1 0 400grad", "y 400grad");
|
||||
|
||||
// If the axis is parallel with the z axis the property must serialize as just an <angle>.
|
||||
test_valid_value("rotate", "400grad");
|
||||
test_valid_value("rotate", "400grad z", "400grad");
|
||||
test_valid_value("rotate", "0 0 0.5 400grad", "400grad");
|
||||
test_valid_value("rotate", "0 0 1 400grad", "400grad");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: scale computed values.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<meta name="assert" content="scale supports the full grammar 'none | <number>{1,3}'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("scale", "none");
|
||||
|
||||
test_computed_value("scale", "1");
|
||||
test_computed_value("scale", "1%", "0.01");
|
||||
|
||||
test_computed_value("scale", "100");
|
||||
test_computed_value("scale", "100%", "1");
|
||||
test_computed_value("scale", "100 100", "100");
|
||||
test_computed_value("scale", "100% 100%", "1");
|
||||
test_computed_value("scale", "100 100 1", "100");
|
||||
test_computed_value("scale", "100% 100% 1", "1");
|
||||
|
||||
test_computed_value("scale", "-100");
|
||||
test_computed_value("scale", "-100%", "-1");
|
||||
test_computed_value("scale", "-100 -100", "-100");
|
||||
test_computed_value("scale", "-100% -100%", "-1");
|
||||
test_computed_value("scale", "-100 -100 1", "-100");
|
||||
test_computed_value("scale", "-100% -100% 1", "-1");
|
||||
|
||||
test_computed_value("scale", "100 200");
|
||||
test_computed_value("scale", "100% 200%", "1 2");
|
||||
test_computed_value("scale", "100 200 1", "100 200");
|
||||
test_computed_value("scale", "100% 200% 1", "1 2");
|
||||
test_computed_value("scale", "100 200 300");
|
||||
test_computed_value("scale", "100 100 2", "100 100 2");
|
||||
test_computed_value("scale", "100% 200% 300%", "1 2 3");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: parsing scale with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
|
||||
<meta name="assert" content="scale supports only the grammar 'none | <number>{1,3}'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("scale", "100px");
|
||||
|
||||
test_invalid_value("scale", "100 200 300 400");
|
||||
|
||||
test_invalid_value("scale", "1 junk");
|
||||
test_invalid_value("scale", "1 2 junk");
|
||||
test_invalid_value("scale", "1 2 3 junk");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: parsing scale with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
|
||||
<meta name="assert" content="scale supports the full grammar 'none | <number>{1,3}'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("scale", "none");
|
||||
|
||||
test_valid_value("scale", "1");
|
||||
test_valid_value("scale", "1%", "0.01");
|
||||
|
||||
test_valid_value("scale", "100");
|
||||
test_valid_value("scale", "100%", "1");
|
||||
test_valid_value("scale", "100 100", "100");
|
||||
test_valid_value("scale", "100% 100%", "1");
|
||||
test_valid_value("scale", "100 100 1", "100");
|
||||
test_valid_value("scale", "100% 100% 1", "1");
|
||||
|
||||
test_valid_value("scale", "-100");
|
||||
test_valid_value("scale", "-100%", "-1");
|
||||
test_valid_value("scale", "-100 -100", "-100");
|
||||
test_valid_value("scale", "-100% -100%", "-1");
|
||||
test_valid_value("scale", "-100 -100 1", "-100");
|
||||
test_valid_value("scale", "-100% -100% 1", "-1");
|
||||
|
||||
test_valid_value("scale", "100 200");
|
||||
test_valid_value("scale", "100% 200%", "1 2");
|
||||
test_valid_value("scale", "100 200 1", "100 200");
|
||||
test_valid_value("scale", "100% 200% 1", "1 2");
|
||||
test_valid_value("scale", "100 200 300");
|
||||
test_valid_value("scale", "100 100 2", "100 100 2");
|
||||
test_valid_value("scale", "100% 200% 300%", "1 2 3");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: translate computed values.</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
|
||||
<meta name="assert" content="translate supports the full grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("translate", "none");
|
||||
|
||||
test_computed_value("translate", "0px");
|
||||
test_computed_value("translate", "100%");
|
||||
|
||||
test_computed_value("translate", "100px 0px", "100px");
|
||||
test_computed_value("translate", "100px 0.1px", "100px 0.1px");
|
||||
test_computed_value("translate", "100px 0%");
|
||||
test_computed_value("translate", "100px calc(10px - 10%)", "100px calc(-10% + 10px)");
|
||||
test_computed_value("translate", "100px 200%");
|
||||
test_computed_value("translate", "100% 200px");
|
||||
|
||||
test_computed_value("translate", "100px 200px 0px", "100px 200px");
|
||||
test_computed_value("translate", "100px 0px 300px", "100px 0px 300px");
|
||||
test_computed_value("translate", "100px 0px 0px", "100px");
|
||||
test_computed_value("translate", "100px 200px 300px");
|
||||
test_computed_value("translate", "100% 200% 300px");
|
||||
|
||||
test_computed_value("translate", "100% 0% 200px", "100% 0% 200px");
|
||||
test_computed_value("translate", "0% 0% 100px", "0% 0% 100px");
|
||||
test_computed_value("translate", "0em 0em 100px", "0px 0px 100px");
|
||||
|
||||
test_computed_value("translate", "0", "0px");
|
||||
test_computed_value("translate", "1px 2px 0", "1px 2px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: parsing translate with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||
<meta name="assert" content="translate supports only the grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("translate", "100deg");
|
||||
|
||||
test_invalid_value("translate", "100px 200px 300%");
|
||||
test_invalid_value("translate", "100px 200px calc(30px + 30%)");
|
||||
|
||||
test_invalid_value("translate", "100px junk");
|
||||
test_invalid_value("translate", "100px 200px junk");
|
||||
test_invalid_value("translate", "100px 200px 300px junk");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Transform Module Level 2: parsing translate with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
||||
<meta name="assert" content="translate supports the full grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("translate", "none");
|
||||
|
||||
test_valid_value("translate", "0px");
|
||||
test_valid_value("translate", "100%");
|
||||
|
||||
test_valid_value("translate", "100px 0px", "100px");
|
||||
test_valid_value("translate", "100px 0.1px", "100px 0.1px");
|
||||
test_valid_value("translate", "100px 0%");
|
||||
test_valid_value("translate", "100px calc(10px - 10%)", "100px calc(-10% + 10px)");
|
||||
test_valid_value("translate", "100px 200%");
|
||||
test_valid_value("translate", "100% 200px");
|
||||
|
||||
test_valid_value("translate", "100px 200px 0px", "100px 200px");
|
||||
test_valid_value("translate", "100px 0px 300px", "100px 0px 300px");
|
||||
test_valid_value("translate", "100px 0px 0px", "100px");
|
||||
test_valid_value("translate", "100px 200px 300px");
|
||||
test_valid_value("translate", "100% 200% 300px");
|
||||
|
||||
test_valid_value("translate", "100% 0% 200px", "100% 0% 200px");
|
||||
test_valid_value("translate", "0% 0% 100px", "0% 0% 100px");
|
||||
test_valid_value("translate", "0em 0em 100px", "0em 0em 100px");
|
||||
|
||||
test_valid_value("translate", "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)");
|
||||
|
||||
test_valid_value("translate", "0", "0px");
|
||||
test_valid_value("translate", "1px 2px 0", "1px 2px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user