diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms/parsing')
21 files changed, 693 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-computed.html new file mode 100644 index 0000000000..470424f8d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: getComputedStyle().backfaceVisibility</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#backface-visibility-property"> +<meta name="assert" content="backface-visibility computed value is as specified."> +<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("backface-visibility", "visible"); +test_computed_value("backface-visibility", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-invalid.html new file mode 100644 index 0000000000..c6c563124a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing backface-visibility with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#backface-visibility-property"> +<meta name="assert" content="backface-visibility supports only the grammar 'visible | hidden'."> +<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("backface-visibility", "auto"); +test_invalid_value("backface-visibility", "visible hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-valid.html new file mode 100644 index 0000000000..eb7431078c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing backface-visibility with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#backface-visibility-property"> +<meta name="assert" content="backface-visibility supports the full grammar 'visible | hidden'."> +<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("backface-visibility", "visible"); +test_valid_value("backface-visibility", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-computed.html new file mode 100644 index 0000000000..effeb2974e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-computed.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: getComputedStyle().perspectiveOrigin</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property"> +<meta name="assert" content="perspective-origin computed value is a pair of absolute lengths"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + width: 200px; + height: 300px; + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("perspective-origin", "10%", "20px 150px"); +test_computed_value("perspective-origin", "10% center", "20px 150px"); +test_computed_value("perspective-origin", "20% 30px", "40px 30px"); +test_computed_value("perspective-origin", "30px center", "30px 150px"); +test_computed_value("perspective-origin", "40px top", "40px 0px"); +test_computed_value("perspective-origin", "bottom 10% right 20%", "160px 270px"); +test_computed_value("perspective-origin", "bottom right", "200px 300px"); +test_computed_value("perspective-origin", "center", "100px 150px"); +test_computed_value("perspective-origin", "center 50px", "100px 50px"); +test_computed_value("perspective-origin", "center bottom", "100px 300px"); +test_computed_value("perspective-origin", "center center", "100px 150px"); +test_computed_value("perspective-origin", "center left", "0px 150px"); +test_computed_value("perspective-origin", "left", "0px 150px"); +test_computed_value("perspective-origin", "left 10px", "0px 10px"); +test_computed_value("perspective-origin", "left bottom", "0px 300px"); +test_computed_value("perspective-origin", "left center", "0px 150px"); +test_computed_value("perspective-origin", "right 40%", "200px 120px"); +test_computed_value("perspective-origin", "right 30% top -60px", "140px -60px"); +test_computed_value("perspective-origin", "top", "100px 0px"); +test_computed_value("perspective-origin", "right 20px bottom 30px", "180px 270px"); + +test_computed_value("perspective-origin", "right calc(10px - 0.5em) top calc(10px - 0.5em)", "210px -10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-invalid.html new file mode 100644 index 0000000000..f4f01a3399 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-invalid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing perspective-origin with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property"> +<meta name="assert" content="perspective-origin supports only the '<position>' grammar."> +<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("perspective-origin", "auto"); +test_invalid_value("perspective-origin", "1px 2px 3px"); +test_invalid_value("perspective-origin", "left right"); +test_invalid_value("perspective-origin", "bottom 10% top 20%"); + +// The following were supported in an earlier version of the spec. +// https://github.com/w3c/csswg-drafts/issues/2140 +test_invalid_value("perspective-origin", "center left 1px"); +test_invalid_value("perspective-origin", "center top 2px"); +test_invalid_value("perspective-origin", "right 3% center"); +test_invalid_value("perspective-origin", "left 4px top"); +test_invalid_value("perspective-origin", "right top 5px"); +test_invalid_value("perspective-origin", "bottom 6% center"); +test_invalid_value("perspective-origin", "bottom 7% left"); +test_invalid_value("perspective-origin", "bottom right 8%"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-valid.html new file mode 100644 index 0000000000..7653d7eceb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-valid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing perspective-origin with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property"> +<meta name="assert" content="perspective-origin supports the full '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Blink and WebKit append center. Edge and Firefox append 50% +test_valid_value("perspective-origin", "10%", ["10% center", "10% 50%"]); +test_valid_value("perspective-origin", "20% 30px"); +test_valid_value("perspective-origin", "30px center"); +test_valid_value("perspective-origin", "40px top"); +test_valid_value("perspective-origin", "bottom 10% right 20%", "right 20% bottom 10%"); +test_valid_value("perspective-origin", "bottom right", "right bottom"); +test_valid_value("perspective-origin", "center", ["center center", "center 50%"]); +test_valid_value("perspective-origin", "center 50px"); +test_valid_value("perspective-origin", "center bottom"); +test_valid_value("perspective-origin", "center center"); +test_valid_value("perspective-origin", "center left", "left center"); +test_valid_value("perspective-origin", "left", ["left center", "left 50%"]); +test_valid_value("perspective-origin", "left bottom"); +test_valid_value("perspective-origin", "left center"); +test_valid_value("perspective-origin", "right 40%"); +test_valid_value("perspective-origin", "right 30% top 60px"); +test_valid_value("perspective-origin", "top", ["center top", "50% top"]); +test_valid_value("perspective-origin", "top center", "center top"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-invalid.html new file mode 100644 index 0000000000..4b6d7cf2ad --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-invalid.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> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.html new file mode 100644 index 0000000000..82544b094f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.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> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-invalid.html new file mode 100644 index 0000000000..a36db1b5a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-invalid.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> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html new file mode 100644 index 0000000000..ecdc5c038b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.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> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-box-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-computed.html new file mode 100644 index 0000000000..d21beb2081 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: getComputedStyle().transformBox</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box-property"> +<meta name="assert" content="Computed transform-box is the specified keyword."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<body> +<div id="target"></div> +<script> +test_computed_value("transform-box", "content-box"); +test_computed_value("transform-box", "border-box"); +test_computed_value("transform-box", "fill-box"); +test_computed_value("transform-box", "stroke-box"); +test_computed_value("transform-box", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-box-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-invalid.html new file mode 100644 index 0000000000..af07a7e406 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: parsing transform-box with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box-property"> +<meta name="assert" content="transform-box supports only the grammar 'content-box | border-box | fill-box | stroke-box | view-box'."> +<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("transform-box", "margin-box"); +test_invalid_value("transform-box", "padding-box"); +test_invalid_value("transform-box", "fill-box view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-box-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-valid.html new file mode 100644 index 0000000000..df53d327ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: parsing transform-box with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box-property"> +<meta name="assert" content="transform-box supports the full grammar 'content-box | border-box | fill-box | stroke-box | view-box'."> +<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("transform-box", "content-box"); +test_valid_value("transform-box", "border-box"); +test_valid_value("transform-box", "fill-box"); +test_valid_value("transform-box", "stroke-box"); +test_valid_value("transform-box", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-computed.html new file mode 100644 index 0000000000..8759fd28be --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: getComputedStyle().transform</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-the-computed-value"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + width: 200px; + height: 300px; + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("transform", "perspective(none)", "matrix(1, 0, 0, 1, 0, 0)"); +test_computed_value("transform", "perspective(10px)", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.1, 0, 0, 0, 1)"); + +// FIXME: This needs more tests to cover all the other transform functions. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html new file mode 100644 index 0000000000..8985720622 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing transform with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-property"> +<meta name="assert" content="transform supports only the grammar 'none | <transform-list>'."> +<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("transform", "none scale(2)"); +test_invalid_value("transform", "translateX(3%) none"); + +test_invalid_value("transform", "matrix(1, 2)"); + +test_invalid_value("transform", "translate(1px, 2px, 3px)"); + +test_invalid_value("transform", "translateX(-4px, 5px)"); + +test_invalid_value("transform", "translateY(4%, 5%)"); + +test_invalid_value("transform", "scale(6, 7, 8)"); +test_invalid_value("transform", "scale(6%, 7%, 8%)"); + +test_invalid_value("transform", "scaleX(1, 2)"); +test_invalid_value("transform", "scaleX(1%, 2%)"); + +test_invalid_value("transform", "scaleY(3, 4)"); +test_invalid_value("transform", "scaleY(3%, 4%)"); + +test_invalid_value("transform", "rotate(0, 0)"); +test_invalid_value("transform", "rotate(0, 0, 0)"); +test_invalid_value("transform", "rotate(0, 0, 0, 0)"); + +test_invalid_value("transform", "skew(0, 0, 0)"); + +test_invalid_value("transform", "skewX(0, 0)"); + +test_invalid_value("transform", "skewY(0, 0)"); + +test_invalid_value("transform", "scaleX(2), scaleY(3)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-computed.html new file mode 100644 index 0000000000..b8648b8a11 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-computed.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: getComputedStyle().transformOrigin</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<meta name="assert" content="transform-origin computed value is two or three absolute lengths"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + width: 200px; + height: 300px; + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("transform-origin", "10%", "20px 150px"); +test_computed_value("transform-origin", "10% center", "20px 150px"); +test_computed_value("transform-origin", "20% 30px", "40px 30px"); +test_computed_value("transform-origin", "30px center", "30px 150px"); +test_computed_value("transform-origin", "40px top", "40px 0px"); +test_computed_value("transform-origin", "bottom right", "200px 300px"); +test_computed_value("transform-origin", "center", "100px 150px"); +test_computed_value("transform-origin", "center 50px", "100px 50px"); +test_computed_value("transform-origin", "center bottom", "100px 300px"); +test_computed_value("transform-origin", "center center", "100px 150px"); +test_computed_value("transform-origin", "center left", "0px 150px"); +test_computed_value("transform-origin", "left", "0px 150px"); +test_computed_value("transform-origin", "left 10px", "0px 10px"); +test_computed_value("transform-origin", "left bottom", "0px 300px"); +test_computed_value("transform-origin", "left center", "0px 150px"); +test_computed_value("transform-origin", "right 40%", "200px 120px"); +test_computed_value("transform-origin", "top", "100px 0px"); + +test_computed_value("transform-origin", "-1px bottom 5px", "-1px 300px 5px"); +test_computed_value("transform-origin", "left center 6px", "0px 150px 6px"); +test_computed_value("transform-origin", "center top", "100px 0px"); +test_computed_value("transform-origin", "right bottom 7px", "200px 300px 7px"); +test_computed_value("transform-origin", "-1px -2px -3px"); + +test_computed_value("transform-origin", "calc(-100% + 10px - 0.5em) calc(10px - 0.5em) calc(10px - 0.5em)", "-210px -10px -10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-invalid.html new file mode 100644 index 0000000000..5533be4e22 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: parsing transform-origin with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<meta name="assert" content="transform-origin supports only the grammar from spec."> +<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("transform-origin", "1px 2px 3%"); +test_invalid_value("transform-origin", "1px 2px left"); +test_invalid_value("transform-origin", "1px 2px 3px 4px"); +test_invalid_value("transform-origin", "1px left"); +test_invalid_value("transform-origin", "top 1px"); // Blink fails. +test_invalid_value("transform-origin", "right left"); +test_invalid_value("transform-origin", "top bottom"); + +test_invalid_value("transform-origin", "bottom 10% right 20%"); +test_invalid_value("transform-origin", "right 30% top -60px"); +test_invalid_value("transform-origin", "right 20px bottom 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-valid.html new file mode 100644 index 0000000000..d5c952ed0f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-valid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: parsing transform-origin with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<meta name="assert" content="transform-origin supports the full grammar from spec."> +<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("transform-origin", "left", ["left center 0px", "left 50% 0px", "left center"]); +test_valid_value("transform-origin", "center", ["center center 0px", "center 50% 0px", "center center"]); +test_valid_value("transform-origin", "right", ["right center 0px", "right 50% 0px", "right center"]); +test_valid_value("transform-origin", "top", ["center top 0px", "50% top 0px", "center top"]); +test_valid_value("transform-origin", "bottom", ["center bottom 0px", "50% bottom 0px", "center bottom"]); +test_valid_value("transform-origin", "-1px", ["-1px center 0px", "-1px 50% 0px", "-1px center"]); +test_valid_value("transform-origin", "calc(2em + 3ex)", ["calc(2em + 3ex) center 0px", "calc(2em + 3ex) 50% 0px", "calc(2em + 3ex) center"]); +test_valid_value("transform-origin", "-4%", ["-4% center 0px", "-4% 50% 0px", "-4% center"]); + +test_valid_value("transform-origin", "left center", ["left center 0px", "left center"]); +test_valid_value("transform-origin", "center top", ["center top 0px", "center top"]); +test_valid_value("transform-origin", "right -4%", ["right -4% 0px", "right -4%"]); +test_valid_value("transform-origin", "-1px bottom 5px"); + +test_valid_value("transform-origin", "center left 6px", "left center 6px"); +test_valid_value("transform-origin", "top center", ["center top 0px", "center top"]); +test_valid_value("transform-origin", "bottom right 7px", "right bottom 7px"); +test_valid_value("transform-origin", "-1px -2px -3px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html new file mode 100644 index 0000000000..89a8b519b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing transform with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-property"> +<meta name="assert" content="transform supports the full grammar 'none | <transform-list>'."> +<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("transform", "none"); + +test_valid_value("transform", "matrix(1, 0, 0, 1, 0, 0)"); +test_valid_value("transform", "matrix(1, 2, 3, 4, 5, 6)"); +test_valid_value("transform", "matrix(-0.1, -0.2, -0.3, -0.4, -0.5, -0.6)"); + +test_valid_value("transform", "translate(1px)"); +test_valid_value("transform", "translate(1px, 0%)"); +test_valid_value("transform", "translate(2%, -3%)"); + +test_valid_value("transform", "translateX(-4px)"); + +test_valid_value("transform", "translateY(5%)"); + +test_valid_value("transform", "scale(2)"); +test_valid_value("transform", "scale(3, 4)"); + +test_valid_value("transform", "scale(-2)"); +test_valid_value("transform", "scale(-5, -6)"); + +test_valid_value("transform", "scale(250%)", "scale(2.5)"); +test_valid_value("transform", "scale(325%, 475%)", "scale(3.25, 4.75)"); +test_valid_value("transform", "scale(1, 200%)", "scale(1, 2)"); + +test_valid_value("transform", "scale(-250%)", "scale(-2.5)"); +test_valid_value("transform", "scale(-500%, -620%)", "scale(-5, -6.2)"); + +test_valid_value("transform", "scaleX(7)"); +test_valid_value("transform", "scaleX(720%)", "scaleX(7.2)"); + +test_valid_value("transform", "scaleY(-8)"); +test_valid_value("transform", "scaleY(-85%)", "scaleY(-0.85)"); + +test_valid_value("transform", "scaleZ(4)"); +test_valid_value("transform", "scaleZ(25%)", "scaleZ(0.25)"); + +test_valid_value("transform", "scale3d(0.5, 2.5, 3)"); +test_valid_value("transform", "scale3d(50%, 250%, 300%)", "scale3d(0.5, 2.5, 3)"); + +test_valid_value("transform", "scale3d(-0.5, 2.5, -3)"); +test_valid_value("transform", "scale3d(-50%, 250%, -300%)", "scale3d(-0.5, 2.5, -3)"); +test_valid_value("transform", "scale3d(1, 200%, 3)", "scale3d(1, 2, 3)"); + +test_valid_value("transform", "rotate(0)", "rotate(0deg)"); +test_valid_value("transform", "rotate(90deg)"); + +test_valid_value("transform", "skew(0)", "skew(0deg)"); +test_valid_value("transform", "skew(90deg)"); +test_valid_value("transform", "skew(0, -90deg)", "skew(0deg, -90deg)"); +test_valid_value("transform", "skew(90deg, 0)", ["skew(90deg)", "skew(90deg, 0deg)"]); + +test_valid_value("transform", "skewX(0)", "skewX(0deg)"); +test_valid_value("transform", "skewX(90deg)"); + +test_valid_value("transform", "skewY(0)", "skewY(0deg)"); +test_valid_value("transform", "skewY(-90deg)"); + +test_valid_value("transform", "perspective(10px)"); +test_valid_value("transform", "perspective(none)"); + +test_valid_value("transform", "translate(1px, 2%) scale(3, 4) rotate(-90deg)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-invalid.html new file mode 100644 index 0000000000..d47cd5b696 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-invalid.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> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-valid.html new file mode 100644 index 0000000000..523bc6d652 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-valid.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> |