diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-logical/parsing')
54 files changed, 1767 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html new file mode 100644 index 0000000000..de3a3c2a0c --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().blockSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="block-size computed value is an absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #parent { + height: 300px; + } + #target { + width: 0px; + height: 0px; + font-size: 40px; + } + #child { + height: 80px; + } +</style> +</head> +<body> +<div id="parent"> + <div id="target"> + <div id="child"> + </div> + </div> +</div> +<script> +test_computed_value("block-size", "auto", "80px"); // child height + +test_computed_value("block-size", "10px"); +test_computed_value("block-size", "20%", "60px"); +test_computed_value("block-size", "calc(0.5em + 10px)", "30px"); +test_computed_value("block-size", "calc(-0.5em + 10px)", "0px"); + +test_computed_value("block-size", "min-content", "80px"); // child height +test_computed_value("block-size", "max-content", "80px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html new file mode 100644 index 0000000000..37d8890773 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing block-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("block-size", "none"); + +test_invalid_value("block-size", "min-content available"); +test_invalid_value("block-size", "max-content 10px"); +test_invalid_value("block-size", "20% available"); + +test_invalid_value("block-size", "-10px"); +test_invalid_value("block-size", "-20%"); +test_invalid_value("block-size", "60"); +test_invalid_value("block-size", "10px 20%"); + +test_invalid_value("block-size", "10px border-box"); +test_invalid_value("block-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html new file mode 100644 index 0000000000..47170e48f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing block-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("block-size", "auto"); + +test_valid_value("block-size", "10px"); +test_valid_value("block-size", "20%"); +test_valid_value("block-size", "calc(2em + 3ex)"); + +test_valid_value("block-size", "min-content"); +test_valid_value("block-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("block-size", "fit-content(100px)"); +// test_valid_value("block-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html new file mode 100644 index 0000000000..24a745f5fe --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderBlockColor</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color"> +<meta name="assert" content="border-block-color is computed color(s)."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<style> + #target { + color: lime; + } +</style> +<script> +test_computed_value("border-block-start-color", "currentcolor", 'rgb(0, 255, 0)'); +test_computed_value("border-block-start-color", "rgb(2, 3, 4)"); +test_computed_value("border-block-end-color", "rgb(34, 51, 68)"); +test_computed_value("border-block-end-color", "transparent", "rgba(0, 0, 0, 0)"); +test_computed_value("border-block-color", "rgb(34, 51, 68)"); +test_computed_value("border-block-color", "transparent rgb(2, 3, 4)", "rgba(0, 0, 0, 0) rgb(2, 3, 4)"); +test_computed_value("border-block-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)"); +test_computed_value("border-block-color", "currentcolor lime", 'rgb(0, 255, 0)'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html new file mode 100644 index 0000000000..1c25f125fe --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-color with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color"> +<meta name="assert" content="border-block-color supports only the grammar '<color>{1,2}'."> +<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("border-block-start-color", "#12"); +test_invalid_value("border-block-start-color", "auto"); +test_invalid_value("border-block-start-color", "red green"); +test_invalid_value("border-block-start-color", "rgb"); +test_invalid_value("border-block-start-color", "rgb(1,2,3,4,5)"); +test_invalid_value("border-block-start-color", "rgb(10%, 20, 30%)"); +test_invalid_value("border-block-end-color", "#123456789"); +test_invalid_value("border-block-end-color", "123"); +test_invalid_value("border-block-end-color", "hsla(1,2,3,4,5)"); +test_invalid_value("border-block-end-color", "red, green"); +test_invalid_value("border-block-end-color", "rgb(1)"); +test_invalid_value("border-block-end-color", "rgba(-2, 300, 400%, -0.5)"); +test_invalid_value("border-block-color", "auto"); +test_invalid_value("border-block-color", "lime, transparent"); +test_invalid_value("border-block-color", "red green blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html new file mode 100644 index 0000000000..aefe0f268b --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-color with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color"> +<meta name="assert" content="border-block-color supports the full grammar '<color>{1,2}'."> +<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("border-block-start-color", "currentcolor"); +test_valid_value("border-block-start-color", "rgb(2, 3, 4)"); +test_valid_value("border-block-end-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("border-block-end-color", "transparent"); +test_valid_value("border-block-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("border-block-color", "transparent rgb(2, 3, 4)"); +test_valid_value("border-block-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html new file mode 100644 index 0000000000..9cd8a252b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderBlockStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-style"> +<meta name="assert" content="border-block-style is specified keyword(s)."> +<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("border-block-start-style", "dotted"); +test_computed_value("border-block-start-style", "groove"); +test_computed_value("border-block-start-style", "inset"); +test_computed_value("border-block-start-style", "none"); +test_computed_value("border-block-start-style", "solid"); +test_computed_value("border-block-end-style", "dashed"); +test_computed_value("border-block-end-style", "double"); +test_computed_value("border-block-end-style", "hidden"); +test_computed_value("border-block-end-style", "outset"); +test_computed_value("border-block-end-style", "ridge"); +test_computed_value("border-block-style", "dotted"); +test_computed_value("border-block-style", "double groove"); +test_computed_value("border-block-style", "hidden hidden", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html new file mode 100644 index 0000000000..680e510aae --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-style with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-style"> +<meta name="assert" content="border-block-style supports only the grammar '<line-style>{1,2}'."> +<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("border-block-start-style", "auto"); +test_invalid_value("border-block-start-style", "hidden, outset"); +test_invalid_value("border-block-end-style", "solid double"); +test_invalid_value("border-block-style", "auto"); +test_invalid_value("border-block-style", "groove, ridge"); +test_invalid_value("border-block-style", "hidden inset dashed"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html new file mode 100644 index 0000000000..860a1052b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-style with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block"> +<meta name="assert" content="border-block-style supports the full grammar '<line-style>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset +test_valid_value("border-block-start-style", "dotted"); +test_valid_value("border-block-start-style", "groove"); +test_valid_value("border-block-start-style", "inset"); +test_valid_value("border-block-start-style", "none"); +test_valid_value("border-block-start-style", "solid"); +test_valid_value("border-block-end-style", "dashed"); +test_valid_value("border-block-end-style", "double"); +test_valid_value("border-block-end-style", "hidden"); +test_valid_value("border-block-end-style", "outset"); +test_valid_value("border-block-end-style", "ridge"); +test_valid_value("border-block-style", "dotted"); +test_valid_value("border-block-style", "double groove"); +test_valid_value("border-block-style", "hidden hidden", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html new file mode 100644 index 0000000000..68c9797c0f --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block"> +<meta name="assert" content="border-block supports the full grammar '<line-width> || <line-style> || <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Similar to css-backgrounds/parsing/border-valid.html + +test_valid_value("border-block", "1px dotted red"); +test_valid_value("border-block", "double", ["double", "medium double"]); + +test_valid_value("border-block-start", "green double thin", "thin double green"); +test_valid_value("border-block-start", "green", ["green", "medium none green"]); +test_valid_value("border-block-end", "thin", ["thin", "thin none"]); +test_valid_value("border-block-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html new file mode 100644 index 0000000000..66b0cb7c60 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderBlockWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width"> +<meta name="assert" content="border-block-width is absolute length; zero if the border block style is none or hidden."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<style> + #box { + border-style: dotted; /* Avoid border-*-width computed style 0 */ + border-top-width: thin; + border-right-width: medium; + border-bottom-width: thick; + } + #target { + font-size: 40px; + border-block-style: dotted; /* Avoid border-block-*-width computed style 0 */ + } +</style> +<script> +'use strict'; +const box = document.getElementById('box'); +const thinWidth = getComputedStyle(box).borderTopWidth; +const mediumWidth = getComputedStyle(box).borderRightWidth; +const thickWidth = getComputedStyle(box).borderBottomWidth; + +test_computed_value("border-block-start-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("border-block-start-width", "calc(10px - 0.5em)", "0px"); +test_computed_value("border-block-start-width", "thin", thinWidth); +test_computed_value("border-block-start-width", "medium", mediumWidth); + +test_computed_value("border-block-end-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("border-block-end-width", "calc(10px - 0.5em)", "0px"); +test_computed_value("border-block-end-width", "thick", thickWidth); + +test_computed_value("border-block-width", "10px"); +test_computed_value("border-block-width", "10px 20px"); +test_computed_value("border-block-width", "10px 10px", "10px"); +test(() => { + box.style.borderBlockStartWidth = '10px'; + box.style.borderBlockEndWidth = '10px'; + + box.style.borderBlockStartStyle = 'groove'; + box.style.borderBlockEndStyle = 'solid'; + assert_equals(getComputedStyle(box).borderBlockStartWidth, '10px'); + assert_equals(getComputedStyle(box).borderBlockEndWidth, '10px'); + assert_equals(getComputedStyle(box).borderBlockWidth, '10px'); + + box.style.borderBlockStartStyle = 'hidden'; + box.style.borderBlockEndStyle = 'dashed'; + assert_equals(getComputedStyle(box).borderBlockStartWidth, '0px'); + assert_equals(getComputedStyle(box).borderBlockEndWidth, '10px'); + assert_equals(getComputedStyle(box).borderBlockWidth, '0px 10px'); + + box.style.borderBlockStartStyle = 'inset'; + box.style.borderBlockEndStyle = 'none'; + assert_equals(getComputedStyle(box).borderBlockStartWidth, '10px'); + assert_equals(getComputedStyle(box).borderBlockEndWidth, '0px'); + assert_equals(getComputedStyle(box).borderBlockWidth, '10px 0px'); + + box.style.borderBlockStartStyle = 'none'; + box.style.borderBlockEndStyle = 'hidden'; + assert_equals(getComputedStyle(box).borderBlockStartWidth, '0px'); + assert_equals(getComputedStyle(box).borderBlockEndWidth, '0px'); + assert_equals(getComputedStyle(box).borderBlockWidth, '0px'); +}, 'width is zero if the border block style is none or hidden'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html new file mode 100644 index 0000000000..65990fe930 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-width with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width"> +<meta name="assert" content="border-block-width supports only the grammar '<line-width>{1,2}'."> +<meta name="assert" content="Negative lengths are not allowed."> + <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("border-block-start-width", "-20px"); +test_invalid_value("border-block-start-width", "auto"); +test_invalid_value("border-block-start-width", "medium 40px"); +test_invalid_value("border-block-end-width", "10"); +test_invalid_value("border-block-end-width", "30%"); + +test_invalid_value("border-block-width", "thick, thin"); +test_invalid_value("border-block-width", "10px 20px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html new file mode 100644 index 0000000000..03b02a2566 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-width with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width"> +<meta name="assert" content="border-block-width supports the full grammar '<line-width>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <length> | thin | medium | thick +test_valid_value("border-block-start-width", "10px"); +test_valid_value("border-block-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)"); +test_valid_value("border-block-start-width", "thick"); +test_valid_value("border-block-start-width", "thin"); +test_valid_value("border-block-end-width", "0", "0px"); +test_valid_value("border-block-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("border-block-end-width", "medium"); +test_valid_value("border-block-width", "10px"); +test_valid_value("border-block-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)"); +test_valid_value("border-block-width", "10px 10px", "10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html new file mode 100644 index 0000000000..106a4f48e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderInlineColor</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color"> +<meta name="assert" content="border-inline-color is computed color(s)."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<style> + #target { + color: lime; + } +</style> +<script> +test_computed_value("border-inline-start-color", "currentcolor", 'rgb(0, 255, 0)'); +test_computed_value("border-inline-start-color", "rgb(2, 3, 4)"); +test_computed_value("border-inline-end-color", "rgb(34, 51, 68)"); +test_computed_value("border-inline-end-color", "transparent", "rgba(0, 0, 0, 0)"); +test_computed_value("border-inline-color", "rgb(34, 51, 68)"); +test_computed_value("border-inline-color", "transparent rgb(2, 3, 4)", "rgba(0, 0, 0, 0) rgb(2, 3, 4)"); +test_computed_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)"); +test_computed_value("border-inline-color", "currentcolor lime", 'rgb(0, 255, 0)'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html new file mode 100644 index 0000000000..f0070c787b --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-color with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color"> +<meta name="assert" content="border-inline-color supports only the grammar '<color>{1,2}'."> +<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("border-inline-start-color", "#12"); +test_invalid_value("border-inline-start-color", "auto"); +test_invalid_value("border-inline-start-color", "red green"); +test_invalid_value("border-inline-start-color", "rgb"); +test_invalid_value("border-inline-start-color", "rgb(1,2,3,4,5)"); +test_invalid_value("border-inline-start-color", "rgb(10%, 20, 30%)"); +test_invalid_value("border-inline-end-color", "#123456789"); +test_invalid_value("border-inline-end-color", "123"); +test_invalid_value("border-inline-end-color", "hsla(1,2,3,4,5)"); +test_invalid_value("border-inline-end-color", "red, green"); +test_invalid_value("border-inline-end-color", "rgb(1)"); +test_invalid_value("border-inline-end-color", "rgba(-2, 300, 400%, -0.5)"); +test_invalid_value("border-inline-color", "auto"); +test_invalid_value("border-inline-color", "lime, transparent"); +test_invalid_value("border-inline-color", "red green blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html new file mode 100644 index 0000000000..6bf240006e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-color with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color"> +<meta name="assert" content="border-inline-color supports the full grammar '<color>{1,2}'."> +<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("border-inline-start-color", "currentcolor"); +test_valid_value("border-inline-start-color", "rgb(2, 3, 4)"); +test_valid_value("border-inline-end-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("border-inline-end-color", "transparent"); +test_valid_value("border-inline-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("border-inline-color", "transparent rgb(2, 3, 4)"); +test_valid_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html new file mode 100644 index 0000000000..0ba858a685 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderInlineStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style"> +<meta name="assert" content="border-inline-style is specified keyword(s)."> +<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("border-inline-start-style", "dotted"); +test_computed_value("border-inline-start-style", "groove"); +test_computed_value("border-inline-start-style", "inset"); +test_computed_value("border-inline-start-style", "none"); +test_computed_value("border-inline-start-style", "solid"); +test_computed_value("border-inline-end-style", "dashed"); +test_computed_value("border-inline-end-style", "double"); +test_computed_value("border-inline-end-style", "hidden"); +test_computed_value("border-inline-end-style", "outset"); +test_computed_value("border-inline-end-style", "ridge"); +test_computed_value("border-inline-style", "dotted"); +test_computed_value("border-inline-style", "double groove"); +test_computed_value("border-inline-style", "hidden hidden", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html new file mode 100644 index 0000000000..6684dc19ec --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-style with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style"> +<meta name="assert" content="border-inline-style supports only the grammar '<line-style>{1,2}'."> +<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("border-inline-start-style", "auto"); +test_invalid_value("border-inline-start-style", "hidden, outset"); +test_invalid_value("border-inline-end-style", "solid double"); +test_invalid_value("border-inline-style", "auto"); +test_invalid_value("border-inline-style", "groove, ridge"); +test_invalid_value("border-inline-style", "hidden inset dashed"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html new file mode 100644 index 0000000000..4fd0cbbb09 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-style with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block"> +<meta name="assert" content="border-inline-style supports the full grammar '<line-style>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset +test_valid_value("border-inline-start-style", "dotted"); +test_valid_value("border-inline-start-style", "groove"); +test_valid_value("border-inline-start-style", "inset"); +test_valid_value("border-inline-start-style", "none"); +test_valid_value("border-inline-start-style", "solid"); +test_valid_value("border-inline-end-style", "dashed"); +test_valid_value("border-inline-end-style", "double"); +test_valid_value("border-inline-end-style", "hidden"); +test_valid_value("border-inline-end-style", "outset"); +test_valid_value("border-inline-end-style", "ridge"); +test_valid_value("border-inline-style", "dotted"); +test_valid_value("border-inline-style", "double groove"); +test_valid_value("border-inline-style", "hidden hidden", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html new file mode 100644 index 0000000000..be29783acf --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline"> +<meta name="assert" content="border-inline supports the full grammar '<line-width> || <line-style> || <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Similar to css-backgrounds/parsing/border-valid.html + +test_valid_value("border-inline", "1px dotted red"); +test_valid_value("border-inline", "double", ["double", "medium double"]); + +test_valid_value("border-inline-start", "green double thin", "thin double green"); +test_valid_value("border-inline-start", "green", ["green", "medium none green"]); +test_valid_value("border-inline-end", "thin", ["thin", "thin none"]); +test_valid_value("border-inline-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html new file mode 100644 index 0000000000..03b71f0386 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderInlineWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width"> +<meta name="assert" content="border-inline-width is absolute length; zero if the border block style is none or hidden."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<style> + #box { + border-style: dotted; /* Avoid border-*-width computed style 0 */ + border-top-width: thin; + border-right-width: medium; + border-bottom-width: thick; + } + #target { + font-size: 40px; + border-inline-style: dotted; /* Avoid border-inline-*-width computed style 0 */ + } +</style> +<script> +'use strict'; +const box = document.getElementById('box'); +const thinWidth = getComputedStyle(box).borderTopWidth; +const mediumWidth = getComputedStyle(box).borderRightWidth; +const thickWidth = getComputedStyle(box).borderBottomWidth; + +test_computed_value("border-inline-start-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("border-inline-start-width", "calc(10px - 0.5em)", "0px"); +test_computed_value("border-inline-start-width", "thin", thinWidth); +test_computed_value("border-inline-start-width", "medium", mediumWidth); + +test_computed_value("border-inline-end-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("border-inline-end-width", "calc(10px - 0.5em)", "0px"); +test_computed_value("border-inline-end-width", "thick", thickWidth); + +test_computed_value("border-inline-width", "10px"); +test_computed_value("border-inline-width", "10px 20px"); +test_computed_value("border-inline-width", "10px 10px", "10px"); +test(() => { + box.style.borderInlineStartWidth = '10px'; + box.style.borderInlineEndWidth = '10px'; + + box.style.borderInlineStartStyle = 'groove'; + box.style.borderInlineEndStyle = 'solid'; + assert_equals(getComputedStyle(box).borderInlineStartWidth, '10px'); + assert_equals(getComputedStyle(box).borderInlineEndWidth, '10px'); + assert_equals(getComputedStyle(box).borderInlineWidth, '10px'); + + box.style.borderInlineStartStyle = 'hidden'; + box.style.borderInlineEndStyle = 'dashed'; + assert_equals(getComputedStyle(box).borderInlineStartWidth, '0px'); + assert_equals(getComputedStyle(box).borderInlineEndWidth, '10px'); + assert_equals(getComputedStyle(box).borderInlineWidth, '0px 10px'); + + box.style.borderInlineStartStyle = 'inset'; + box.style.borderInlineEndStyle = 'none'; + assert_equals(getComputedStyle(box).borderInlineStartWidth, '10px'); + assert_equals(getComputedStyle(box).borderInlineEndWidth, '0px'); + assert_equals(getComputedStyle(box).borderInlineWidth, '10px 0px'); + + box.style.borderInlineStartStyle = 'none'; + box.style.borderInlineEndStyle = 'hidden'; + assert_equals(getComputedStyle(box).borderInlineStartWidth, '0px'); + assert_equals(getComputedStyle(box).borderInlineEndWidth, '0px'); + assert_equals(getComputedStyle(box).borderInlineWidth, '0px'); +}, 'width is zero if the border block style is none or hidden'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html new file mode 100644 index 0000000000..8624fcf0fe --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-width with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width"> +<meta name="assert" content="border-inline-width supports only the grammar '<line-width>{1,2}'."> +<meta name="assert" content="Negative lengths are not allowed."> + <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("border-inline-start-width", "-20px"); +test_invalid_value("border-inline-start-width", "auto"); +test_invalid_value("border-inline-start-width", "medium 40px"); +test_invalid_value("border-inline-end-width", "10"); +test_invalid_value("border-inline-end-width", "30%"); + +test_invalid_value("border-inline-width", "thick, thin"); +test_invalid_value("border-inline-width", "10px 20px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html new file mode 100644 index 0000000000..81c7049c5e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-width with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width"> +<meta name="assert" content="border-inline-width supports the full grammar '<line-width>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <length> | thin | medium | thick +test_valid_value("border-inline-start-width", "10px"); +test_valid_value("border-inline-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)"); +test_valid_value("border-inline-start-width", "thick"); +test_valid_value("border-inline-start-width", "thin"); +test_valid_value("border-inline-end-width", "0", "0px"); +test_valid_value("border-inline-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("border-inline-end-width", "medium"); +test_valid_value("border-inline-width", "10px"); +test_valid_value("border-inline-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)"); +test_valid_value("border-inline-width", "10px 10px", "10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html new file mode 100644 index 0000000000..0f60165a34 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().inlineSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="inline-size computed value is an absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #parent { + width: 200px; + } + #target { + width: 0px; + height: 0px; + font-size: 40px; + } + #child { + width: 60px; + } +</style> +</head> +<body> +<div id="parent"> + <div id="target"> + <div id="child"> + </div> + </div> +</div> +<script> +test_computed_value("inline-size", "auto", "200px"); // parent width + +test_computed_value("inline-size", "10px"); +test_computed_value("inline-size", "20%", "40px"); +test_computed_value("inline-size", "calc(0.5em + 10px)", "30px"); +test_computed_value("inline-size", "calc(-0.5em + 10px)", "0px"); + +test_computed_value("inline-size", "min-content", "60px"); // child width +test_computed_value("inline-size", "max-content", "60px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html new file mode 100644 index 0000000000..d3d5d3f84d --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inline-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("inline-size", "none"); + +test_invalid_value("inline-size", "min-content available"); +test_invalid_value("inline-size", "max-content 10px"); +test_invalid_value("inline-size", "20% available"); + +test_invalid_value("inline-size", "-10px"); +test_invalid_value("inline-size", "-20%"); +test_invalid_value("inline-size", "60"); +test_invalid_value("inline-size", "10px 20%"); + +test_invalid_value("inline-size", "10px border-box"); +test_invalid_value("inline-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html new file mode 100644 index 0000000000..e785b468cd --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inline-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("inline-size", "auto"); + +test_valid_value("inline-size", "10px"); +test_valid_value("inline-size", "20%"); +test_valid_value("inline-size", "calc(2em + 3ex)"); + +test_valid_value("inline-size", "min-content"); +test_valid_value("inline-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("inline-size", "fit-content(100px)"); +// test_valid_value("inline-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html new file mode 100644 index 0000000000..d18e97dfc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().insetBlock / insetInline</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block"> +<meta name="assert" content="Computed value is as specified, with lengths made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("inset-block-start", "auto"); +test_computed_value("inset-block-end", "-10px"); +test_computed_value("inset-inline-start", "-20%"); +test_computed_value("inset-inline-end", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("inset-block", "auto"); +test_computed_value("inset-block", "-10px"); +test_computed_value("inset-block", "calc(10px - 0.5em) -20%", "-10px -20%"); +test_computed_value("inset-block", "auto auto", "auto"); +test_computed_value("inset-inline", "-20%"); +test_computed_value("inset-inline", "calc(10px - 0.5em)", "-10px"); +test_computed_value("inset-inline", "-10px auto"); +test_computed_value("inset-inline", "auto calc(10px + 0.5em)", "auto 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html new file mode 100644 index 0000000000..fe073f852e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inset-block and inset-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block"> +<meta name="assert" content="inset-block, inset-inline support only the grammar '<'top'>{1,2}'."> +<meta name="assert" content="inset-block, inset-inline longhands support only the grammar '<'top'>'."> +<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("inset-block-start", "none"); +test_invalid_value("inset-block-end", "10"); +test_invalid_value("inset-inline-start", "20% calc(10px - 0.5em)"); +test_invalid_value("inset-inline-end", "10px, auto"); + +test_invalid_value("inset-block", "none"); +test_invalid_value("inset-block", "20%, calc(10px - 0.5em)"); +test_invalid_value("inset-inline", "10px auto 20px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html new file mode 100644 index 0000000000..c089c2a0d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: inset-block and inset-inline set longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block"> +<meta name="assert" content="inset-block, inset-inline support the full grammar '<'top'>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('inset-block', '10px', { + 'inset-block-start': '10px', + 'inset-block-end': '10px' +}); + +test_shorthand_value('inset-block', '20% auto', { + 'inset-block-start': '20%', + 'inset-block-end': 'auto' +}); + +test_shorthand_value('inset-inline', '30%', { + 'inset-inline-start': '30%', + 'inset-inline-end': '30%' +}); + +test_shorthand_value('inset-inline', 'auto 40px', { + 'inset-inline-start': 'auto', + 'inset-inline-end': '40px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html new file mode 100644 index 0000000000..b08975251d --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inset-block and inset-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block"> +<meta name="assert" content="inset-block, inset-inline support the full grammar '<'top'>{1,2}'."> +<meta name="assert" content="inset-block, inset-inline longhands support the full grammar '<'top'>'."> +<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("inset-block-start", "auto"); +test_valid_value("inset-block-end", "-10px"); +test_valid_value("inset-inline-start", "-20%"); +test_valid_value("inset-inline-end", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); + +test_valid_value("inset-block", "auto"); +test_valid_value("inset-block", "-10px"); +test_valid_value("inset-block", "calc(10px - 0.5em) -20%", "calc(-0.5em + 10px) -20%"); +test_valid_value("inset-block", "auto auto", "auto"); +test_valid_value("inset-inline", "-20%"); +test_valid_value("inset-inline", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("inset-inline", "-10px auto"); +test_valid_value("inset-inline", "auto calc(10px + 0.5em)", "auto calc(0.5em + 10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html new file mode 100644 index 0000000000..8a08830bd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().inset</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset"> +<meta name="assert" content="Computed value is as specified, with lengths made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("inset", "auto"); +test_computed_value("inset", "-10px"); + +test_computed_value("inset", "calc(10px - 0.5em) -20%", "-10px -20%"); +test_computed_value("inset", "auto auto", "auto"); + +test_computed_value("inset", "10px calc(10px - 0.5em) -30px", "10px -10px -30px"); +test_computed_value("inset", "auto auto auto", "auto"); + +test_computed_value("inset", "10px 20px auto -30px"); +test_computed_value("inset", "auto auto auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html new file mode 100644 index 0000000000..604b801c76 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inset with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset"> +<meta name="assert" content="inset supports only the grammar '<'top'>{1,4}'."> +<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("inset", "none"); +test_invalid_value("inset", "20%, calc(10px - 0.5em)"); +test_invalid_value("inset", "10px auto 20px auto 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html new file mode 100644 index 0000000000..4557879129 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: inset sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset"> +<meta name="assert" content="inset supports the full grammar '<'top'>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('inset', '1px 2px 3px 4px', { + 'top': '1px', + 'right': '2px', + 'bottom': '3px', + 'left': '4px' +}); + +test_shorthand_value('inset', '1px 2px 3px', { + 'top': '1px', + 'right': '2px', + 'bottom': '3px', + 'left': '2px' +}); + +test_shorthand_value('inset', '1px 2px', { + 'top': '1px', + 'right': '2px', + 'bottom': '1px', + 'left': '2px' +}); + +test_shorthand_value('inset', '1px', { + 'top': '1px', + 'right': '1px', + 'bottom': '1px', + 'left': '1px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html new file mode 100644 index 0000000000..2d8f937f07 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inset with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset"> +<meta name="assert" content="inset supports the full grammar '<'top'>{1,4}'."> +<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("inset", "auto"); +test_valid_value("inset", "-10px"); + +test_valid_value("inset", "calc(-0.5em + 10px) -20%"); +test_valid_value("inset", "auto auto", "auto"); + +test_valid_value("inset", "10px calc(-0.5em + 10px) -30px"); +test_valid_value("inset", "auto auto auto", "auto"); + +test_valid_value("inset", "10px calc(-0.5em + 10px) auto -30px"); +test_valid_value("inset", "auto auto auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html new file mode 100644 index 0000000000..6ef52bda3b --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().marginBlockStart etc.</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> +<meta name="assert" content="margin-block, margin-inline resolved values have absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #container { + will-change: transform; /* containing block for #target */ + width: 200px; + } + #parent { + width: 0px; + } + #target { + position: absolute; + font-size: 40px; + } +</style> +</head> +<body> +<div id="container"> + <div id="parent"> + <div id="target"></div> + </div> +</div> +<script> +test_computed_value("margin-block-start", "10px"); +test_computed_value("margin-block-end", "10%", "20px"); +test_computed_value("margin-inline-start", "30px"); +test_computed_value("margin-inline-end", "1em", "40px"); + +test_computed_value('margin-block-start', 'calc(10% + 40px)', '60px'); +test_computed_value('margin-block-end', 'calc(10px + 0.5em)', '30px'); +test_computed_value('margin-inline-start', 'calc(10px + 0.5em)', '30px'); +test_computed_value('margin-inline-end', 'calc(10% + 40px)', '60px'); + +test_computed_value("margin-block", "10px"); +test_computed_value("margin-block", "10px 20px"); +test_computed_value("margin-inline", "30px"); +test_computed_value("margin-inline", "30px 40px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html new file mode 100644 index 0000000000..a1e0cbf388 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing margin-block and margin-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<meta name="assert" content="margin-block, margin-inline support only the grammar '<'margin-top'>{1,2}'."> +<meta name="assert" content="margin-block, margin-inline longhands support only the grammar '<'margin-top'>'."> +<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("margin-block-start", "none"); +test_invalid_value("margin-block-end", "10"); +test_invalid_value("margin-inline-start", "20% calc(10px - 0.5em)"); +test_invalid_value("margin-inline-end", "10px, auto"); + +test_invalid_value("margin-block", "none"); +test_invalid_value("margin-block", "20%, calc(10px - 0.5em)"); +test_invalid_value("margin-inline", "10px auto 20px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html new file mode 100644 index 0000000000..9cdae57402 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: margin-block and margin-inline sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<meta name="assert" content="margin-block, margin-inline support the full grammar '<'margin-top'>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('margin-block', '10px', { + 'margin-block-start': '10px', + 'margin-block-end': '10px' +}); + +test_shorthand_value('margin-block', '20% auto', { + 'margin-block-start': '20%', + 'margin-block-end': 'auto' +}); + +test_shorthand_value('margin-inline', '30%', { + 'margin-inline-start': '30%', + 'margin-inline-end': '30%' +}); + +test_shorthand_value('margin-inline', 'auto 40px', { + 'margin-inline-start': 'auto', + 'margin-inline-end': '40px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html new file mode 100644 index 0000000000..4a278f9034 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing margin-block and margin-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<meta name="assert" content="margin-block, margin-inline support the full grammar '<'margin-top'>{1,2}'."> +<meta name="assert" content="margin-block, margin-inline longhands support the full grammar '<'margin-top'>'."> +<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("margin-block-start", "calc(20% + 10px)"); +test_valid_value("margin-block-start", "auto"); +test_valid_value("margin-block-end", "-10px"); +test_valid_value("margin-inline-start", "-20%"); +test_valid_value("margin-inline-end", "calc(2em + 3ex)"); + +test_valid_value("margin-block", "auto"); +test_valid_value("margin-block", "-10px"); +test_valid_value("margin-block", "calc(2em + 3ex) -20%"); +test_valid_value("margin-block", "auto auto", "auto"); +test_valid_value("margin-block", "-20% calc(20% + 10px)"); +test_valid_value("margin-inline", "20%"); +test_valid_value("margin-inline", "calc(2em + 3ex)"); +test_valid_value("margin-inline", "-10px auto"); +test_valid_value("margin-inline", "auto calc(2em + 3ex)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html new file mode 100644 index 0000000000..12764d3ea6 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().maxBlockSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-max-block-size"> +<meta name="assert" content="Computed max-block-size is the specified keyword, or the length-percentage made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("max-block-size", "none"); + +test_computed_value("max-block-size", "10px"); +test_computed_value("max-block-size", "20%"); +test_computed_value("max-block-size", "calc(10px + 0.5em)", "30px"); +test_computed_value("max-block-size", "calc(10px - 0.5em)", "0px"); +test_computed_value("max-block-size", "calc(20% + 10px)"); + +test_computed_value("max-block-size", "min-content"); +test_computed_value("max-block-size", "max-content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html new file mode 100644 index 0000000000..adcf6e497e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing max-block-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="max-block-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("max-block-size", "auto"); + +test_invalid_value("max-block-size", "min-content available"); +test_invalid_value("max-block-size", "max-content 10px"); +test_invalid_value("max-block-size", "20% available"); + +test_invalid_value("max-block-size", "-10px"); +test_invalid_value("max-block-size", "-20%"); +test_invalid_value("max-block-size", "60"); +test_invalid_value("max-block-size", "10px 20%"); + +test_invalid_value("max-block-size", "10px border-box"); +test_invalid_value("max-block-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html new file mode 100644 index 0000000000..75b5c6f549 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing max-block-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="max-block-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("max-block-size", "none"); + +test_valid_value("max-block-size", "10px"); +test_valid_value("max-block-size", "20%"); +test_valid_value("max-block-size", "calc(2em + 3ex)"); + +test_valid_value("max-block-size", "min-content"); +test_valid_value("max-block-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("max-block-size", "fit-content(100px)"); +// test_valid_value("max-block-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html new file mode 100644 index 0000000000..693262f250 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().maxInlineSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-max-inline-size"> +<meta name="assert" content="Computed max-inline-size is the specified keyword, or the length-percentage made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("max-inline-size", "none"); + +test_computed_value("max-inline-size", "10px"); +test_computed_value("max-inline-size", "20%"); +test_computed_value("max-inline-size", "calc(10px + 0.5em)", "30px"); +test_computed_value("max-inline-size", "calc(10px - 0.5em)", "0px"); +test_computed_value("max-inline-size", "calc(20% + 10px)"); + +test_computed_value("max-inline-size", "min-content"); +test_computed_value("max-inline-size", "max-content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html new file mode 100644 index 0000000000..fa695551b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing max-inline-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="max-inline-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("max-inline-size", "auto"); + +test_invalid_value("max-inline-size", "min-content available"); +test_invalid_value("max-inline-size", "max-content 10px"); +test_invalid_value("max-inline-size", "20% available"); + +test_invalid_value("max-inline-size", "-10px"); +test_invalid_value("max-inline-size", "-20%"); +test_invalid_value("max-inline-size", "60"); +test_invalid_value("max-inline-size", "10px 20%"); + +test_invalid_value("max-inline-size", "10px border-box"); +test_invalid_value("max-inline-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html new file mode 100644 index 0000000000..19d582962d --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing max-inline-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="max-inline-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("max-inline-size", "none"); + +test_valid_value("max-inline-size", "10px"); +test_valid_value("max-inline-size", "20%"); +test_valid_value("max-inline-size", "calc(2em + 3ex)"); + +test_valid_value("max-inline-size", "min-content"); +test_valid_value("max-inline-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("max-inline-size", "fit-content(100px)"); +// test_valid_value("max-inline-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html new file mode 100644 index 0000000000..7c59eb5a49 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().minBlockSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-min-block-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<meta name="assert" content="Computed min-block-size is the specified keyword, or the length-percentage made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } + #container { + display: flex; + } + #box { + min-block-size: auto; + } +</style> +</head> +<body> +<div id="target"></div> +<div id="container"> + <div id="box"></div> +</div> +<script> +test_computed_value("min-block-size", "auto", "0px"); + +test_computed_value("min-block-size", "10px"); +test_computed_value("min-block-size", "20%"); +test_computed_value("min-block-size", "calc(10px + 0.5em)", "30px"); +test_computed_value("min-block-size", "calc(10px - 0.5em)", "0px"); +test_computed_value("min-block-size", "calc(20% + 10px)"); + +test_computed_value("min-block-size", "min-content"); +test_computed_value("min-block-size", "max-content"); + +test(() => { + const picture = document.getElementById('box'); + assert_equals(getComputedStyle(picture).minBlockSize, 'auto'); +}, 'min-block-size auto computes to auto with flex layout.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html new file mode 100644 index 0000000000..325dc2e0ae --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing min-block-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="min-block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("min-block-size", "none"); + +test_invalid_value("min-block-size", "min-content available"); +test_invalid_value("min-block-size", "max-content 10px"); +test_invalid_value("min-block-size", "20% available"); + +test_invalid_value("min-block-size", "-10px"); +test_invalid_value("min-block-size", "-20%"); +test_invalid_value("min-block-size", "60"); +test_invalid_value("min-block-size", "10px 20%"); + +test_invalid_value("min-block-size", "10px border-box"); +test_invalid_value("min-block-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html new file mode 100644 index 0000000000..5a5d4a4385 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing min-block-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="min-block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("min-block-size", "auto"); + +test_valid_value("min-block-size", "10px"); +test_valid_value("min-block-size", "20%"); +test_valid_value("min-block-size", "calc(2em + 3ex)"); + +test_valid_value("min-block-size", "min-content"); +test_valid_value("min-block-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("min-block-size", "fit-content(100px)"); +// test_valid_value("min-block-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html new file mode 100644 index 0000000000..730ad4e474 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().minInlineSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-min-inline-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<meta name="assert" content="Computed min-inline-size is the specified keyword, or the length-percentage made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } + #container { + display: flex; + } + #box { + min-inline-size: auto; + } +</style> +</head> +<body> +<div id="target"></div> +<div id="container"> + <div id="box"></div> +</div> +<script> +test_computed_value("min-inline-size", "auto", "0px"); + +test_computed_value("min-inline-size", "10px"); +test_computed_value("min-inline-size", "20%"); +test_computed_value("min-inline-size", "calc(10px + 0.5em)", "30px"); +test_computed_value("min-inline-size", "calc(10px - 0.5em)", "0px"); +test_computed_value("min-inline-size", "calc(20% + 10px)"); + +test_computed_value("min-inline-size", "min-content"); +test_computed_value("min-inline-size", "max-content"); + +test(() => { + const picture = document.getElementById('box'); + assert_equals(getComputedStyle(picture).minInlineSize, 'auto'); +}, 'min-inline-size auto computes to auto with flex layout.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html new file mode 100644 index 0000000000..eb2cc8bb10 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing min-inline-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="min-inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("min-inline-size", "none"); + +test_invalid_value("min-inline-size", "min-content available"); +test_invalid_value("min-inline-size", "max-content 10px"); +test_invalid_value("min-inline-size", "20% available"); + +test_invalid_value("min-inline-size", "-10px"); +test_invalid_value("min-inline-size", "-20%"); +test_invalid_value("min-inline-size", "60"); +test_invalid_value("min-inline-size", "10px 20%"); + +test_invalid_value("min-inline-size", "10px border-box"); +test_invalid_value("min-inline-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html new file mode 100644 index 0000000000..fa4ba0d1bb --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing min-inline-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="min-inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<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("min-inline-size", "auto"); + +test_valid_value("min-inline-size", "10px"); +test_valid_value("min-inline-size", "20%"); +test_valid_value("min-inline-size", "calc(2em + 3ex)"); + +test_valid_value("min-inline-size", "min-content"); +test_valid_value("min-inline-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("min-inline-size", "fit-content(100px)"); +// test_valid_value("min-inline-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html new file mode 100644 index 0000000000..230f18525a --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().paddingBlockStart etc.</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> +<meta name="assert" content="padding-block, padding-inline resolved values have absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #container { + will-change: transform; /* containing block for #target */ + width: 200px; + } + #parent { + width: 0px; + } + #target { + position: absolute; + font-size: 40px; + } +</style> +</head> +<body> +<div id="container"> + <div id="parent"> + <div id="target"></div> + </div> +</div> +<script> +test_computed_value("padding-block-start", "10px"); +test_computed_value("padding-block-end", "10%", "20px"); +test_computed_value("padding-inline-start", "30px"); +test_computed_value("padding-inline-end", "1em", "40px"); + +test_computed_value('padding-block-start', 'calc(10% + 40px)', '60px'); +test_computed_value('padding-block-end', 'calc(10% - 40px)', '0px'); +test_computed_value('padding-inline-start', 'calc(10% - 40px)', '0px'); +test_computed_value('padding-inline-end', 'calc(10% + 40px)', '60px'); + +test_computed_value('padding-block-start', 'calc(10px - 0.5em)', '0px'); +test_computed_value('padding-block-end', 'calc(10px + 0.5em)', '30px'); +test_computed_value('padding-inline-start', 'calc(10px + 0.5em)', '30px'); +test_computed_value('padding-inline-end', 'calc(10px - 0.5em)', '0px'); + +test_computed_value("padding-block", "10px"); +test_computed_value("padding-block", "10px 20px"); +test_computed_value("padding-inline", "30px"); +test_computed_value("padding-inline", "30px 40px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html new file mode 100644 index 0000000000..56c2adb078 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing padding-block and padding-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<meta name="assert" content="padding-block, padding-inline support only the grammar '<'padding-top'>{1,2}'."> +<meta name="assert" content="padding-block, padding-inline longhands support only the grammar '<'padding-top'>'."> +<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("padding-block-start", "none"); +test_invalid_value("padding-block-start", "-10px"); +test_invalid_value("padding-block-end", "1px 2px"); +test_invalid_value("padding-block-end", "auto"); +test_invalid_value("padding-block-end", "10"); +test_invalid_value("padding-block-end", "1px, 2px"); +test_invalid_value("padding-inline-start", "20% calc(10px - 0.5em)"); +test_invalid_value("padding-inline-start", "2px auto"); +test_invalid_value("padding-inline-end", "-20%"); +test_invalid_value("padding-inline-end", "10px, auto"); + +test_invalid_value("padding-block", "none"); +test_invalid_value("padding-block", "20% -10px"); +test_invalid_value("padding-block", "auto, -10px"); +test_invalid_value("padding-block", "20%, calc(10px - 0.5em)"); +test_invalid_value("padding-inline", "10px auto 20px"); +test_invalid_value("padding-inline", "1px 2px 3px"); +test_invalid_value("padding-inline", "-20% calc(20% + 10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html new file mode 100644 index 0000000000..d0811c27dc --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: padding-block and padding-inline set longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<meta name="assert" content="padding-block, padding-inline support the full grammar '<'padding-top'>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('padding-block', '0% 10px', { + 'padding-block-start': '0%', + 'padding-block-end': '10px' +}); + +test_shorthand_value('padding-block', '20%', { + 'padding-block-start': '20%', + 'padding-block-end': '20%' +}); + +test_shorthand_value('padding-inline', '10px 30%', { + 'padding-inline-start': '10px', + 'padding-inline-end': '30%' +}); + +test_shorthand_value('padding-inline', '0%', { + 'padding-inline-start': '0%', + 'padding-inline-end': '0%' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html new file mode 100644 index 0000000000..1f3be17784 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing padding-block and padding-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<meta name="assert" content="padding-block, padding-inline support the full grammar '<'padding-top'>{1,2}'."> +<meta name="assert" content="padding-block, padding-inline longhands support the full grammar '<'padding-top'>'."> +<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("padding-block-start", "0", "0px"); +test_valid_value("padding-block-start", "calc(20% + 10px)"); +test_valid_value("padding-block-end", "10px"); +test_valid_value("padding-inline-start", "20%"); +test_valid_value("padding-inline-end", "calc(2em + 2ex)"); + +test_valid_value("padding-block", "10px"); +test_valid_value("padding-block", "10px 20%"); +test_valid_value("padding-inline", "20%"); +test_valid_value("padding-inline", "20% calc(20% + 10px)"); +</script> +</body> +</html> |