Tests: Import WPT tests from /css/css-sizing/parsing

This commit is contained in:
Andreas Kling 2024-10-27 18:22:19 +01:00 committed by Andreas Kling
commit ce6a7ba050
Notes: github-actions[bot] 2024-10-27 20:03:52 +00:00
40 changed files with 1256 additions and 0 deletions

View file

@ -0,0 +1,12 @@
Summary
Harness status: OK
Rerun
Found 2 tests
2 Pass
Details
Result Test Name MessagePass Property box-sizing value 'content-box'
Pass Property box-sizing value 'border-box'

View file

@ -0,0 +1,18 @@
Summary
Harness status: OK
Rerun
Found 7 tests
6 Pass
1 Fail
Details
Result Test Name MessagePass e.style['box-sizing'] = "margin-box" should not set the property value
Pass e.style['box-sizing'] = "padding-box" should not set the property value
Pass e.style['box-sizing'] = "fill-box" should not set the property value
Pass e.style['box-sizing'] = "stroke-box" should not set the property value
Pass e.style['box-sizing'] = "view-box" should not set the property value
Pass e.style['box-sizing'] = "content-box border-box" should not set the property value
Fail e.style['box-sizing'] = "content-box, border-box" should not set the property value assert_equals: expected "" but got "content-box"

View file

@ -0,0 +1,12 @@
Summary
Harness status: OK
Rerun
Found 2 tests
2 Pass
Details
Result Test Name MessagePass e.style['box-sizing'] = "content-box" should set the property value
Pass e.style['box-sizing'] = "border-box" should set the property value

View file

@ -0,0 +1,14 @@
Summary
Harness status: OK
Rerun
Found 4 tests
4 Pass
Details
Result Test Name MessagePass e.style['height'] = "none" should not set the property value
Pass e.style['height'] = "min-content max-content" should not set the property value
Pass e.style['height'] = "-10%" should not set the property value
Pass e.style['height'] = "-0.5em" should not set the property value

View file

@ -0,0 +1,21 @@
Summary
Harness status: OK
Rerun
Found 10 tests
6 Pass
4 Fail
Details
Result Test Name MessagePass e.style['height'] = "auto" should set the property value
Pass e.style['height'] = "min-content" should set the property value
Pass e.style['height'] = "max-content" should set the property value
Pass e.style['height'] = "0" should set the property value
Pass e.style['height'] = "10%" should set the property value
Pass e.style['height'] = "0.5em" should set the property value
Fail e.style['height'] = "calc(10% - 0.5em)" should set the property value assert_equals: serialization should be canonical expected "calc(10% - 0.5em)" but got "calc(10% + (0 - 0.5em))"
Fail e.style['height'] = "fit-content(10%)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['height'] = "fit-content(0.5em)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['height'] = "fit-content(calc(10% - 0.5em))" should set the property value assert_not_equals: property should be set got disallowed value ""

View file

@ -0,0 +1,23 @@
Summary
Harness status: OK
Rerun
Found 12 tests
4 Pass
8 Fail
Details
Result Test Name MessagePass Property max-height value 'none'
Fail Property max-height value 'min-content' assert_true: 'min-content' is a supported value for max-height. expected true got false
Fail Property max-height value 'max-content' assert_true: 'max-content' is a supported value for max-height. expected true got false
Pass Property max-height value '10px'
Pass Property max-height value '20%'
Pass Property max-height value 'calc(10% + 40px)'
Fail Property max-height value 'calc(10px - 0.5em)' assert_equals: expected "0px" but got "calc(10px + (0 - 0.5em))"
Fail Property max-height value 'calc(10px + 0.5em)' assert_equals: expected "30px" but got "calc(10px + 0.5em)"
Fail Property max-height value 'fit-content(10px)' assert_true: 'fit-content(10px)' is a supported value for max-height. expected true got false
Fail Property max-height value 'fit-content(20%)' assert_true: 'fit-content(20%)' is a supported value for max-height. expected true got false
Fail Property max-height value 'fit-content(calc(10% + 40px))' assert_true: 'fit-content(calc(10% + 40px))' is a supported value for max-height. expected true got false
Fail Property max-height value 'fit-content(calc(10px + 0.5em))' assert_true: 'fit-content(calc(10px + 0.5em))' is a supported value for max-height. expected true got false

View file

@ -0,0 +1,14 @@
Summary
Harness status: OK
Rerun
Found 4 tests
4 Pass
Details
Result Test Name MessagePass e.style['max-height'] = "auto" should not set the property value
Pass e.style['max-height'] = "min-content max-content" should not set the property value
Pass e.style['max-height'] = "-10%" should not set the property value
Pass e.style['max-height'] = "-0.5em" should not set the property value

View file

@ -0,0 +1,21 @@
Summary
Harness status: OK
Rerun
Found 10 tests
4 Pass
6 Fail
Details
Result Test Name MessagePass e.style['max-height'] = "none" should set the property value
Fail e.style['max-height'] = "min-content" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['max-height'] = "max-content" should set the property value assert_not_equals: property should be set got disallowed value ""
Pass e.style['max-height'] = "0" should set the property value
Pass e.style['max-height'] = "10%" should set the property value
Pass e.style['max-height'] = "0.5em" should set the property value
Fail e.style['max-height'] = "calc(10% - 0.5em)" should set the property value assert_equals: serialization should be canonical expected "calc(10% - 0.5em)" but got "calc(10% + (0 - 0.5em))"
Fail e.style['max-height'] = "fit-content(10%)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['max-height'] = "fit-content(0.5em)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['max-height'] = "fit-content(calc(10% - 0.5em))" should set the property value assert_not_equals: property should be set got disallowed value ""

View file

@ -0,0 +1,23 @@
Summary
Harness status: OK
Rerun
Found 12 tests
6 Pass
6 Fail
Details
Result Test Name MessagePass Property max-width value 'none'
Pass Property max-width value 'min-content'
Pass Property max-width value 'max-content'
Pass Property max-width value '10px'
Pass Property max-width value '20%'
Pass Property max-width value 'calc(10% + 40px)'
Fail Property max-width value 'calc(10px - 0.5em)' assert_equals: expected "0px" but got "calc(10px + (0 - 0.5em))"
Fail Property max-width value 'calc(10px + 0.5em)' assert_equals: expected "30px" but got "calc(10px + 0.5em)"
Fail Property max-width value 'fit-content(10px)' assert_true: 'fit-content(10px)' is a supported value for max-width. expected true got false
Fail Property max-width value 'fit-content(20%)' assert_true: 'fit-content(20%)' is a supported value for max-width. expected true got false
Fail Property max-width value 'fit-content(calc(10% + 40px))' assert_true: 'fit-content(calc(10% + 40px))' is a supported value for max-width. expected true got false
Fail Property max-width value 'fit-content(calc(10px + 0.5em))' assert_true: 'fit-content(calc(10px + 0.5em))' is a supported value for max-width. expected true got false

View file

@ -0,0 +1,14 @@
Summary
Harness status: OK
Rerun
Found 4 tests
4 Pass
Details
Result Test Name MessagePass e.style['max-width'] = "auto" should not set the property value
Pass e.style['max-width'] = "min-content max-content" should not set the property value
Pass e.style['max-width'] = "-10%" should not set the property value
Pass e.style['max-width'] = "-0.5em" should not set the property value

View file

@ -0,0 +1,21 @@
Summary
Harness status: OK
Rerun
Found 10 tests
6 Pass
4 Fail
Details
Result Test Name MessagePass e.style['max-width'] = "none" should set the property value
Pass e.style['max-width'] = "min-content" should set the property value
Pass e.style['max-width'] = "max-content" should set the property value
Pass e.style['max-width'] = "0" should set the property value
Pass e.style['max-width'] = "10%" should set the property value
Pass e.style['max-width'] = "0.5em" should set the property value
Fail e.style['max-width'] = "calc(10% - 0.5em)" should set the property value assert_equals: serialization should be canonical expected "calc(10% - 0.5em)" but got "calc(10% + (0 - 0.5em))"
Fail e.style['max-width'] = "fit-content(10%)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['max-width'] = "fit-content(0.5em)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['max-width'] = "fit-content(calc(10% - 0.5em))" should set the property value assert_not_equals: property should be set got disallowed value ""

View file

@ -0,0 +1,22 @@
Summary
Harness status: OK
Rerun
Found 11 tests
3 Pass
8 Fail
Details
Result Test Name MessageFail Property min-height value 'min-content' assert_true: 'min-content' is a supported value for min-height. expected true got false
Fail Property min-height value 'max-content' assert_true: 'max-content' is a supported value for min-height. expected true got false
Pass Property min-height value '10px'
Pass Property min-height value '20%'
Pass Property min-height value 'calc(10% + 40px)'
Fail Property min-height value 'calc(10px - 0.5em)' assert_equals: expected "0px" but got "calc(10px + (0 - 0.5em))"
Fail Property min-height value 'calc(10px + 0.5em)' assert_equals: expected "30px" but got "calc(10px + 0.5em)"
Fail Property min-height value 'fit-content(10px)' assert_true: 'fit-content(10px)' is a supported value for min-height. expected true got false
Fail Property min-height value 'fit-content(20%)' assert_true: 'fit-content(20%)' is a supported value for min-height. expected true got false
Fail Property min-height value 'fit-content(calc(10% + 40px))' assert_true: 'fit-content(calc(10% + 40px))' is a supported value for min-height. expected true got false
Fail Property min-height value 'fit-content(calc(10px + 0.5em))' assert_true: 'fit-content(calc(10px + 0.5em))' is a supported value for min-height. expected true got false

View file

@ -0,0 +1,22 @@
Summary
Harness status: OK
Rerun
Found 11 tests
9 Pass
2 Fail
Details
Result Test Name MessageFail e.style['min-height'] = "none" should not set the property value assert_equals: expected "" but got "none"
Pass e.style['min-height'] = "complex" should not set the property value
Pass e.style['min-height'] = "-10%" should not set the property value
Pass e.style['min-height'] = "-0.5em" should not set the property value
Pass e.style['min-height'] = "60" should not set the property value
Pass e.style['min-height'] = "10px 20%" should not set the property value
Pass e.style['min-height'] = "max-content 10px" should not set the property value
Pass e.style['min-height'] = "min-content max-content" should not set the property value
Pass e.style['min-height'] = "available" should not set the property value
Fail e.style['min-height'] = "10px border-box" should not set the property value assert_equals: expected "" but got "10px"
Pass e.style['min-height'] = "content-box 20%" should not set the property value

View file

@ -0,0 +1,21 @@
Summary
Harness status: OK
Rerun
Found 10 tests
4 Pass
6 Fail
Details
Result Test Name MessagePass e.style['min-height'] = "auto" should set the property value
Fail e.style['min-height'] = "min-content" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['min-height'] = "max-content" should set the property value assert_not_equals: property should be set got disallowed value ""
Pass e.style['min-height'] = "0" should set the property value
Pass e.style['min-height'] = "10%" should set the property value
Pass e.style['min-height'] = "0.5em" should set the property value
Fail e.style['min-height'] = "calc(10% - 0.5em)" should set the property value assert_equals: serialization should be canonical expected "calc(10% - 0.5em)" but got "calc(10% + (0 - 0.5em))"
Fail e.style['min-height'] = "fit-content(10%)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['min-height'] = "fit-content(0.5em)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['min-height'] = "fit-content(calc(10% - 0.5em))" should set the property value assert_not_equals: property should be set got disallowed value ""

View file

@ -0,0 +1,22 @@
Summary
Harness status: OK
Rerun
Found 11 tests
5 Pass
6 Fail
Details
Result Test Name MessagePass Property min-width value 'min-content'
Pass Property min-width value 'max-content'
Pass Property min-width value '10px'
Pass Property min-width value '20%'
Pass Property min-width value 'calc(10% + 40px)'
Fail Property min-width value 'calc(10px - 0.5em)' assert_equals: expected "0px" but got "calc(10px + (0 - 0.5em))"
Fail Property min-width value 'calc(10px + 0.5em)' assert_equals: expected "30px" but got "calc(10px + 0.5em)"
Fail Property min-width value 'fit-content(10px)' assert_true: 'fit-content(10px)' is a supported value for min-width. expected true got false
Fail Property min-width value 'fit-content(20%)' assert_true: 'fit-content(20%)' is a supported value for min-width. expected true got false
Fail Property min-width value 'fit-content(calc(10% + 40px))' assert_true: 'fit-content(calc(10% + 40px))' is a supported value for min-width. expected true got false
Fail Property min-width value 'fit-content(calc(10px + 0.5em))' assert_true: 'fit-content(calc(10px + 0.5em))' is a supported value for min-width. expected true got false

View file

@ -0,0 +1,22 @@
Summary
Harness status: OK
Rerun
Found 11 tests
9 Pass
2 Fail
Details
Result Test Name MessageFail e.style['min-width'] = "none" should not set the property value assert_equals: expected "" but got "none"
Pass e.style['min-width'] = "complex" should not set the property value
Pass e.style['min-width'] = "-10%" should not set the property value
Pass e.style['min-width'] = "-0.5em" should not set the property value
Pass e.style['min-width'] = "60" should not set the property value
Pass e.style['min-width'] = "10px 20%" should not set the property value
Pass e.style['min-width'] = "max-content 10px" should not set the property value
Pass e.style['min-width'] = "min-content max-content" should not set the property value
Pass e.style['min-width'] = "available" should not set the property value
Fail e.style['min-width'] = "10px border-box" should not set the property value assert_equals: expected "" but got "10px"
Pass e.style['min-width'] = "content-box 20%" should not set the property value

View file

@ -0,0 +1,21 @@
Summary
Harness status: OK
Rerun
Found 10 tests
6 Pass
4 Fail
Details
Result Test Name MessagePass e.style['min-width'] = "auto" should set the property value
Pass e.style['min-width'] = "min-content" should set the property value
Pass e.style['min-width'] = "max-content" should set the property value
Pass e.style['min-width'] = "0" should set the property value
Pass e.style['min-width'] = "10%" should set the property value
Pass e.style['min-width'] = "0.5em" should set the property value
Fail e.style['min-width'] = "calc(10% - 0.5em)" should set the property value assert_equals: serialization should be canonical expected "calc(10% - 0.5em)" but got "calc(10% + (0 - 0.5em))"
Fail e.style['min-width'] = "fit-content(10%)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['min-width'] = "fit-content(0.5em)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['min-width'] = "fit-content(calc(10% - 0.5em))" should set the property value assert_not_equals: property should be set got disallowed value ""

View file

@ -0,0 +1,14 @@
Summary
Harness status: OK
Rerun
Found 4 tests
4 Pass
Details
Result Test Name MessagePass e.style['width'] = "none" should not set the property value
Pass e.style['width'] = "min-content max-content" should not set the property value
Pass e.style['width'] = "-10%" should not set the property value
Pass e.style['width'] = "-0.5em" should not set the property value

View file

@ -0,0 +1,21 @@
Summary
Harness status: OK
Rerun
Found 10 tests
6 Pass
4 Fail
Details
Result Test Name MessagePass e.style['width'] = "auto" should set the property value
Pass e.style['width'] = "min-content" should set the property value
Pass e.style['width'] = "max-content" should set the property value
Pass e.style['width'] = "0" should set the property value
Pass e.style['width'] = "10%" should set the property value
Pass e.style['width'] = "0.5em" should set the property value
Fail e.style['width'] = "calc(10% - 0.5em)" should set the property value assert_equals: serialization should be canonical expected "calc(10% - 0.5em)" but got "calc(10% + (0 - 0.5em))"
Fail e.style['width'] = "fit-content(10%)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['width'] = "fit-content(0.5em)" should set the property value assert_not_equals: property should be set got disallowed value ""
Fail e.style['width'] = "fit-content(calc(10% - 0.5em))" should set the property value assert_not_equals: property should be set got disallowed value ""

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing: getComputedStyle().boxSizing</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing">
<meta name="assert" content="box-sizing computed value is as specified.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("box-sizing", "content-box");
test_computed_value("box-sizing", "border-box");
</script>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing box-sizing with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing">
<meta name="assert" content="box-sizing supports only the grammar 'content-box | border-box'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("box-sizing", "margin-box");
test_invalid_value("box-sizing", "padding-box");
test_invalid_value("box-sizing", "fill-box");
test_invalid_value("box-sizing", "stroke-box");
test_invalid_value("box-sizing", "view-box");
test_invalid_value("box-sizing", "content-box border-box");
test_invalid_value("box-sizing", "content-box, border-box");
</script>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing box-sizing with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-box-sizing">
<meta name="assert" content="box-sizing supports the full grammar 'content-box | border-box'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("box-sizing", "content-box");
test_valid_value("box-sizing", "border-box");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing height with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height">
<meta name="assert" content="height supports only the 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("height", "none");
test_invalid_value("height", "min-content max-content");
test_invalid_value("height", "-10%");
test_invalid_value("height", "-0.5em");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing height with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height">
<meta name="assert" content="height 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("height", "auto");
test_valid_value("height", "min-content");
test_valid_value("height", "max-content");
test_valid_value("height", "0", "0px");
test_valid_value("height", "10%");
test_valid_value("height", "0.5em");
test_valid_value("height", "calc(10% - 0.5em)");
test_valid_value("height", "fit-content(10%)");
test_valid_value("height", "fit-content(0.5em)");
test_valid_value("height", "fit-content(calc(10% - 0.5em))");
</script>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS basic box model: getComputedStyle().maxHeight</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height">
<meta name="assert" content="max-height computed value is as specified, with <length-percentage> values computed">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/computed-testcommon.js"></script>
<style>
#target {
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("max-height", "none");
test_computed_value("max-height", "min-content");
test_computed_value("max-height", "max-content");
test_computed_value("max-height", "10px");
test_computed_value("max-height", "20%");
test_computed_value('max-height', 'calc(10% + 40px)');
test_computed_value('max-height', 'calc(10px - 0.5em)', '0px');
test_computed_value('max-height', 'calc(10px + 0.5em)', '30px');
test_computed_value("max-height", "fit-content(10px)");
test_computed_value("max-height", "fit-content(20%)");
test_computed_value("max-height", "fit-content(calc(10% + 40px))");
test_computed_value("max-height", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing max-height with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height">
<meta name="assert" content="max-height supports only the 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("max-height", "auto");
test_invalid_value("max-height", "min-content max-content");
test_invalid_value("max-height", "-10%");
test_invalid_value("max-height", "-0.5em");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing max-height with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height">
<meta name="assert" content="max-height 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("max-height", "none");
test_valid_value("max-height", "min-content");
test_valid_value("max-height", "max-content");
test_valid_value("max-height", "0", "0px");
test_valid_value("max-height", "10%");
test_valid_value("max-height", "0.5em");
test_valid_value("max-height", "calc(10% - 0.5em)");
test_valid_value("max-height", "fit-content(10%)");
test_valid_value("max-height", "fit-content(0.5em)");
test_valid_value("max-height", "fit-content(calc(10% - 0.5em))");
</script>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS basic box model: getComputedStyle().maxWidth</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width">
<meta name="assert" content="max-width computed value is as specified, with <length-percentage> values computed">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/computed-testcommon.js"></script>
<style>
#target {
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("max-width", "none");
test_computed_value("max-width", "min-content");
test_computed_value("max-width", "max-content");
test_computed_value("max-width", "10px");
test_computed_value("max-width", "20%");
test_computed_value('max-width', 'calc(10% + 40px)');
test_computed_value('max-width', 'calc(10px - 0.5em)', '0px');
test_computed_value('max-width', 'calc(10px + 0.5em)', '30px');
test_computed_value("max-width", "fit-content(10px)");
test_computed_value("max-width", "fit-content(20%)");
test_computed_value("max-width", "fit-content(calc(10% + 40px))");
test_computed_value("max-width", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing max-width with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width">
<meta name="assert" content="max-width supports only the 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("max-width", "auto");
test_invalid_value("max-width", "min-content max-content");
test_invalid_value("max-width", "-10%");
test_invalid_value("max-width", "-0.5em");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing max-width with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width">
<meta name="assert" content="max-width 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("max-width", "none");
test_valid_value("max-width", "min-content");
test_valid_value("max-width", "max-content");
test_valid_value("max-width", "0", "0px");
test_valid_value("max-width", "10%");
test_valid_value("max-width", "0.5em");
test_valid_value("max-width", "calc(10% - 0.5em)");
test_valid_value("max-width", "fit-content(10%)");
test_valid_value("max-width", "fit-content(0.5em)");
test_valid_value("max-width", "fit-content(calc(10% - 0.5em))");
</script>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS basic box model: getComputedStyle().minHeight</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height">
<meta name="assert" content="min-height computed value is as specified, with <length-percentage> values computed">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/computed-testcommon.js"></script>
<style>
#target {
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("min-height", "min-content");
test_computed_value("min-height", "max-content");
test_computed_value("min-height", "10px");
test_computed_value("min-height", "20%");
test_computed_value('min-height', 'calc(10% + 40px)');
test_computed_value('min-height', 'calc(10px - 0.5em)', '0px');
test_computed_value('min-height', 'calc(10px + 0.5em)', '30px');
test_computed_value("min-height", "fit-content(10px)");
test_computed_value("min-height", "fit-content(20%)");
test_computed_value("min-height", "fit-content(calc(10% + 40px))");
test_computed_value("min-height", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
</script>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing min-height with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height">
<meta name="assert" content="min-height supports only the 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("min-height", "none");
test_invalid_value("min-height", "complex");
test_invalid_value("min-height", "-10%");
test_invalid_value("min-height", "-0.5em");
test_invalid_value("min-height", "60");
test_invalid_value("min-height", "10px 20%");
test_invalid_value("min-height", "max-content 10px");
test_invalid_value("min-height", "min-content max-content");
// The following were previously supported by a min-height definition in
// https://drafts.csswg.org/css-box-3/
test_invalid_value("min-height", "available");
test_invalid_value("min-height", "10px border-box");
test_invalid_value("min-height", "content-box 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing min-height with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height">
<meta name="assert" content="min-height 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("min-height", "auto");
test_valid_value("min-height", "min-content");
test_valid_value("min-height", "max-content");
test_valid_value("min-height", "0", "0px");
test_valid_value("min-height", "10%");
test_valid_value("min-height", "0.5em");
test_valid_value("min-height", "calc(10% - 0.5em)");
test_valid_value("min-height", "fit-content(10%)");
test_valid_value("min-height", "fit-content(0.5em)");
test_valid_value("min-height", "fit-content(calc(10% - 0.5em))");
</script>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS basic box model: getComputedStyle().minWidth</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width">
<meta name="assert" content="min-width computed value is as specified, with <length-percentage> values computed">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../support/computed-testcommon.js"></script>
<style>
#target {
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("min-width", "min-content");
test_computed_value("min-width", "max-content");
test_computed_value("min-width", "10px");
test_computed_value("min-width", "20%");
test_computed_value('min-width', 'calc(10% + 40px)');
test_computed_value('min-width', 'calc(10px - 0.5em)', '0px');
test_computed_value('min-width', 'calc(10px + 0.5em)', '30px');
test_computed_value("min-width", "fit-content(10px)");
test_computed_value("min-width", "fit-content(20%)");
test_computed_value("min-width", "fit-content(calc(10% + 40px))");
test_computed_value("min-width", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
</script>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing min-width with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width">
<meta name="assert" content="min-width supports only the 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("min-width", "none");
test_invalid_value("min-width", "complex");
test_invalid_value("min-width", "-10%");
test_invalid_value("min-width", "-0.5em");
test_invalid_value("min-width", "60");
test_invalid_value("min-width", "10px 20%");
test_invalid_value("min-width", "max-content 10px");
test_invalid_value("min-width", "min-content max-content");
// The following were previously supported by a min-width definition in
// https://drafts.csswg.org/css-box-3/
test_invalid_value("min-width", "available");
test_invalid_value("min-width", "10px border-box");
test_invalid_value("min-width", "content-box 20%");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing min-width with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width">
<meta name="assert" content="min-width 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("min-width", "auto");
test_valid_value("min-width", "min-content");
test_valid_value("min-width", "max-content");
test_valid_value("min-width", "0", "0px");
test_valid_value("min-width", "10%");
test_valid_value("min-width", "0.5em");
test_valid_value("min-width", "calc(10% - 0.5em)");
test_valid_value("min-width", "fit-content(10%)");
test_valid_value("min-width", "fit-content(0.5em)");
test_valid_value("min-width", "fit-content(calc(10% - 0.5em))");
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing width with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
<meta name="assert" content="width supports only the 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("width", "none");
test_invalid_value("width", "min-content max-content");
test_invalid_value("width", "-10%");
test_invalid_value("width", "-0.5em");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing width with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
<meta name="assert" content="width 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="../../support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("width", "auto");
test_valid_value("width", "min-content");
test_valid_value("width", "max-content");
test_valid_value("width", "0", "0px");
test_valid_value("width", "10%");
test_valid_value("width", "0.5em");
test_valid_value("width", "calc(10% - 0.5em)");
test_valid_value("width", "fit-content(10%)");
test_valid_value("width", "fit-content(0.5em)");
test_valid_value("width", "fit-content(calc(10% - 0.5em))");
</script>
</body>
</html>

View file

@ -0,0 +1,189 @@
'use strict';
/**
* Create test that a CSS property computes to the expected value.
* The document element #target is used to perform the test.
*
* @param {string} property The name of the CSS property being tested.
* @param {string} specified A specified value for the property.
* @param {string|array} computed The expected computed value,
* or an array of permitted computed value.
* If omitted, defaults to specified.
* @param {string} titleExtra Additional information to put in test output.
* @param {object} options Additional test information, such as a custom
* comparison function required for color tests.
* comparisonFunction is a function that takes two
* arguments, actual and expected and contains asserts.
*/
function test_computed_value(property, specified, computed, titleExtra, options = {}) {
if (!computed)
computed = specified;
test(() => {
const target = document.getElementById('target');
assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
target.style[property] = '';
target.style[property] = specified;
let readValue = getComputedStyle(target)[property];
if (options.comparisonFunction) {
options.comparisonFunction(readValue, computed);
} else if (Array.isArray(computed)) {
assert_in_array(readValue, computed);
} else {
assert_equals(readValue, computed);
}
if (readValue !== specified) {
target.style[property] = '';
target.style[property] = readValue;
assert_equals(getComputedStyle(target)[property], readValue,
'computed value should round-trip');
}
}, `Property ${property} value '${specified}'${titleExtra ? ' ' + titleExtra : ''}`);
}
function testComputedValueGreaterOrLowerThan(property, specified, expected, titleExtra) {
test(() => {
const target = document.getElementById('target');
assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
target.style[property] = '';
target.style[property] = specified;
let readValue = parseFloat(getComputedStyle(target)[property]);
assert_true(isFinite(readValue), specified + " expected finite value but got " + readValue)
assert_false(isNaN(readValue), specified + " expected finite value but got " + readValue)
if (expected > 0)
assert_greater_than_equal(readValue, expected, specified);
else
assert_less_than_equal(readValue, expected, specified);
}, `Property ${property} value '${specified}'${titleExtra ? ' ' + titleExtra : ''}`);
}
function testTransformValuesCloseTo(specified, epsilon, expectedValue, description)
{
if(!description) {
description = `Property ${specified} value expected same with ${expectedValue} in +/-${epsilon}`
}
test(function()
{
var targetElement = document.getElementById("target");
targetElement.style.setProperty('transform', "initial");
/*
Since we are running many consecutive tests on the same
element, then it is necessary to reset its property
to an initial value before actually re-testing it.
*/
targetElement.style.setProperty('transform', specified);
var computedCalcValue = getComputedStyle(targetElement)['transform'];
/*
We first strip out the word "matrix" with the
opening parenthesis "(" and the closing
parenthesis ")"
*/
computedCalcValue = computedCalcValue.replace("matrix(", "").replace(")", "");
/*
Then, we split the string at each comma ","
and store the resulting 6 sub-strings into
tableSplitComputedCalcValue
*/
var tableSplitCalcValue = computedCalcValue.split(",");
/*
We convert the 6 sub-strings into numerical floating values
so that mathematical operations (subtraction, absolute value,
comparison) can be performed.
*/
tableSplitCalcValue[0] = parseFloat(tableSplitCalcValue[0]);
tableSplitCalcValue[1] = parseFloat(tableSplitCalcValue[1]);
tableSplitCalcValue[2] = parseFloat(tableSplitCalcValue[2]);
tableSplitCalcValue[3] = parseFloat(tableSplitCalcValue[3]);
tableSplitCalcValue[4] = parseFloat(tableSplitCalcValue[4]);
tableSplitCalcValue[5] = parseFloat(tableSplitCalcValue[5]);
/*
Now, we execute the same steps with the expectedValue
*/
targetElement.style.setProperty('transform', expectedValue);
var computedExpectedValue = getComputedStyle(targetElement)['transform'];
/*
We first strip out the word "matrix" with the
opening parenthesis "(" and the closing
parenthesis ")"
*/
computedExpectedValue = computedExpectedValue.replace("matrix(", "").replace(")", "");
/*
Then, we split the string at each comma ","
and store the resulting 6 sub-strings into
tableSplitComputedCalcValue
*/
var tableSplitExpectedValue = computedExpectedValue.split(",");
/*
We convert the 6 sub-strings into numerical floating values
so that mathematical operations (subtraction, absolute value,
comparison) can be performed.
*/
tableSplitExpectedValue[0] = parseFloat(tableSplitExpectedValue[0]);
tableSplitExpectedValue[1] = parseFloat(tableSplitExpectedValue[1]);
tableSplitExpectedValue[2] = parseFloat(tableSplitExpectedValue[2]);
tableSplitExpectedValue[3] = parseFloat(tableSplitExpectedValue[3]);
tableSplitExpectedValue[4] = parseFloat(tableSplitExpectedValue[4]);
tableSplitExpectedValue[5] = parseFloat(tableSplitExpectedValue[5]);
assert_array_approx_equals(tableSplitCalcValue, tableSplitExpectedValue, epsilon);
} , description);
}
function test_pseudo_computed_value(pseudo, property, specified, computed, titleExtra) {
if (!computed)
computed = specified;
test(() => {
assert_true(/^::\w+$/.test(pseudo), pseudo + " doesn't seem to be a pseudo-element");
const styleElement = document.createElement("style");
document.documentElement.appendChild(styleElement);
try {
const {sheet} = styleElement;
sheet.insertRule("#target" + pseudo + "{}");
const {style} = sheet.cssRules[0];
const target = document.getElementById('target');
assert_true(property in getComputedStyle(target, pseudo), property + " doesn't seem to be supported in the computed style");
assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
style[property] = specified;
let readValue = getComputedStyle(target, pseudo)[property];
if (Array.isArray(computed)) {
assert_in_array(readValue, computed);
} else {
assert_equals(readValue, computed);
}
if (readValue !== specified) {
style[property] = '';
style[property] = readValue;
assert_equals(getComputedStyle(target, pseudo)[property], readValue,
'computed value should round-trip');
}
} finally {
document.documentElement.removeChild(styleElement);
}
}, `Property ${property} value '${specified}' in ${pseudo}${titleExtra ? ' ' + titleExtra : ''}`);
}

View file

@ -0,0 +1,186 @@
'use strict';
/**
* Create test that a CSS property computes to the expected value.
* The document element #target is used to perform the test.
*
* @param {string} property The name of the CSS property being tested.
* @param {string} value A specified value for the property.
* @param {string|array} serializedValue The expected serialized value,
* or an array of permitted serializations.
* If omitted, defaults to the specified value.
* @param {object} options Additional test information, such as a custom
* comparison function required for color tests.
* comparisonFunction is a function that takes two
* arguments, actual and expected and contains asserts.
*/
function test_valid_value(property, value, serializedValue, options = {}) {
if (arguments.length < 3)
serializedValue = value;
var stringifiedValue = JSON.stringify(value);
test(function(){
var div = document.getElementById('target') || document.createElement('div');
div.style[property] = "";
div.style[property] = value;
var readValue = div.style.getPropertyValue(property);
assert_not_equals(readValue, "", "property should be set");
if (options.comparisonFunction)
options.comparisonFunction(readValue, serializedValue);
else if (Array.isArray(serializedValue))
assert_in_array(readValue, serializedValue, "serialization should be sound");
else
assert_equals(readValue, serializedValue, "serialization should be canonical");
div.style[property] = readValue;
assert_equals(div.style.getPropertyValue(property), readValue, "serialization should round-trip");
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
}
function test_invalid_value(property, value) {
var stringifiedValue = JSON.stringify(value);
test(function(){
var div = document.getElementById('target') || document.createElement('div');
div.style[property] = "";
div.style[property] = value;
assert_equals(div.style.getPropertyValue(property), "");
}, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
}
function test_valid_forgiving_selector(selector) {
test_valid_selector(selector, selector, { onlyWhenForgiving: true });
}
// serializedSelector can be the expected serialization of selector,
// or an array of permitted serializations,
// or omitted if value should serialize as selector.
function test_valid_selector(selector, serializedSelector, options) {
if (arguments.length < 2)
serializedSelector = selector;
const stringifiedSelector = JSON.stringify(selector);
test(function(){
document.querySelector(selector);
assert_true(true, stringifiedSelector + " should not throw in querySelector");
const style = document.createElement("style");
document.head.append(style);
const {sheet} = style;
document.head.removeChild(style);
const {cssRules} = sheet;
assert_equals(cssRules.length, 0, "Sheet should have no rule");
sheet.insertRule(selector + "{}");
assert_equals(cssRules.length, 1, "Sheet should have 1 rule");
const readSelector = cssRules[0].selectorText;
if (Array.isArray(serializedSelector))
assert_in_array(readSelector, serializedSelector, "serialization should be sound");
else
assert_equals(readSelector, serializedSelector, "serialization should be canonical");
sheet.deleteRule(0);
assert_equals(cssRules.length, 0, "Sheet should have no rule");
sheet.insertRule(readSelector + "{}");
assert_equals(cssRules.length, 1, "Sheet should have 1 rule");
assert_equals(cssRules[0].selectorText, readSelector, "serialization should round-trip");
let supports = !options?.onlyWhenForgiving;
assert_equals(CSS.supports(`selector(${selector})`), supports, "CSS.supports() reports the expected value");
}, stringifiedSelector + " should be a valid selector");
}
function test_invalid_selector(selector) {
const stringifiedSelector = JSON.stringify(selector);
test(function(){
assert_throws_dom(
DOMException.SYNTAX_ERR,
() => document.querySelector(selector),
stringifiedSelector + " should throw in querySelector");
const style = document.createElement("style");
document.head.append(style);
const {sheet} = style;
document.head.removeChild(style);
assert_throws_dom(
DOMException.SYNTAX_ERR,
() => sheet.insertRule(selector + "{}"),
stringifiedSelector + " should throw in insertRule");
}, stringifiedSelector + " should be an invalid selector");
}
// serialized can be the expected serialization of rule, or an array of
// permitted serializations, or omitted if value should serialize as rule.
function test_valid_rule(rule, serialized) {
if (serialized === undefined)
serialized = rule;
test(function(){
const style = document.createElement("style");
document.head.append(style);
const {sheet} = style;
document.head.removeChild(style);
const {cssRules} = sheet;
assert_equals(cssRules.length, 0, "Sheet should have no rules");
sheet.insertRule(rule);
assert_equals(cssRules.length, 1, "Sheet should have 1 rule");
const serialization = cssRules[0].cssText;
if (Array.isArray(serialized))
assert_in_array(serialization, serialized, "serialization should be sound");
else
assert_equals(serialization, serialized, "serialization should be canonical");
sheet.deleteRule(0);
assert_equals(cssRules.length, 0, "Sheet should have no rule");
sheet.insertRule(serialization);
assert_equals(cssRules.length, 1, "Sheet should have 1 rule");
assert_equals(cssRules[0].cssText, serialization, "serialization should round-trip");
}, rule + " should be a valid rule");
}
function test_invalid_rule(rule) {
test(function(){
const style = document.createElement("style");
document.head.append(style);
const {sheet} = style;
document.head.removeChild(style);
assert_throws_dom(
DOMException.SYNTAX_ERR,
() => sheet.insertRule(rule),
rule + " should throw in insertRule");
}, rule + " should be an invalid rule");
}
function _set_style(rule) {
const style = document.createElement('style');
style.innerText = rule;
document.head.append(style);
const { sheet } = style;
document.head.removeChild(style);
return sheet;
}
function test_keyframes_name_valid(keyframes_name) {
test(t => {
const sheet = _set_style(`@keyframes ${keyframes_name} {}`);
assert_equals(sheet.cssRules.length, 1);
}, `valid: @keyframes ${keyframes_name} { }`);
}
function test_keyframes_name_invalid(keyframes_name) {
test(t => {
const sheet = _set_style(`@keyframes ${keyframes_name} {}`);
assert_equals(sheet.cssRules.length, 0);
}, `invalid: @keyframes ${keyframes_name} { }`);
}