mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-29 13:46:31 +00:00
Tests: Import WPT tests from /css/css-sizing/parsing
This commit is contained in:
Andreas Kling
Andreas Kling
parent
037c034468
commit
ce6a7ba050
Notes:
github-actions[bot]
2024-10-27 20:03:52 +00:00
Author: https://github.com/awesomekling
Commit: ce6a7ba050
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2007
40 changed files with 1256 additions and 0 deletions
|
|
@ -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'
|
||||
|
|
@ -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"
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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 ""
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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 ""
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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 ""
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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 ""
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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 ""
|
||||
|
|
@ -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
|
||||
|
|
@ -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 ""
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 : ''}`);
|
||||
}
|
||||
|
|
@ -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} { }`);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue