mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-28 21:26:22 +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,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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue