diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-sizing')
606 files changed, 17645 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-sizing/META.yml b/testing/web-platform/tests/css/css-sizing/META.yml new file mode 100644 index 0000000000..086e654a8e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/META.yml @@ -0,0 +1,4 @@ +spec: https://drafts.csswg.org/css-sizing/ +suggested_reviewers: + - tabatkins + - fantasai diff --git a/testing/web-platform/tests/css/css-sizing/animation/aspect-ratio-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/aspect-ratio-interpolation.html new file mode 100644 index 0000000000..3628ff607c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/aspect-ratio-interpolation.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>aspect-ratio interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<meta name="assert" content="aspect-ratio supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + font-size: 16px; + background-color: black; + width: 10px; + aspect-ratio: 0.5; +} +</style> + +<body> + <template id="target-template"> + <div class="container"> + <div class="target"></div> + </div> + </template> +</body> + +<script> +test_interpolation({ + property: 'aspect-ratio', + from: '0.5', + to: '2', +}, [ + {at: -0.5, expect: '0.25 / 1'}, + {at: 0, expect: '0.5 / 1'}, + {at: 0.5, expect: '1 / 1'}, + {at: 1, expect: '2 / 1'}, + {at: 1.5, expect: '4 / 1'} +]); + +test_interpolation({ + property: 'aspect-ratio', + from: '1 / 2', + to: '2 / 1', +}, [ + {at: -0.5, expect: '0.25 / 1'}, + {at: 0, expect: '0.5 / 1'}, + {at: 0.5, expect: '1 / 1'}, + {at: 1, expect: '2 / 1'}, + {at: 1.5, expect: '4 / 1'} +]); + +// Test neutral keyframe +test_interpolation({ + property: 'aspect-ratio', + from: '', + to: '2 / 1', +}, [ + {at: -0.5, expect: '0.25 / 1'}, + {at: 0, expect: '0.5 / 1'}, + {at: 0.5, expect: '1 / 1'}, + {at: 1, expect: '2 / 1'}, + {at: 1.5, expect: '4 / 1'} +]); + +test_interpolation({ + property: 'aspect-ratio', + from: 'auto 1 / 2', + to: 'auto 2 / 1', +}, [ + {at: -0.5, expect: 'auto 0.25 / 1'}, + {at: 0, expect: 'auto 0.5 / 1'}, + {at: 0.5, expect: 'auto 1 / 1'}, + {at: 1, expect: 'auto 2 / 1'}, + {at: 1.5, expect: 'auto 4 / 1'} +]); + +test_no_interpolation({ + property: 'aspect-ratio', + from: 'auto', + to: '2 / 1', +}); + +test_no_interpolation({ + property: 'aspect-ratio', + from: 'auto 1 / 1', + to: '2 / 1', +}); + +// If either number in the ratio is 0 or infinite, it represents a degenerate +// ratio and will not be interpolated: +// https://drafts.csswg.org/css-values-4/#combine-ratio +test_no_interpolation({ + property: 'aspect-ratio', + from: '1 / 0', + to: '1 / 1', +}); +test_no_interpolation({ + property: 'aspect-ratio', + from: '1 / 1', + to: '0 / 1', +}); + +// Addition of <ratio>s is not possible. +// https://drafts.csswg.org/css-values/#combine-ratio +// +// And if a value type does not define a specific procedure for addition or is +// defined as not additive, its addition operation is simply Vresult = Va. +// (The first value is Va, the second value is Vb, and the result is Vresult.) +// https://drafts.csswg.org/css-values-4/#not-additive, +// +// So in this test case: +// 1. The 1st keyframe: { aspectRatio: 0.5/1, composite: 'replace', offset: 0 } +// 2. The 2nd keyframe: { aspectRatio: 1/1, composite: 'add', offset: 1 } +// and the underlying value is 2/1. Based on the spec, the composited from_value +// is 0.5/1 (because we just replace it), and the composited to_value is 2/1 +// (because we use Va as the result value). +test_composition({ + property: 'aspect-ratio', + underlying: '2 / 1', + replaceFrom: '0.5 / 1', + addTo: '1 / 1', +}, [ + {at: 0, expect: '0.5 / 1'}, + {at: 0.5, expect: '1 / 1'}, + {at: 1, expect: '2 / 1'} +]); + +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/animation/height-composition.html b/testing/web-platform/tests/css/css-sizing/animation/height-composition.html new file mode 100644 index 0000000000..094e247dcf --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/height-composition.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>height composition</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height"> +<meta name="assert" content="height supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'height', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'height', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'height', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'height', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'height', + underlying: '100px', + addFrom: '100px', + addTo: 'auto', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'auto'}, + {at: 1, expect: 'auto'}, + {at: 1.5, expect: 'auto'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/animation/height-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/height-interpolation.html new file mode 100644 index 0000000000..10ceed5b2c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/height-interpolation.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>height interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height"> +<meta name="assert" content="height supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + height: 200px; +} +.target { + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + margin-right: 5px; + height: 10px; +} +.expected { + background-color: green; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'height', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_no_interpolation({ + property: 'height', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'height', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '254px'}, + {at: 0, expect: '200px'}, + {at: 0.3, expect: '146px'}, + {at: 0.6, expect: '92px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '0px'}, +]); + +test_no_interpolation({ + property: 'height', + from: 'unset', + to: '20px', +}); + +test_interpolation({ + property: 'height', + from: '0px', + to: '100px', +}, [ + {at: -0.3, expect: '0px'}, // CSS height can't be negative. + {at: 0, expect: '0px'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/max-height-composition.html b/testing/web-platform/tests/css/css-sizing/animation/max-height-composition.html new file mode 100644 index 0000000000..fb5b241d00 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/max-height-composition.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>max-height composition</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height"> +<meta name="assert" content="max-height supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'max-height', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'max-height', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'max-height', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'max-height', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'max-height', + underlying: '100px', + addFrom: '100px', + addTo: 'none', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'none'}, + {at: 1, expect: 'none'}, + {at: 1.5, expect: 'none'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/animation/max-height-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/max-height-interpolation.html new file mode 100644 index 0000000000..c4cab0e1cf --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/max-height-interpolation.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>max-height interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height"> +<meta name="assert" content="max-height supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + max-height: 30px; +} +.target { + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + max-height: 10px; +} +.expected { + background-color: green; +} + +</style> + +<body> +<template id="target-template"> + <div> + <div class="target"></div> + </div> +</template> +</body> + +<script> +test_interpolation({ + property: 'max-height', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.5, expect: '5px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_no_interpolation({ + property: 'max-height', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'max-height', + from: 'inherit', + to: '20px', +}, [ + {at: -0.5, expect: '35px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_no_interpolation({ + property: 'max-height', + from: 'unset', + to: '20px', +}); + +test_interpolation({ + property: 'max-height', + from: '0px', + to: '100px', +}, [ + {at: -0.5, expect: '0'}, // CSS max-height can't be negative. + {at: 0, expect: '0'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/max-width-composition.html b/testing/web-platform/tests/css/css-sizing/animation/max-width-composition.html new file mode 100644 index 0000000000..8b6d8b704c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/max-width-composition.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>max-width composition</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width"> +<meta name="assert" content="max-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'max-width', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'max-width', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'max-width', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'max-width', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'max-width', + underlying: '100px', + addFrom: '100px', + addTo: 'none', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'none'}, + {at: 1, expect: 'none'}, + {at: 1.5, expect: 'none'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/animation/max-width-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/max-width-interpolation.html new file mode 100644 index 0000000000..111199baa7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/max-width-interpolation.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>max-width interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width"> +<meta name="assert" content="max-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + max-width: 100px; +} +.target { + width: 200px; + height: 10px; + background-color: black; + max-width: 10px; +} +.expected { + background-color: green; + margin-bottom: 10px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'max-width', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.5, expect: '5px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_no_interpolation({ + property: 'max-width', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'max-width', + from: 'inherit', + to: '20px', +}, [ + {at: -0.5, expect: '140px'}, + {at: 0, expect: '100px'}, + {at: 0.3, expect: '76px'}, + {at: 0.6, expect: '52px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '0px'}, +]); + +test_no_interpolation({ + property: 'max-width', + from: 'unset', + to: '20px', +}); + +test_interpolation({ + property: 'max-width', + from: '0px', + to: '100px', +}, [ + {at: -0.5, expect: '0'}, // CSS max-width can't be negative. + {at: 0, expect: '0'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/min-height-composition.html b/testing/web-platform/tests/css/css-sizing/animation/min-height-composition.html new file mode 100644 index 0000000000..1e92b0ec2f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/min-height-composition.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>min-height composition</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height"> +<meta name="assert" content="min-height supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'min-height', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'min-height', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'min-height', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'min-height', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'min-height', + underlying: '100px', + addFrom: '100px', + addTo: 'auto', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'auto'}, + {at: 1, expect: 'auto'}, + {at: 1.5, expect: 'auto'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/animation/min-height-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/min-height-interpolation.html new file mode 100644 index 0000000000..6fd5b4e2f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/min-height-interpolation.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>min-height interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height"> +<meta name="assert" content="min-height supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + min-height: 30px; +} +.target { + width: 10px; + height: 0px; + background-color: black; + display: inline-block; + min-height: 10px; +} +.expected { + background-color: green; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'min-height', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.5, expect: '5px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_no_interpolation({ + property: 'min-height', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'min-height', + from: 'inherit', + to: '20px', +}, [ + {at: -0.5, expect: '35px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_no_interpolation({ + property: 'min-height', + from: 'unset', + to: '20px', +}); + +test_interpolation({ + property: 'min-height', + from: '0px', + to: '100px', +}, [ + {at: -0.5, expect: '0'}, // CSS min-height can't be negative. + {at: 0, expect: '0'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/min-width-composition.html b/testing/web-platform/tests/css/css-sizing/animation/min-width-composition.html new file mode 100644 index 0000000000..e8bd41030b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/min-width-composition.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>min-width composition</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width"> +<meta name="assert" content="min-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'min-width', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'min-width', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'min-width', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'min-width', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'min-width', + underlying: '100px', + addFrom: '100px', + addTo: 'auto', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'auto'}, + {at: 1, expect: 'auto'}, + {at: 1.5, expect: 'auto'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/animation/min-width-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/min-width-interpolation.html new file mode 100644 index 0000000000..d11fb3d5cb --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/min-width-interpolation.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>min-width interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width"> +<meta name="assert" content="min-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + min-width: 30px; +} +.target { + width: 0px; + height: 10px; + background-color: black; + min-width: 10px; +} +.expected { + background-color: green; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'min-width', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.5, expect: '5px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_no_interpolation({ + property: 'min-width', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'min-width', + from: 'inherit', + to: '20px', +}, [ + {at: -0.5, expect: '35px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_no_interpolation({ + property: 'min-width', + from: 'unset', + to: '20px', +}); + +test_interpolation({ + property: 'min-width', + from: '0px', + to: '100px' +}, [ + {at: -0.5, expect: '0'}, // CSS min-width can't be negative. + {at: 0, expect: '0'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/animation/width-composition.html b/testing/web-platform/tests/css/css-sizing/animation/width-composition.html new file mode 100644 index 0000000000..bfe45cb314 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/width-composition.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>width composition</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width"> +<meta name="assert" content="width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'width', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'width', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'width', + underlying: '10%', + addFrom: '100px', + addTo: '20%', +}, [ + {at: -0.3, expect: 'calc(130px + 4%)'}, + {at: 0, expect: 'calc(100px + 10%)'}, + {at: 0.5, expect: 'calc(50px + 20%)'}, + {at: 1, expect: '30%'}, + {at: 1.5, expect: 'calc(-50px + 40%)'}, +]); + +test_composition({ + property: 'width', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'width', + underlying: '100px', + addFrom: '100px', + addTo: 'auto', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'auto'}, + {at: 1, expect: 'auto'}, + {at: 1.5, expect: 'auto'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/animation/width-interpolation.html b/testing/web-platform/tests/css/css-sizing/animation/width-interpolation.html new file mode 100644 index 0000000000..d165c994b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/animation/width-interpolation.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>width interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width"> +<meta name="assert" content="width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + width: 100px; + overflow: visible; +} +.target { + font-size: 16px; + background-color: black; + width: 10px; + height: 10px; +} +.expected { + background-color: green; +} +</style> + +<body> + <template id="target-template"> + <div class="container"> + <div class="target"></div> + </div> + </template> +</body> + +<script> +test_interpolation({ + property: 'width', + from: neutralKeyframe, + to: '40px', +}, [ + {at: -0.3, expect: '1px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '19px'}, + {at: 0.6, expect: '28px'}, + {at: 1, expect: '40px'}, + {at: 1.5, expect: '55px'}, +]); + +test_no_interpolation({ + property: 'width', + from: 'initial', + to: '40px', +}); + +test_interpolation({ + property: 'width', + from: 'inherit', + to: '40px', +}, [ + {at: -0.3, expect: '118px'}, + {at: 0, expect: '100px'}, + {at: 0.3, expect: '82px'}, + {at: 0.6, expect: '64px'}, + {at: 1, expect: '40px'}, + {at: 1.5, expect: '10px'}, +]); + +test_no_interpolation({ + property: 'width', + from: 'unset', + to: '40px', +}); + +test_interpolation({ + property: 'width', + from: '0px', + to: '100px', +}, [ + {at: -0.3, expect: '0px'}, // CSS width can't be negative. + {at: 0, expect: '0px'}, + {at: 0.3, expect: '30px'}, + {at: 0.6, expect: '60px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '150px'} +]); + +test_interpolation({ + property: 'width', + from: '10px', + to: '100%' +}, [ + {at: -0.3, expect: '0px'}, // CSS width can't be negative. + {at: 0, expect: '10px'}, + {at: 0.3, expect: '37px'}, + {at: 0.6, expect: '64px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '145px'} +]); + +// The "vw" unit equals to 1% of the width of the viewport's initial containing +// block: +// https://developer.mozilla.org/en-US/docs/Web/CSS/length +function vw(x) { + return (x * window.innerWidth / 100); +} + +// In here, 16 is the font-size which is the value of 1em, and vw(10) is the +// value of 10vw. The calc here takes the "at" in the next interpolation test +// and computes the expected value. +function calc(x) { + return Math.max(16 + (vw(10) - 16) * x, 0).toFixed(2) + "px"; +} + +test_interpolation({ + property: 'width', + from: '1em', + to: '10vw' +}, [ + {at: -0.3, expect: calc(-0.3)}, + {at: 0, expect: calc(0)}, + {at: 0.3, expect: calc(0.3)}, + {at: 0.6, expect: calc(0.6)}, + {at: 1, expect: calc(1)}, + {at: 1.5, expect: calc(1.5)} +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio-affects-container-width-when-height-changes.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio-affects-container-width-when-height-changes.html new file mode 100644 index 0000000000..0dbbb2f940 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio-affects-container-width-when-height-changes.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes"> +<p>There should be a green square below, and no red.</p> +<div id="container" style="height:200px;"> + <div style="height:100%;" data-expected-height="100"> + <div style="float:left; height:100%; background:red;" data-expected-width="100" data-expected-height="100"> + <!-- The image is a 1x1 transparent one. --> + <img style="display:block; height:100%; background:green;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-expected-width="100" data-expected-height="100"> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + test(()=> { + document.body.offsetTop; + document.getElementById("container").style.height = "100px"; + checkLayout("#container"); + }, "Changing height should affect the descendant widths, due to aspect ratio"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-001.html new file mode 100644 index 0000000000..e18a0a7c81 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-001.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow div block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 1/1; position: absolute;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-002.html new file mode 100644 index 0000000000..2e14ff3fb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-002.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 100px; aspect-ratio: 1/1; position: absolute;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-003.html new file mode 100644 index 0000000000..f8602af9fd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow div block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; height: 500px; position: relative;"> + <div style="background: green; aspect-ratio: 1/1; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-004.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-004.html new file mode 100644 index 0000000000..c16c8c78b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-004.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-position/#abspos-auto-size"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 300px; height: 50px; position: relative;"> + <div style="background: green; aspect-ratio: 2/1; position: absolute; left: 0; top: 0; bottom: 0;"></div> +</div> +<div style="width: 100px; height: 300px; position: relative;"> + <div style="background: green; aspect-ratio: 2/1; position: absolute; left: 0; right: 0; top: 0; writing-mode: vertical-lr;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-005.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-005.html new file mode 100644 index 0000000000..a0eaf8c285 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-005.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow div block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; height: 500px; position: relative;"> + <div style="background: green; aspect-ratio: 1/1; width: 100px; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-006.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-006.html new file mode 100644 index 0000000000..8c9f16f571 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-006.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 500px; height: 100px; position: relative;"> + <div style="background: green; aspect-ratio: 1/1; height: 100px; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-007.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-007.html new file mode 100644 index 0000000000..4b170a5187 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-007.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow div block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="position: relative; width: 200px; height: 200px;"> + <div style="position: absolute; aspect-ratio: 1/1; background: green;"> <!-- should be 100px tall --> + <div style="width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-008.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-008.html new file mode 100644 index 0000000000..429b14ac35 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="position: relative; height: 100px; position: relative;"> + <div style="position: absolute; aspect-ratio: 1/1; max-height: 100%; background: green; color: green;"> + <!-- max-size 200px, min-size: 20px --> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-009.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-009.html new file mode 100644 index 0000000000..0e71de200d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-009.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with percentage height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 500px; position: relative;"> + <div style="background: green; aspect-ratio: 1/1; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div> + <div style="height: 100px"></div> <!-- for sizing the abspos containing block --> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-010.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-010.html new file mode 100644 index 0000000000..1d7ddec7f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-010.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow div block size with box-sizing</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; padding: 10px 20px 30px 40px; aspect-ratio: 1/1; position: absolute; box-sizing: border-box;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-011.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-011.html new file mode 100644 index 0000000000..01fac9dae1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-011.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow div block size with box-sizing</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 80px; padding: 0px 5px 0px 15px; aspect-ratio: 1/1; position: absolute; box-sizing: content-box;"></div> +<div style="height: 80px;"></div> +<div style="background: green; width: 100px; height: 20px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-012.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-012.html new file mode 100644 index 0000000000..537f8778f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-012.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow div block size + min-size: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 2/1; position: absolute;"> + <div style="height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-013.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-013.html new file mode 100644 index 0000000000..16c3417b48 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-013.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size + min-size: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 100px; aspect-ratio: 1/2; position: absolute;"> + <div style="width: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-014.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-014.html new file mode 100644 index 0000000000..b0accc68dc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-014.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height and contain-intrinsic-size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="position: relative; height: 100px; position: relative;"> + <div style="position: absolute; aspect-ratio: 1/1; max-height: 100%; min-height: 0; contain-intrinsic-size: 500px 500px; contain: size; background: green; color: green;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-015.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-015.html new file mode 100644 index 0000000000..efd9759a86 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-015.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div block size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-position/#abspos-auto-size"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 300px; height: 50px; position: relative;"> + <div style="background: green; aspect-ratio: 2/1; position: absolute; left: 0; top: 0; bottom: 0; writing-mode: vertical-lr"></div> +</div> +<div style="width: 100px; height: 300px; position: relative;"> + <div style="background: green; aspect-ratio: 2/1; position: absolute; left: 0; right: 0; top: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-016.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-016.html new file mode 100644 index 0000000000..dc520b972b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-016.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow replaced element</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="position: relative;"> + <img src="support/200x200-green.png" style="position: absolute; aspect-ratio: auto 10/1; height: 100px;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-017.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-017.html new file mode 100644 index 0000000000..a5bd964c97 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-017.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow replaced element</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative;"> + <div style="position: absolute; aspect-ratio: 1/1; height: 100px; min-width: 0; background: green;"> + <div style="width: 200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-018.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-018.html new file mode 100644 index 0000000000..6b5b57e421 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-018.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: out-of-flow replaced element</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative;"> + <div style="position: absolute; aspect-ratio: 1/1; width: 100px; min-height: 0; background: green;"> + <div style="height: 200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-019.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-019.html new file mode 100644 index 0000000000..06fb8aab7b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-019.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with auto inline insets</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 500px; height: 200px; position: relative;"> + <div style="background: green; aspect-ratio: 1/1; height: 100px; position: absolute; left: 0; top: 0; bottom: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-020.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-020.html new file mode 100644 index 0000000000..7d65cb55e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-020.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with auto inline insets with vertical writing mode</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 500px; height: 200px; position: relative;"> + <div style="background: green; aspect-ratio: 1/1; width: 100px; position: absolute; left: 0; right: 0; top: 0; writing-mode: vertical-rl;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-021.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-021.html new file mode 100644 index 0000000000..c44b29c4b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-021.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1233150"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: relative; width: 200px;"> + <div style="position: absolute; inset: 0; max-height: 100px; aspect-ratio: 1/1; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/auto-margins-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/auto-margins-001.html new file mode 100644 index 0000000000..9e89ab6ca7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/auto-margins-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 200px; margin-left: -50px;"> + <div style="height: 100px; aspect-ratio: 1/1; margin: auto; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-001.html new file mode 100644 index 0000000000..456e0b348a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-001.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 1/1;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-002.html new file mode 100644 index 0000000000..2dc374c9f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-002.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 100px; aspect-ratio: 1/1;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-003.html new file mode 100644 index 0000000000..987629d2e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-003.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size in vertical writing mode</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; writing-mode: vertical-lr; width: 100px; aspect-ratio: 2/1;"></div> +<div style="background: green; width: 100px; height: 50px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-004.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-004.html new file mode 100644 index 0000000000..3e4a63fa50 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size with box-sizing</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 2/1; box-sizing: border-box; padding-left: 50px;"></div> +<div style="background: green; width: 100px; aspect-ratio: auto 1/1; box-sizing: border-box; padding-left: 50px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-005.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-005.html new file mode 100644 index 0000000000..3f01bbc82f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-005.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size with box-sizing</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 50px; aspect-ratio: 1/1; padding-left: 50px;"></div> +<div style="background: green; width: 50px; aspect-ratio: auto 1/1; padding-left: 50px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-006.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-006.html new file mode 100644 index 0000000000..4468ba1107 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-006.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size with box-sizing</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 50px; aspect-ratio: 2/1; box-sizing: border-box; padding-top: 25px;"></div> +<div style="background: green; height: 50px; aspect-ratio: auto 4/1; box-sizing: border-box; padding-top: 25px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-007.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-007.html new file mode 100644 index 0000000000..5c9020afab --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-007.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size with box-sizing</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 25px; aspect-ratio: 4/1; padding-top: 25px;"></div> +<div style="background: green; height: 25px; aspect-ratio: auto 4/1; padding-top: 25px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-008.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-008.html new file mode 100644 index 0000000000..1e508149d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-008.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5060"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Aspect ratio should be used even if width and height are auto."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px;"> + <div style="background: green; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-009.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-009.html new file mode 100644 index 0000000000..980a06b8ab --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-009.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + min-height: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 2/1;"> + <div style="height: 100px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-010.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-010.html new file mode 100644 index 0000000000..5cb7c841ae --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-010.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + min-height: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Setting overflow to non-visible/clip should not apply min-height: auto"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 1/1; overflow: hidden;"> + <div style="height: 100px"></div> + <div style="height: 500px; background: red;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-011.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-011.html new file mode 100644 index 0000000000..17790c93a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-011.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + min-height: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="reference/ref-square-with-vertical-scrollbar.html" /> +<meta name="assert" content="Setting overflow to non-visible/clip should not apply min-height: auto"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 1/1; overflow: auto;"> + <div style="height: 100px"></div> + <div style="height: 500px; background: red;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-012.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-012.html new file mode 100644 index 0000000000..2cace2e170 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-012.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + min-height: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="reference/ref-square-with-scrollbar.html" /> +<meta name="assert" content="Setting overflow to non-visible/clip should not apply min-height: auto"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 1/1; overflow: scroll;"> + <div style="height: 100px"></div> + <div style="height: 500px; background: red;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-013.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-013.html new file mode 100644 index 0000000000..d8e9ad805b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-013.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + min-height: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="With min-height: auto and content smaller than the aspect ratio size, we should still size per aspect-ratio"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 1/1;"> + <div style="height: 50px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-014.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-014.html new file mode 100644 index 0000000000..e93dbe2cc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-014.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + min-height: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="writing-mode: vertical-lr; background: green; height: 100px; aspect-ratio: 1/2;"> + <div style="width: 100px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-015.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-015.html new file mode 100644 index 0000000000..3f9e833f1e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-015.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size + min-width: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 100px; aspect-ratio: 1/2;"> + <div style="width: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-016.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-016.html new file mode 100644 index 0000000000..7bd21e9196 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-016.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size + min-width: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="With min-width: auto and content smaller than the aspect ratio size, we should still size per aspect-ratio"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 100px; aspect-ratio: 1/1;"> + <div style="width: 50px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-017.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-017.html new file mode 100644 index 0000000000..4ea0d69a24 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-017.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size + min-width: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="writing-mode: vertical-lr; background: green; width: 100px; aspect-ratio: 2/1;"> + <div style="height: 100px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-018.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-018.html new file mode 100644 index 0000000000..6c92b32c7b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-018.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size + min-width: auto</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Setting overflow to non-visible/clip should not apply min-width: auto"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 100px; aspect-ratio: 1/1; overflow: hidden;"> + <div style="width: 100px; display: inline-block;"></div> + <div style="width: 500px; display: inline-block; background: red;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-019.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-019.html new file mode 100644 index 0000000000..56cb453514 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-019.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size using intrinsic inline size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; float: left; aspect-ratio: 1/1;"> + <div style="width: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-020.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-020.html new file mode 100644 index 0000000000..b07e91faf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-020.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="height: 100px;"> + <div style="aspect-ratio: 1/1; max-height: 100%; background: green;"> + <!-- max-size 200px, min-size: 20px --> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-021.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-021.html new file mode 100644 index 0000000000..0e9c1b6b0a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-021.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- Due to the transferred max-height, this should not be 200px wide --> +<div style="max-height: 100px; aspect-ratio: 1/1; width: max-content; background: green;"> + <div style="width: 200px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-022.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-022.html new file mode 100644 index 0000000000..1ee8021a3b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-022.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- min-content width is 300px, clamped by max-width to 100px. The transferred min-width + would be 200px but should not override the explicit max-width, so the resulting div + should be 100px wide. This should then size the green div to a width of 100px. --> +<div style="min-height: 200px; max-width: 100px; aspect-ratio: 1/1;"> + <div style="width: 300px;"></div> + <div style="height: 100px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-023.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-023.html new file mode 100644 index 0000000000..e38cfe0cb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-023.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- min-content width is 50px, clamped by min-width to 100px. The transferred max-width + would be 40px but should not override the explicit min-width, so the resulting div + should be 100px wide. This should then size the green div to a width of 100px. --> +<div style="max-height: 40px; min-width: 100px; aspect-ratio: 1/1;"> + <div style="width: 50px;"></div> + <div style="height: 100px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-024.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-024.html new file mode 100644 index 0000000000..d6f6716b99 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-024.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A min-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="target" style="height: 0px; width: min-content; background: green;"> + <div style="min-height: 100%; aspect-ratio: 1/1;"> + <div style="width: 50px"> + </div> +</div> + +<script> +document.body.offsetTop; +document.getElementById("target").style.height = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-025.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-025.html new file mode 100644 index 0000000000..6ce6736723 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-025.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A min-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- Even with a specified but indefinite height, we want to apply the + transferred min/max height to the inline size. --> +<div style="aspect-ratio: 1/1; height: 100%; min-height: 100px; background: green; float: left;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-026.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-026.html new file mode 100644 index 0000000000..0e0ce5efe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-026.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="height: 100px;"> + <div style="aspect-ratio: 1/1; max-height: 100%; padding-bottom: 20px; background: green; box-sizing: border-box;"> + <!-- max-size 200px, min-size: 20px --> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-027.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-027.html new file mode 100644 index 0000000000..532f558b39 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-027.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A max-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="height: 100px;"> + <div style="aspect-ratio: 100/80; max-height: 80px; padding-bottom: 20px; background: green; box-sizing: content-box;"> + <!-- max-size 200px, min-size: 20px --> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + <div style="width: 20px; height: 10px; vertical-align: bottom; display: inline-block;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-028.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-028.html new file mode 100644 index 0000000000..ec49bd4d7a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-028.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: abspos div inline size with max-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5257"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A min-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="target" style="height: 50px; width: min-content; background: green;"> + <div style="height: 100%;"> + <div style="min-height: 100%; aspect-ratio: 1/1;"></div> + </div> +</div> + +<script> +document.body.offsetTop; +document.getElementById("target").style.height = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-029-crash.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-029-crash.html new file mode 100644 index 0000000000..f940f6df5f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-029-crash.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<title>CSS aspect ratio: An intrinsic max-width should not crash when used with aspect ratio</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + +<div style="max-width: max-content; height: 100px; aspect-ratio: 1/1;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-030.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-030.html new file mode 100644 index 0000000000..a911be11af --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-030.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size with indefinite percentage</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px;"> + <div style="background: green; height: 100%; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-031.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-031.html new file mode 100644 index 0000000000..c312654591 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-031.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Tests a dynamic block-size change invalidates the max-content size.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="target" style="height: 50px; width: max-content; background: green;"> + <div style="height: 100%;"> + <div style="aspect-ratio: 1/1; min-height: 100%; height: 50px;"></div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-032.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-032.html new file mode 100644 index 0000000000..cb8dfdf052 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-032.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div inline size with height and {min|max}-height</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A {min|max}-height constraint should be transferred through the aspect-ratio to apply to the inline size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; aspect-ratio: 4/1; height: 300px; max-height: 25px;"></div> +<div style="background: green; aspect-ratio: 4/1; height: 10px; min-height: 25px;"></div> + +<div style="background: green; aspect-ratio: 4/1; width: min-content; height: 300px; max-height: 25px;"></div> +<div style="background: green; aspect-ratio: 4/1; width: min-content; height: 10px; min-height: 25px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-033.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-033.html new file mode 100644 index 0000000000..ed9714b044 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-033.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size with width and {min|max}-width</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A {min|max}-width constraint should be transferred through the aspect-ratio to apply to the block size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; aspect-ratio: 2/1; width: 300px; max-width: 100px;"></div> +<div style="background: green; aspect-ratio: 2/1; width: 10px; min-width: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-034.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-034.html new file mode 100644 index 0000000000..9b2f7fe446 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-034.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + min-height: auto</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: green; aspect-ratio: 2/1; + width: 60px; border: 10px solid green; padding: 10px; "> + <div style="height: 60px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-035.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-035.html new file mode 100644 index 0000000000..eaa23a24fe --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-035.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + min-height: auto</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: green; box-sizing: border-box; aspect-ratio: 2/1; + width: 100px; border: 10px solid green; padding: 10px;"> + <div style="height: 60px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-036.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-036.html new file mode 100644 index 0000000000..e264646c10 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-036.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size aspect ratio precision</title> +<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Verify the calculations are correct for a fractional aspect ratio."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: inline-block;background: green; height: 100px; aspect-ratio: 0.7;"></div><div style="display: inline-block;background: green; height: 100px; width: 30px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-037.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-037.html new file mode 100644 index 0000000000..26b795b2a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-037.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="aspect-ratio: 2/1; min-height: 100px; width: 100px; background: green;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-038.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-038.html new file mode 100644 index 0000000000..d49547cbd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-038.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite max-width should win the automatic content-based minimum width</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The definite max-width should win the automatic content-based minimum width."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 100px; aspect-ratio: 2 / 1; max-width: 100px;"> + <div style="width:200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-039.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-039.html new file mode 100644 index 0000000000..c12ee5ecaf --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-039.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite max-height should win the automatic content-based minimum height</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The definite max-height should win the automatic content-based minimum height."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 1 / 2; max-height: 100px;"> + <div style="height:200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-040.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-040.html new file mode 100644 index 0000000000..c2241f9d0a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-040.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite max-height should win the transferred maximum height</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="CSS aspect-ratio: The definite max-height should win the transferred maximum height."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 200px; aspect-ratio: 1 / 2; max-width: 100px; max-height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-041.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-041.html new file mode 100644 index 0000000000..65b6fb290a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-041.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite max-width should win the transferred maximum width</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The definite max-width should win the transferred maximum width."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 200px; aspect-ratio: 2 / 1; max-height: 100px; max-width: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-042.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-042.html new file mode 100644 index 0000000000..3f76d42b97 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-042.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The transferred maximum height beats the automatic content-based minimum height</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The transferred maximum height beats the automatic content-based minimum height."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 200px; aspect-ratio: 1 / 1; max-width: 100px;"> + <div style="height:200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-043.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-043.html new file mode 100644 index 0000000000..98fd3697dc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-043.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The transferred maximum width beats the automatic content-based minimum width</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="The transferred maximum width beats the automatic content-based minimum width."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 200px; aspect-ratio: 1 / 1; max-height: 100px;"> + <div style="width:200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-044.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-044.html new file mode 100644 index 0000000000..e78a1f1f12 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-044.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite max-height should win the transferred minimum height</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="CSS aspect-ratio: The definite max-height should win the transferred minimum height."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 50px; aspect-ratio: 1 / 2; min-width: 100px; max-height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-045.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-045.html new file mode 100644 index 0000000000..2c86bd4417 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-045.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite max-width should win the transferred minimum width</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="CSS aspect-ratio: The definite max-width should win the transferred minimum width."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 50px; aspect-ratio: 2 / 1; min-height: 100px; max-width: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-046.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-046.html new file mode 100644 index 0000000000..3deb786fcb --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-046.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite min-height should win the transferred minimum height</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="CSS aspect-ratio: The definite min-height should win the transferred minimum height."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 50px; aspect-ratio: 2 / 1; min-width: 100px; min-height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-047.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-047.html new file mode 100644 index 0000000000..5f7cad5803 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-047.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite min-width should win the transferred minimum width</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="CSS aspect-ratio: The definite min-width should win the transferred minimum width."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 50px; aspect-ratio: 1 / 2; min-height: 100px; min-width: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-048.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-048.html new file mode 100644 index 0000000000..12ae22c26b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-048.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite min-height should win the transferred maximum height</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="CSS aspect-ratio: The definite min-height should win the transferred maximum height."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: 2 / 1; max-width: 150px; min-height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-049.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-049.html new file mode 100644 index 0000000000..7e25b6e626 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-049.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: The definite min-width should win the transferred maximum width</title> +<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="CSS aspect-ratio: The definite min-width should win the transferred maximum width."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; height: 100px; aspect-ratio: 1 / 2; max-height: 150px; min-width: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-050.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-050.html new file mode 100644 index 0000000000..360c83dfbd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-050.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Use correct box-sizing when calculating block size</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#valdef-aspect-ratio-auto--ratio"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="CSS aspect-ratio: Use correct box-sizing when calculating block size."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; aspect-ratio: auto 1/1; box-sizing: border-box; padding-top:10px; padding-left: 50px"> + <div style="height: 90px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-001.html new file mode 100644 index 0000000000..78a0418fe2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: margin-collapsing with aspect-ratio on child element</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; height: 25px; margin-bottom: -50px;"></div> +<div style="background: green; width: 100px; margin: 0px;"> + <div style="margin-top: 50px; margin-bottom: 100px; + width: 100px; aspect-ratio: 2/1"></div> +</div> +<div style="background: green; width: 100px; height: 25px; margin-top: -100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-002.html new file mode 100644 index 0000000000..111a6049e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: margin-collapsing with aspect-ratio on parent element</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; height: 25px; margin-bottom: -200px;"></div> +<div style="background: green; width: 100px; margin: 0px; aspect-ratio: 2/1"> + <div style="width: 100px; margin-top: 50px; margin-bottom: 200px;"></div> +</div> +<div style="background: green; width: 100px; height: 25px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/fieldset-element-001-ref.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/fieldset-element-001-ref.html new file mode 100644 index 0000000000..cc964da974 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/fieldset-element-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio Reference: fieldset</title> +<style> + fieldset { + width: 200px; + background: yellow; + } + + legend { + background: black; + color: white; + padding: 3px 6px; + } +</style> + +<form> + <fieldset> + <legend>Choose one item:</legend> + + <input type="radio" id="item1" name="item"> + <label for="item1">item 1</label><br/> + + <input type="radio" id="item2" name="item"> + <label for="item2">item 2</label><br/> + + <input type="radio" id="item3" name="item"> + <label for="item3">item 3</label> + </fieldset> +</form> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/fieldset-element-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/fieldset-element-001.html new file mode 100644 index 0000000000..487ca90a5f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/fieldset-element-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Test fieldset's block size honoring automatic content-based minimum</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="match" href="fieldset-element-001-ref.html" /> + +<style> + fieldset { + width: 200px; + aspect-ratio: 20 / 1; + background: yellow; + } + + legend { + background: black; + color: white; + padding: 3px 6px; + } +</style> + +<form> + <fieldset> + <legend>Choose one item:</legend> + + <input type="radio" id="item1" name="item"> + <label for="item1">item 1</label><br/> + + <input type="radio" id="item2" name="item"> + <label for="item2">item 2</label><br/> + + <input type="radio" id="item3" name="item"> + <label for="item3">item 3</label> + </fieldset> +</form> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-001.html new file mode 100644 index 0000000000..3b477e299a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flexbox main size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <div style="background: green; height: 100px; aspect-ratio: 1/1; min-width: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html new file mode 100644 index 0000000000..56be1182db --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flexbox min-width</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <!-- No transferred size suggestion since the flex item is non-replaced. + Content size suggestion is 100px because min-intrinsic width is 100px. + --> + <div style="background: green; height: 100px; aspect-ratio: 1/2; flex-basis: 0;"> + <div style="width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-003.html new file mode 100644 index 0000000000..85775fa8c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Column flexbox main size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <div style="background: green; width: 100px; aspect-ratio: 1/1; min-height: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html new file mode 100644 index 0000000000..e28c3b7fbc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Column flexbox min-height</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <!-- No transferred size suggestion since the flex item is non-replaced. + Content size suggestion is 100px because min-intrinsic height is 100px. --> + <div style="background: green; width: 100px; aspect-ratio: 2/1; flex-basis: 0;"> + <div style="height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-005.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-005.html new file mode 100644 index 0000000000..2b13df2184 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-005.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Non-square aspect ratio in Flexbox</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <div style="background: green; height: 100px; aspect-ratio: 1/2; min-width: 0;"></div> + <div style="background: green; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-006.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-006.html new file mode 100644 index 0000000000..f4667cfc1f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-006.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Vertical writing mode in Flexbox</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <div style="background: green; height: 100px; aspect-ratio: 1/2; min-width: 0; writing-mode: vertical-lr;"></div> + <div style="background: green; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-007.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-007.html new file mode 100644 index 0000000000..80bae831a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-007.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Wrapping column flexbox line length</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 100px; aspect-ratio: 1/1; min-height: 0;"> + <div style="background: green; width: 50px; height: 100px;"></div> + <div style="background: green; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.html new file mode 100644 index 0000000000..c7144c3cf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Wrapping column flexbox line length</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 100px; aspect-ratio: 1/1;"> + <div style="background: green; width: 50px; height: 100px;"></div> + <div style="background: green; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-009.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-009.html new file mode 100644 index 0000000000..cb76e0d7bd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-009.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flexbox main size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="A stretched flex item in a definite-height single-line flex container should trigger aspect-ratio."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; height: 100px;"> + <div style="background: green; aspect-ratio: 1/1; min-width: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-010.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-010.html new file mode 100644 index 0000000000..dc9f176573 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-010.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flexbox main size with auto margins</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="As auto-margin items do not stretch, this item should not be considered to have definite height and thus not trigger aspect ratio."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; height: 100px;"> + <div style="background: red; aspect-ratio: 1/1; min-width: 0; margin: auto 0;"></div> + <div style="background: green; height: 100px; width: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-011.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-011.html new file mode 100644 index 0000000000..2c111477e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-011.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flexbox cross size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; width: 100px;"> + <div style="background: green; width: 50px; aspect-ratio: 1/1; min-width: 0; flex: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-012.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-012.html new file mode 100644 index 0000000000..187da3b426 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-012.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flexbox cross size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; width: 100px;"> + <div style="background: green; aspect-ratio: 1/1; min-width: 0; flex: 1 1 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-013.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-013.html new file mode 100644 index 0000000000..6c467e20e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-013.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Column flexbox cross size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: inline-flex; flex-direction: column; flex-wrap: wrap; height: 100px;"> + <div style="background: green; aspect-ratio: 1/1; min-height: 0; height: 50px; flex: 1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-014.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-014.html new file mode 100644 index 0000000000..532776cfa3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-014.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Column flexbox cross size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: inline-flex; flex-direction: column; flex-wrap: wrap; height: 100px;"> + <div style="background: green; aspect-ratio: 1/1; min-height: 0; flex: 1 1 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-015.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-015.html new file mode 100644 index 0000000000..3fc555be73 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-015.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flex container with the replaced-element item</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="aspect-ratio should work well if the flex item is a replaced element."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <img src="support/20x50-green.png" style="height: 100px; aspect-ratio: 1/1;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-016.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-016.html new file mode 100644 index 0000000000..55fec97db5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-016.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Column flex container with the replaced-element item</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="aspect-ratio should work well if the flex item is a replaced element."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <img src="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-017.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-017.html new file mode 100644 index 0000000000..5b340ffaba --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-017.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Non-square aspect-ratio (on replaced elements) in Row flex container</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <img src="support/20x50-green.png" style="height: 100px; aspect-ratio: 1/2;"> + <div style="background: green; width: 50px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-018.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-018.html new file mode 100644 index 0000000000..f7c667c555 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-018.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Non-square aspect-ratio (on replaced elements) in Column flex container</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" title="9.2.3.B"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <img src="support/20x50-green.png" style="width: 100px; aspect-ratio: 4/1;"> + <div style="background: green; width: 100px; height: 75px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-019.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-019.html new file mode 100644 index 0000000000..07635fd0a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-019.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flexbox main size with flex-basis:content</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-main-item"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <div style="background: green; flex-basis: content; height: 100px; + aspect-ratio: 1/1; min-width: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-020.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-020.html new file mode 100644 index 0000000000..4ad3f3cb96 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-020.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Flex item main size with flex-basis:content in Column flex container</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-main-item"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <div style="background: green; flex-basis: content; width: 100px; + aspect-ratio: 1/1; min-height: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-021.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-021.html new file mode 100644 index 0000000000..5241b86210 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-021.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Flex item main size with flex-basis:content and width in Row flex container</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-main-item"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <div style="background: green; flex-basis: content; height: 100px; + aspect-ratio: 1/1; width: 20px; min-width: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-022.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-022.html new file mode 100644 index 0000000000..a70be1b569 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-022.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Column flexbox main size with flex-basis:content and height</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-main-item"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <div style="background: green; flex-basis: content; width: 100px; + aspect-ratio: 1/1; height: 20px; min-height: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-023.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-023.html new file mode 100644 index 0000000000..9ad01dc8d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-023.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Row flex container cross size with the replaced-element item</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; width: 100px;"> + <img src="support/20x50-green.png" style="width: 50px; aspect-ratio: 1/1; flex: 1; min-height: 0;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-024.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-024.html new file mode 100644 index 0000000000..ebac88ce33 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-024.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Column flex container cross size with the replaced-element item</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: inline-flex; flex-direction: column; flex-wrap: wrap; height: 100px;"> + <img src="support/20x50-green.png" style="aspect-ratio: 1/1; min-height: 0; height: 50px; flex: 1;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html new file mode 100644 index 0000000000..bf8daaa35f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: Test flex item's resolved width/min-width with border-box box-sizing in a row flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> + <link rel="match" href="../../reference/ref-filled-green-200px-square.html" /> + <style> + .flexContainer { + display: flex; + flex-direction: row; + width: 1px; + } + .item { + background: green; + padding-top: 15px; + padding-left: 10px; + box-sizing: border-box; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <!-- In all of the subtests here, each flex item's automatic minimum width is + resolved directly from its content size suggestion. Notably, these items + *do not* get a "transferred size suggestion", because they are all + *non-replaced* elements; and "transferred size suggestion" is only used + for resolving automatic minimum sizes on *replaced* elements. However, + note that we do "transfer" sizes through the aspect ratio, as part of + computing the content size suggestion and/or flex base size. --> + + <!-- In the following four flex containers, the aspect-ratio works with border-box. --> + <div class="flexContainer" style="width: auto;"> + <!-- The border-box height 25px is transferred to the main axis, + yielding a resolved flex base size (border-box) of 200px. --> + <div class="item" style="min-width:0; height: 25px; aspect-ratio: 8/1;"></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion (border-box) is 200px because the + border-box height 25px is transferred to the main axis. --> + <div class="item" style="height: 25px; aspect-ratio: 8/1;"></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion (border-box) is 200px because the + border-box height 25px (enforced by min-height) is transferred to the + main axis. --> + <div class="item" style="min-height: 25px; aspect-ratio: 8/1;"></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion (border-box) is 200px because the + border-box height 25px (clamped by max-height) is transferred to the + main axis. --> + <div class="item" style="max-height: 25px; height: 100px; aspect-ratio: 8/1;"></div> + </div> + + <!-- In the following four flex containers, the aspect-ratio works with content-box + because its value contains 'auto'. --> + <div class="flexContainer" style="width: auto;"> + <!-- The content-box height 10px is transferred to the main axis, + yielding a resolved flex base size (content-box) of 190px. --> + <div class="item" style="min-width:0; height: 25px; aspect-ratio: auto 19/1;"></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion (content-box) is 190px because the + content-box height 10px is transferred to the main axis. --> + <div class="item" style="height: 25px; aspect-ratio: auto 19/1;"></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion (content-box) is 190px because the + content-box height 10px (enforced by min-height) is transferred to the + main axis. --> + <div class="item" style="min-height: 25px; aspect-ratio: auto 19/1;"></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion (content-box) is 190px because the + content-box height 10px (clamped by max-height) is transferred to the + main axis. --> + <div class="item" style="max-height: 25px; height: 100px; aspect-ratio: auto 19/1;"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html new file mode 100644 index 0000000000..ff6bf2aa56 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: Test flex item's resolved height/min-height with border-box box-sizing in a column flex container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> + <link rel="match" href="../../reference/ref-filled-green-200px-square.html" /> + <style> + .flexContainer { + display: flex; + flex-direction: column; + float: left; + height: 1px; + } + .item { + background: green; + padding-left: 15px; + padding-top: 10px; + box-sizing: border-box; + } + .item > div { + height: 190px; /* Set the content size suggestion for flex item. */ + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <!-- In all of the subtests here, each flex item's automatic minimum height is + resolved directly from its content size suggestion. Notably, these items + *do not* get a "transferred size suggestion", because they are all + *non-replaced* elements; and "transferred size suggestion" is only used + for resolving automatic minimum sizes on *replaced* elements. However, + note that we do "transfer" sizes through the aspect ratio, as part of + computing the content size suggestion and/or flex base size. --> + + <!-- In the following four flex containers, the aspect-ratio works with border-box. --> + <div class="flexContainer" style="height: auto;"> + <!-- The border-box width 25px is transferred to the main axis, + yielding a resolved flex base size (border-box) of 200px. --> + <div class="item" style="min-height:0; width: 25px; aspect-ratio: 1/8;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px, i.e. the height of the item's + child div. --> + <div class="item" style="width: 25px; aspect-ratio: 1/1;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px, i.e. the height of the item's + child div. --> + <div class="item" style="min-width: 25px; aspect-ratio: 1/1;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 200px because the border-box max-width + 25px is transferred to the main axis as the upper bound of its + border-box height. --> + <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;"> + <div style="height: 500px"></div> + </div> + </div> + + <!-- In the following four flex containers, the aspect-ratio works with content-box + because its value contains 'auto'. --> + <div class="flexContainer" style="height: auto;"> + <!-- The content-box width 10px is transferred to the main axis, + yielding a resolved flex base size (content-box) of 190px. --> + <div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/19;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px, i.e. the height of the item's + child div. --> + <div class="item" style="width: 25px; aspect-ratio: auto 1/1;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px, i.e. the height of the item's + child div. --> + <div class="item" style="min-width: 25px; aspect-ratio: auto 1/1;"><div></div></div> + </div> + + <div class="flexContainer"> + <!-- The content size suggestion is 190px because the content-box max-width + 10px is transferred to the main axis as the upper bound of its + content-box height.--> + <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"> + <div style="height: 500px"></div> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-027.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-027.html new file mode 100644 index 0000000000..a2d853e54c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-027.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: auto size img with aspect-ratio inside column flexbox</title> +<link rel="help" href="https://www.w3.org/TR/css-sizing-4/#propdef-aspect-ratio"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> + div { + width: 100px; + display: flex; + flex-direction: column; + } +</style> + +</head> +<body> + <div><img style="aspect-ratio: 1/1;" src="support/200x200-green.png" /></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-028.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-028.html new file mode 100644 index 0000000000..1819d30cdd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-028.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: auto size img with attributes width and height inside column flexbox</title> +<link rel="help" href="https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property-(using-dimension-rules)"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> + div { + width: 100px; + display: flex; + flex-direction: column; + } + img { + width: auto; + height: auto; + } +</style> +</head> + +<body> + <div><img width="200" height="200" src="support/200x200-green.png" /></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-029.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-029.html new file mode 100644 index 0000000000..a0ce16088a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-029.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: auto height img with max-width, max-height, and attributes width / height inside column flexbox</title> +<link rel="help" href="https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property-(using-dimension-rules)"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> + div { + display: flex; + } + img { + max-height: 100px; + max-width: 100px; + height: auto; + } +</style> +</head> +<body> + <div><img src="support/200x200-green.png" width="200" height="200"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-030.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-030.html new file mode 100644 index 0000000000..df6d6985c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-030.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: auto height img with specified width and attributes width / height inside column flexbox</title> +<link rel="help" href="https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property-(using-dimension-rules)"> +<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<style> + div { + display: flex; + } + img { + width: 100px; + height: auto; + } +</style> +</head> +<body> + <div><img src="support/200x200-green.png" width="200" height="200"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-031.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-031.html new file mode 100644 index 0000000000..5bd4a9d58c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-031.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-automatic"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="There's enough space for padding after transferring flex-imposed definite height through the aspect ratio for a border-box flex item."> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex; height: 50px;"> + <div style="padding-left: 100px; box-sizing: border-box; aspect-ratio: 1/1; background: green;"></div> +</div> +<div style="width: 100px; height: 50px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-032.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-032.html new file mode 100644 index 0000000000..7dee0dd3f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-032.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Item's final height is definite when the flex base size is definite because it derives from item's aspect ratio and stretched width, not from layout"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column; width: 100px;"> + <div style="aspect-ratio: 1/1; background: red;"> + <div style="height: 100%; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-033.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-033.html new file mode 100644 index 0000000000..36acf08444 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-033.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="Item's final height is definite when the flex base size is definite because it derives from item's aspect ratio and specified width, not from layout"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex; flex-direction: column;"> + <div style="aspect-ratio: 1/1; background: red; width: 100px;"> + <div style="height: 100%; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-034.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-034.html new file mode 100644 index 0000000000..96a33dc985 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-034.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" + title="Part E"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" + content="max-content, not max-intrinsic, size is the flex base size of an aspect-ratio item that has an indefinite flex-basis and cross size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div style="display: flex; flex-flow: column; align-items: start;"> + <div + style="aspect-ratio: 1/1; flex: 0 0 auto; min-height: 0px; min-width: 100px; background: green;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-035.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-035.html new file mode 100644 index 0000000000..b391cd1bc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-035.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" + title="Part E"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" + content="max-content, not max-intrinsic, size is the flex base size of an aspect-ratio item that has an indefinite flex-basis and cross size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div + style="display: flex; flex-flow: column; align-items: start; width: 0px;"> + <div + style="aspect-ratio: 1/1; flex: 0 0 auto; min-height: 0px; min-width: 100px; background: green;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-036.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-036.html new file mode 100644 index 0000000000..a689cf9281 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-036.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" + title="Part E"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" + content="max-content, not max-intrinsic, size is the flex base size of an aspect-ratio item that has an indefinite flex-basis and cross size"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div style="display: flex; flex-flow: column; align-items: start;"> + <div + style="aspect-ratio: 1/1; flex: 0 0 content; min-height: 0px; min-width: 100px; background: green;"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-037.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-037.html new file mode 100644 index 0000000000..b893f5ca70 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-037.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" + title="Part E"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" + content="max-content block size accounts for inline max-content size of an aspect-ratio item when computing flex base size"> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id="reference-overlapped-red"></div> +<div style="display: flex; flex-flow: column; align-items: start;"> + <div style="aspect-ratio: 1/1; background: green; min-height: 0px;"> + <div style="width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-038.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-038.html new file mode 100644 index 0000000000..ab92fba534 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-038.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title>aspect-ratio flex item</title> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" + title="Part E"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" + content="min-height is not reflected through the aspect ratio when calculating width:fit-content when laying out a column flex item for flex base size calculation."> + +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id="reference-overlapped-red"></div> + +<div style="display: flex; flex-flow: column; align-items: start; height: 200px;"> + <!-- flex base size for this item is 1px because case E specifies that the + flex base size is the height resulting from layout of this variant of the + element: + <div style="width: fit-content; aspect-ratio: 1/1; height: max-content;"> + <div style="width: 1px;"></div> + </div> + 'min-height' was removed because of this line from the spec: + """When determining the flex base size, the item’s min and max main sizes are + ignored""" + 'width:fit-content' and 'height:max-content' are from part E in the spec + section linked to above. + The resulting height is 1px, so flex base size is 1px. + flex base size of the second item is obviously 1px. + The extra 198px should be distributed evenly to the two items, with each + item's final height being 100px. + + Chrome 101 and Firefox 99 both get this wrong because they make the first + item's flex base size = 100px. + --> + <div style="aspect-ratio: 1/1; background: green; min-height: 100px; flex: 1 0 auto;"> + <div style="width: 1px;"></div> + </div> + <div style="flex: 1 0 1px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-039.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-039.html new file mode 100644 index 0000000000..fe977ef789 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-039.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Test flex item's transferred min & max sizes when preferred sizes are auto</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <div style="background: green; min-height: 50px; aspect-ratio: 2/1; min-width: 0px;"></div> +</div> + +<div style="display: flex;"> + <div style="background: green; max-height: 50px; aspect-ratio: 2/1;"> + <div style="width: 200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-040.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-040.html new file mode 100644 index 0000000000..dc5c74a3d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-040.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Test flex container's cross size (block axis) honoring automatic content-based minimum</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<style> + #container { + display: flex; + width: 100px; + aspect-ratio: 2 / 1; + background: green; + } + #item { + width: 100%; + height: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="item"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-041.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-041.html new file mode 100644 index 0000000000..16fd9be49f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-041.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Test flex container's main size (block axis) honoring automatic content-based minimum</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<style> + #container { + display: flex; + flex-direction: column; + background: green; + width: 100px; + aspect-ratio: 2 / 1; + } + #item { + width: 100%; + height: 100px; + flex: none + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="item"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-042.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-042.html new file mode 100644 index 0000000000..6f71a73194 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-042.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1335009"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flex;"> + <div style="background: green;"> + <div style="height: 50px; width: 100px;"></div> + <button id="target" style="all: unset; display: block; height: 90%; line-height: 0; aspect-ratio: 1; min-height: 50px;"></button> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100%'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/floats-aspect-ratio-001-ref.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/floats-aspect-ratio-001-ref.html new file mode 100644 index 0000000000..734522a164 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/floats-aspect-ratio-001-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio reference: block formatting context with floats</title> + +<div style="width: 200px; border: solid 1px; display: flow-root;"> + <div style="float: left; width: 50px; height: 50px; background: lime;"></div> + <div style="float: right; width: 50px; height: 50px; background: hotpink;"></div> + <div style="float: left; width: 160px; height: 50px; background: aqua;"></div> + <div style="float: right; width: 40px; height: 40px; background: orange;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/floats-aspect-ratio-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/floats-aspect-ratio-001.html new file mode 100644 index 0000000000..53627d2134 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/floats-aspect-ratio-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: block formatting context with floats</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="floats-aspect-ratio-001-ref.html" /> + +<div style="width: 200px; border: solid 1px; display: flow-root;"> + <div style="float: left; width: 50px; height: 50px; background: lime;"></div> + <div style="float: right; width: 50px; height: 50px; background: hotpink;"></div> + <div style="float: left; width: 160px; height: 50px; background: aqua;"></div> + + <div style="aspect-ratio: 1/1; background: orange; display: flow-root;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/fractional-aspect-ratio.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/fractional-aspect-ratio.html new file mode 100644 index 0000000000..7186f35f8a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/fractional-aspect-ratio.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('div')"> + <div style="width: 100px; aspect-ratio: 0.00025 / 0.0001;" data-expected-height=40></div> + <div style="width: 320px; aspect-ratio: 1.6;" data-expected-height=200></div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-001.html new file mode 100644 index 0000000000..ce91fe4e4e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: inline)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid;"> + <div style="background: green; height: 100px; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-002.html new file mode 100644 index 0000000000..6e79ddfc5b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid;"> + <div style="background: green; width: 100px; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-003.html new file mode 100644 index 0000000000..4c6631605c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: inline, on replaced elements)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid;"> + <img src="support/20x50-green.png" style="height: 100px; aspect-ratio: 1/1;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-004.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-004.html new file mode 100644 index 0000000000..fd17748099 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block, on replaced elements)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid;"> + <img src="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-005.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-005.html new file mode 100644 index 0000000000..76dbf9162a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: inline, on replaced elements) with auto && ratio</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: repeat(2, min-content);"> + <img src="support/20x50-green.png" style="height: 100px; aspect-ratio: auto 1/1;"> + <div style="background: green; width: 60px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-006.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-006.html new file mode 100644 index 0000000000..b61a3c094d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-006.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block, on replaced elements) with auto && ratio</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: repeat(2, min-content);"> + <img src="support/20x50-green.png" style="width: 40px; aspect-ratio: auto 1/1;"> + <div style="background: green; width: 60px; height: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-007.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-007.html new file mode 100644 index 0000000000..c788215a2e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-007.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-rows: 200px;"> + <div style="background: green; width: 100px; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-008.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-008.html new file mode 100644 index 0000000000..e23aa36703 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-008.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid container (ratio-dependent: inline)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; height: 100px; aspect-ratio: 1/1;"> + <div style="background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-009.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-009.html new file mode 100644 index 0000000000..ddd6aa2b95 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-009.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid container (ratio-dependent: block)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; width: 100px; aspect-ratio: 1/1;"> + <div style="background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-010.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-010.html new file mode 100644 index 0000000000..9f24dfd818 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-010.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: 200px;"> + <div style="background: green; height: 100px; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-011.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-011.html new file mode 100644 index 0000000000..4fc923f755 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-011.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: 200px;"> + <div style="background: green; height: 100px; aspect-ratio: 1/1; writing-mode: vertical-lr;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-012.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-012.html new file mode 100644 index 0000000000..c74f116221 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-012.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: 200px; grid-template-rows: 200px;"> + <div style="background: green; height: 50%; aspect-ratio: 1/1; writing-mode: vertical-lr;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-014.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-014.html new file mode 100644 index 0000000000..1bec95ea53 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-014.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: items stretched in one axis should respect aspect ratio with stretched size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 100px;"> + <div style="background: green; aspect-ratio: 1/1; justify-self: stretch;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-015.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-015.html new file mode 100644 index 0000000000..4af5fa3bff --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-015.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid track inline size should respect aspect-ratio and box-sizing</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-track-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: auto; width: max-content; background: green;"> + <div style="height: 100px; aspect-ratio: 1/1; padding-top: 50px; box-sizing: border-box;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-016.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-016.html new file mode 100644 index 0000000000..e1c92908f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-016.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid track size should respect aspect-ratio when using + intrinsic size keywords in grid items</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-track-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: auto; width: min-content; background: green;"> + <div style="height: 50px; width: min-content; aspect-ratio: 2/1;"></div> + <div style="height: 50px; width: 1%; min-width: min-content; aspect-ratio: 2/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-017.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-017.html new file mode 100644 index 0000000000..7a09957d5b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-017.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid track size should respect aspect-ratio when using + intrinsic size keywords in grid items with orthogonal writing mode</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-track-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + .item { + aspect-ratio: 2/1; + writing-mode: vertical-lr; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: auto; width: min-content; background: green;"> + <div class="item" style="width: 100px; height: min-content;"></div> + <div class="item" style="width: 100px; height: 1%; min-height: min-content;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html new file mode 100644 index 0000000000..d0b496e250 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: items stretched in inline axis should ignore aspect ratio for inline axis</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 50px;"> + <div style="height: 50px; aspect-ratio: 1/2; justify-self: stretch; background: green;"></div> +</div> +<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 50px;justify-items: stretch"> + <div style="height: 50px; aspect-ratio: 1/2; justify-self: auto; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html new file mode 100644 index 0000000000..bf9c353866 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: items stretched in block axis should ignore aspect ratio for block axis</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 50px;"> + <div style="width: 100px; aspect-ratio: 2/1; align-self: stretch; background: green;"></div> +</div> +<div style="display: grid; grid-template-columns: 100px; grid-template-rows: 50px; align-items: stretch"> + <div style="width: 100px; aspect-ratio: 2/1; align-self: auto; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-020.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-020.html new file mode 100644 index 0000000000..7141793f9d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-020.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: the inline size should be transferred from the block size.</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#transferred-size-suggestion"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-auto-flow: column; grid-template-columns: minmax(auto, 50px); height: 100px;"> + <div style="height: 100px; aspect-ratio: 1/1; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-021.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-021.html new file mode 100644 index 0000000000..3b962b542a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-021.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: the block size should be transferred from the inline size.</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#transferred-size-suggestion"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; grid-template-rows: minmax(auto, 50px); width: 100px;"> + <div style="width: 100px; aspect-ratio: 1/1; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-022.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-022.html new file mode 100644 index 0000000000..9089349dc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-022.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid track size should respect aspect-ratio when the + ratio-dependent axis is the block axis</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-track-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; width: 100px; background: green;"> + <div style="width: 100px; aspect-ratio: 2/1;"></div> + <div style="width: 100px; aspect-ratio: 1/1; max-height: 25px;"></div> + <div style="width: 100px; aspect-ratio: 1/.1; min-height: 25px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-023.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-023.html new file mode 100644 index 0000000000..7bd3209902 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-023.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid track size should respect aspect-ratio when the + ratio-dependent axis is the inline axis</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-track-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: 100px;"> + <div style="display: grid; grid-auto-flow: column; height: 100px; background: green;"> + <div style="height: 100px; aspect-ratio: 1/2;"></div> + <div style="height: 100px; aspect-ratio: 1/1; max-width: 25px;"></div> + <div style="height: 100px; aspect-ratio: .1/1; min-width: 25px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-024.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-024.html new file mode 100644 index 0000000000..009da8106a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-024.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: grid track size should respect aspect-ratio when the + ratio-dependent axis is the inline axis and the width of the container is + min-content</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-track-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; width: min-content; grid-auto-flow: column; height: 100px; background: green;"> + <div style="height: 100px; aspect-ratio: 1/2;"></div> + <div style="height: 100px; aspect-ratio: 1/1; max-width: 25px;"></div> + <div style="height: 100px; aspect-ratio: .1/1; min-width: 25px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-025.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-025.html new file mode 100644 index 0000000000..656c72f914 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-025.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: the minimum contribution of the grid items in + inline axis for a percentage inline size and min-size:auto</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; width: min-content; height: 100px; background: green;"> + <div style="height: 100px; width: 50%; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-026.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-026.html new file mode 100644 index 0000000000..4904c9d3d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-026.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: the auto minimum contribution of the grid items in + block axis with a percentage block size and min-size:auto</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; height: min-content; width: 100px; background: green;"> + <div style="width: 100px; height: 50%; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-027.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-027.html new file mode 100644 index 0000000000..019e2e7001 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-027.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: zero intrinsic size for grid items with overflow:auto + even with an aspect-ratio</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="display: grid; width: min-content; grid-auto-flow: column; height: 100px; background: green;"> + <div style="height: 100px; aspect-ratio: 2/1; overflow:auto"></div> + <div style="height: 100px; aspect-ratio: 1/2; min-width: 100px; overflow:auto"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-028.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-028.html new file mode 100644 index 0000000000..030857a605 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-028.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in the block-axis is preferred over normal alignment in the inline-axis.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 200px;"> + <div style="aspect-ratio: 1/1; align-self: stretch; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-029.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-029.html new file mode 100644 index 0000000000..82b727165a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-029.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in the block-axis is preferred over normal alignment in the inline-axis.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 50px;"> + <div style="aspect-ratio: 1/1; align-self: stretch; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-030.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-030.html new file mode 100644 index 0000000000..e160c435ec --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-030.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in the inline-axis is preferred over normal alignment in the block-axis.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 200px / 100px;"> + <div style="aspect-ratio: 1/1; justify-self: stretch; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-031.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-031.html new file mode 100644 index 0000000000..8cc61904da --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-031.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in the inline-axis is preferred over normal alignment in the block-axis.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 50px / 100px;"> + <div style="aspect-ratio: 1/1; justify-self: stretch; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-032.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-032.html new file mode 100644 index 0000000000..8880885025 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-032.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in both axes (*not* normal alignment) causes the aspect-ratio to be ignored.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 100px;"> + <div style="aspect-ratio: 2/1; align-self: stretch; justify-self: stretch; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-033.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-033.html new file mode 100644 index 0000000000..e0047a60bd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-033.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in both axes (*not* normal alignment) causes the aspect-ratio to be ignored.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 100px;"> + <div style="aspect-ratio: 1/2; align-self: stretch; justify-self: stretch; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-034.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-034.html new file mode 100644 index 0000000000..e217909966 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-034.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in one axis, and a definite length in the other causes the aspect-ratio to be ignored.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 100px;"> + <div style="aspect-ratio: 2/1; align-self: stretch; width: 100%; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-035.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-035.html new file mode 100644 index 0000000000..a07326794a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-035.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in one axis, and a definite length in the other causes the aspect-ratio to be ignored.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 100px;"> + <div style="aspect-ratio: 1/2; align-self: stretch; width: 100%; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-036.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-036.html new file mode 100644 index 0000000000..54a6e6ed47 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-036.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in one axis, and a definite length in the other causes the aspect-ratio to be ignored.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 100px;"> + <div style="aspect-ratio: 2/1; height: 100%; justify-self: stretch; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-037.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-037.html new file mode 100644 index 0000000000..daa978a157 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-037.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: A stretch alignment in one axis, and a definite length in the other causes the aspect-ratio to be ignored.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 100px / 100px;"> + <div style="aspect-ratio: 1/2; height: 100%; justify-self: stretch; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-038.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-038.html new file mode 100644 index 0000000000..6ddbe75833 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-038.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Prefer inline normal alignment over block normal alignment.</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: grid; grid-template: 50px / 100px;"> + <div style="aspect-ratio: 1/1; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-039.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-039.html new file mode 100644 index 0000000000..f31c45805e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-039.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Test grid container's block size honoring automatic content-based minimum.</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<style> + #container { + display: grid; + width: 100px; + aspect-ratio: 2 / 1; + background: green; + /* height: auto */ + /* min-height: auto */ + } + #item { + width: 100%; + height: 100px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="item"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-040.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-040.html new file mode 100644 index 0000000000..d72181f22e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-040.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> + .grid { + display: grid; + width: 100px; + } + + .item { + all: unset; + aspect-ratio: 1 / 1; + background-color: green; + height: 100%; + width: 100%; + } +</style> + +<p id="text">Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="grid"> + <div id="item" class="item"></div> +</div> + +<script> +item.style.padding = "10px"; +document.body.offsetTop; +item.style.padding = "0px"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-001.html new file mode 100644 index 0000000000..5b2c6049bd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size contribution</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: min-content; height: 100px; background: green;"> + <div style="height: 100px; aspect-ratio: 1/1;"></div> +</div> + + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-002.html new file mode 100644 index 0000000000..62e9a149cb --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: max-content size contribution</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: max-content; height: 100px; background: green;"> + <div style="height: 100px; aspect-ratio: 1/1;"></div> +</div> + + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-003.html new file mode 100644 index 0000000000..da5dfd0083 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-003.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: sizing under a min-content constraint</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 0;"> + <div style="float: left; height: 100px; aspect-ratio: 1/1; background: green;"></div> +</div> + + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-004.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-004.html new file mode 100644 index 0000000000..fe1a4d7a5d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-004.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size keyword</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="height: 50px; width: min-content; aspect-ratio: 2/1; background: green;"></div> +<!-- min-content in the block axis is treated as auto --> +<div style="height: min-content; width: 100px; aspect-ratio: 2/1; background: green;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-005.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-005.html new file mode 100644 index 0000000000..697e773be1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-005.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size contribution in an orthogonal flow</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: min-content; height: 100px; background: green;"> + <div style="height: 100px; aspect-ratio: 1/1; writing-mode: vertical-lr;"></div> +</div> + + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-006.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-006.html new file mode 100644 index 0000000000..fa736e9226 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-006.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size contribution with percentage block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: min-content; height: 100px; background: green;"> + <div style="height: 100%;"> + <div style="height: 100%; aspect-ratio: 1/1;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-007.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-007.html new file mode 100644 index 0000000000..6310bf4269 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size contribution with indefinite percentage block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: min-content; background: green;"> + <!-- Indefinite height here - we should "fall through" to the + inner div and calculate 100px, instead of treating 100% as 0. --> + <div style="height: 100%; aspect-ratio: 1/1;"> + <div style="width: 100px; height: 100px;"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-008.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-008.html new file mode 100644 index 0000000000..7ef0d6262b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-008.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size contribution with percentage block size</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="target" style="width: min-content; height: 200px; background: green;"> + <div style="height: 100%;"> + <div style="height: 100%; aspect-ratio: 1/1;"></div> + </div> +</div> + +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-009.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-009.html new file mode 100644 index 0000000000..139c4de644 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-009.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: max-content size contribution with replaced element</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="display: flex;"> + <div> + <img style="width: 100%; height: 100%; vertical-align: bottom;" width="100" height="100" src="support/100x100-green.png"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-010.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-010.html new file mode 100644 index 0000000000..cf128cabd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-010.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size keyword together with min-size</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +.target { + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- The tests below are based on the discussion: + https://github.com/w3c/csswg-drafts/issues/5032#issuecomment-655637111 --> + +<!-- `min-width:auto` takes the content size into account. + `width: min-content` is resolved as 25px (= 25px * 1), and the content size + is 100px, so the final width should be max(25px, 100px) = 100px. --> +<div class="target" style="height: 25px; width: min-content; min-width: auto; aspect-ratio: 1/1;"> + <div style="width: 100px;"></div> +</div> +<!-- `min-width:min-content` doesn't take the content size into account. + `width:auto` is resolved as 100px (= 25px * 4), and it shouldn't be + floored by the content size (i.e. 150px), so the final width is 100px. --> +<div class= "target" style="height: 25px; width: auto; min-width: min-content; aspect-ratio: 4/1;"> + <div style="width: 150px;"></div> +</div> + +<!-- `min-height:auto` takes the content size into account. + `height: min-content` is resolved as 10px (= 100px / 10), and the content + size is 25px, so the final height should be max(10px, 25px) = 25px. --> +<div class="target" style="height: min-content; min-height: auto; width: 100px; aspect-ratio: 10/1;"> + <div style="height: 25px;"></div> +</div> +<!-- `min-height:min-content` doesn't take content size into account. + `height:auto` is resolved as 25px (= 100px / 4), and it shouldn't be + floored by the content size (i.e. 50px), so the final height is 25px. --> +<div class="target" style="height: auto; min-height: min-content; width: 100px; aspect-ratio: 4/1;"> + <div style="height: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-011.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-011.html new file mode 100644 index 0000000000..9e0d888c24 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-011.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: fit-content size keyword</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#valdef-width-fit-content"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +div { + background: green; + aspect-ratio: 2/1; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="height: 50px; width: fit-content;"></div> +<!-- fit-content in the block axis is treated as auto --> +<div style="height: fit-content; width: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-012.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-012.html new file mode 100644 index 0000000000..5040da5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-012.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size contribution with border-box</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: min-content; height: 25px; background: green;"> + <div style="height: 25px; aspect-ratio: 4/1; box-sizing: border-box; padding-top: 15px;"></div> +</div> + +<div style="width: min-content; height: 25px; background: green;"> + <div style="height: 10px; aspect-ratio: 4/1; min-height: 25px; box-sizing: border-box; padding-top: 15px;"></div> +</div> + +<div style="width: min-content; height: 25px; background: green;"> + <div style="height: 100px; aspect-ratio: 4/1; max-height: 25px; box-sizing: border-box; padding-top: 15px;"></div> +</div> + +<div style="width: min-content; height: 25px; background: green;"> + <div style="height: 40px; aspect-ratio: auto 4/1; box-sizing: border-box; padding-top: 15px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-013.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-013.html new file mode 100644 index 0000000000..48a1d12a7e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-013.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: max-content size contribution with border-box</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: max-content; height: 25px; background: green;"> + <div style="height: 25px; aspect-ratio: 4/1; box-sizing: border-box; padding-top: 25px;"></div> +</div> + +<div style="width: max-content; height: 25px; background: green;"> + <div style="height: 10px; aspect-ratio: 4/1; min-height: 25px; box-sizing: border-box; padding-top: 15px;"></div> +</div> + +<div style="width: max-content; height: 25px; background: green;"> + <div style="height: 100px; aspect-ratio: 4/1; max-height: 25px; box-sizing: border-box; padding-top: 15px;"></div> +</div> + +<div style="width: max-content; height: 25px; background: green;"> + <div style="height: 40px; aspect-ratio: auto 4/1; box-sizing: border-box; padding-top: 15px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-014.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-014.html new file mode 100644 index 0000000000..c9308df630 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-014.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-content size keyword together with min-content size contribution</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: min-content; background: green;"> + <div style="width: min-content; height: 100px; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-015.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-015.html new file mode 100644 index 0000000000..c279413da1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-015.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: max-content size keyword together with min-content size contribution</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5032"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: max-content; background: green;"> + <div style="width: min-content; height: 100px; aspect-ratio: 1/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-016.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-016.html new file mode 100644 index 0000000000..61a77af130 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-016.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: min-size:auto and non auto/min-content/max-content width</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +.target { + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- `min-width:auto` does not take the content size into account if the + aspect-ratio is not used for sizing. --> +<div class="target" style="width: 100px; height: 100px; aspect-ratio: 1/1;"> + <div style="width: 200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/large-aspect-ratio-crash.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/large-aspect-ratio-crash.html new file mode 100644 index 0000000000..a1e69cdd7c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/large-aspect-ratio-crash.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1302927"> +<div style="display: flex;"> + <img style="writing-mode: vertical-rl;" width="2147483647" height="3"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-computed.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-computed.html new file mode 100644 index 0000000000..d98f6d1dce --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio Test: aspect-ratio with computed values</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<meta name="assert" content="aspect-ratio supports the full grammar '[auto | <ratio>]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<div id=target></div> +<div id=scratch></div> +<script> + +test_computed_value("aspect-ratio", "auto"); +test_computed_value("aspect-ratio", "1", "1 / 1"); +test_computed_value("aspect-ratio", "1.3", "1.3 / 1"); +test_computed_value("aspect-ratio", "1 / 1", "1 / 1"); +test_computed_value("aspect-ratio", "16 / 9"); +test_computed_value("aspect-ratio", "16.3 / 9.5"); +test_computed_value("aspect-ratio", "16/9", "16 / 9"); +test_computed_value("aspect-ratio", "0 / 9"); +test_computed_value("aspect-ratio", "16 / 0"); +test_computed_value("aspect-ratio", "auto 1", "auto 1 / 1"); +test_computed_value("aspect-ratio", "auto 1 / 1", "auto 1 / 1"); +test_computed_value("aspect-ratio", "0 auto", "auto 0 / 1"); +test_computed_value("aspect-ratio", "0 / 0"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-invalid.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-invalid.html new file mode 100644 index 0000000000..c508c9ed8a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio Test: aspect-ratio with invalid values</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<meta name="assert" content="aspect-ratio supports the full grammar '[auto | <ratio>]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_invalid_value("aspect-ratio", "auto / 5"); +test_invalid_value("aspect-ratio", "auto / 16"); +test_invalid_value("aspect-ratio", "16 9"); +test_invalid_value("aspect-ratio", "16px / 9px"); +test_invalid_value("aspect-ratio", "16 / -9"); +test_invalid_value("aspect-ratio", "1 invalid"); +test_invalid_value("aspect-ratio", "invalid 1.5"); +test_invalid_value("aspect-ratio", "auto 1 / 1 auto"); +test_invalid_value("aspect-ratio", "16 /"); +test_invalid_value("aspect-ratio", "auto 16 /"); +test_invalid_value("aspect-ratio", "16 / auto"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-valid.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-valid.html new file mode 100644 index 0000000000..e825b7cdb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio Test: aspect-ratio with valid values</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<meta name="assert" content="aspect-ratio supports the full grammar '[auto | <ratio>]'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<script> +test_valid_value("aspect-ratio", "auto"); +test_valid_value("aspect-ratio", "16", "16 / 1"); +test_valid_value("aspect-ratio", "1/1", "1 / 1"); +test_valid_value("aspect-ratio", "16.3 / 1", "16.3 / 1"); +test_valid_value("aspect-ratio", "16 / 9"); +test_valid_value("aspect-ratio", "16.3 / 9.4"); +test_valid_value("aspect-ratio", "16/9", "16 / 9"); +test_valid_value("aspect-ratio", "16 /9", "16 / 9"); +test_valid_value("aspect-ratio", "16/ 9", "16 / 9"); +test_valid_value("aspect-ratio", "0 / 9"); +test_valid_value("aspect-ratio", "16 / 0"); +test_valid_value("aspect-ratio", "auto 16", "auto 16 / 1"); +test_valid_value("aspect-ratio", "16 auto", "auto 16 / 1"); +test_valid_value("aspect-ratio", "0 / 0"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-001.html new file mode 100644 index 0000000000..d606bfc65e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + percentage resolution</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; aspect-ratio: 1/1;"> + <div style="background: green; height: 100%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-002.html new file mode 100644 index 0000000000..766e51d74f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + percentage resolution</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; aspect-ratio: 1/1;"> + <div style="background: green; height: 100%; width: 100%; writing-mode: vertical-lr;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-003.html new file mode 100644 index 0000000000..914bfb7918 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + percentage resolution</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; aspect-ratio: 1/1; writing-mode: vertical-lr;"> + <div style="background: green; height: 100%; width: 100%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-004.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-004.html new file mode 100644 index 0000000000..5d222a9be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-004.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + percentage resolution</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; aspect-ratio: 2/1;"> <!-- height = 100px due to min-height: auto --> + <div style="background: green; height: 50px;"></div> + <div style="background: green; height: 100%;"></div> <!-- should be 50px --> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-005.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-005.html new file mode 100644 index 0000000000..97842a26e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-005.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: div block size + percentage resolution</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="height: 100px; width: 50px;"> + <div style="height: 100%; aspect-ratio: 1/1; background: green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-001.html new file mode 100644 index 0000000000..8f857a37ad --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-001.html @@ -0,0 +1,15 @@ +<!-- quirks mode --> +<title>Aspect ratio and quirks mode</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<meta name="flags" content="dom" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +onload = function() { + test(function() { + assert_equals(document.body.offsetHeight, 100); + }, "body height is 100"); +}; +</script> +<body style="width: 100px; aspect-ratio: 1/1; min-height: 0;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-002.html new file mode 100644 index 0000000000..c4639ab36f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-002.html @@ -0,0 +1,15 @@ +<!-- quirks mode --> +<title>Aspect ratio and quirks mode</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<meta name="flags" content="dom" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +onload = function() { + test(function() { + assert_equals(document.body.offsetHeight, document.body.offsetWidth); + }, "body height equals width"); +}; +</script> +<body style="aspect-ratio: 1/1;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-003.html new file mode 100644 index 0000000000..18fe2f1b48 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-003.html @@ -0,0 +1,15 @@ +<!-- quirks mode --> +<title>Aspect ratio and quirks mode</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<meta name="flags" content="dom" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +onload = function() { + test(function() { + assert_equals(document.body.clientHeight, document.documentElement.clientHeight); + }, "body height should match documentElement due to min-height: auto"); +}; +</script> +<body style="width: 100px; aspect-ratio: 1/1;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-filled-green-100x20-rect.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-filled-green-100x20-rect.html new file mode 100644 index 0000000000..5d8ebce4ec --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-filled-green-100x20-rect.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + +<div style="background: green; width: 100px; height: 20px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-scrollbar.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-scrollbar.html new file mode 100644 index 0000000000..128bf336e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-scrollbar.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="https://www.google.com/"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; height: 100px; overflow: scroll;"> + <div style="height: 600px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-vertical-scrollbar.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-vertical-scrollbar.html new file mode 100644 index 0000000000..5663e16dd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-vertical-scrollbar.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Google LLC" href="https://www.google.com/"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: green; width: 100px; height: 100px; overflow-y: scroll;"> + <div style="height: 600px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-001.html new file mode 100644 index 0000000000..bfc1b4b391 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-001.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-002.html new file mode 100644 index 0000000000..56da485a1c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-002.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: iframe</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<iframe style="background: green; width: 100px; aspect-ratio: 1/1; border: 0px none;"></div> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-003.html new file mode 100644 index 0000000000..306976ac99 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: video</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<!-- The pixel values from the video can be slightly different; allow for + fuzzy matching. --> +<meta name="fuzzy" content="0-30;0-5000"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div> + <video src="support/2x2-green.ogv" style="background: green; width: 100px; aspect-ratio: 2/1; vertical-align: bottom;"></video> +</div> +<div style="width: 100px; height: 50px; background: green;"></div> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-004.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-004.html new file mode 100644 index 0000000000..34d3e64ef3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: SVG img</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 1' style='background-color: green'%3E%3C/svg%3E" style="width: 100px; aspect-ratio: 1/1;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-005.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-005.html new file mode 100644 index 0000000000..02fbeb07ac --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-005.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: object</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<object data="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-006.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-006.html new file mode 100644 index 0000000000..cb3f4c8ccd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-006.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: SVG object</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<object type="image/svg+xml" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 1' style='background-color: green'%3E%3C/svg%3E" style="width: 100px; aspect-ratio: 1/1;"></object> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-007.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-007.html new file mode 100644 index 0000000000..468cf09cb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-007.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: svg</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<svg viewBox="0 0 5 1" style="width: 100px; aspect-ratio: 1/1; background-color: green;"></svg> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-008.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-008.html new file mode 100644 index 0000000000..a01e3f1236 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-008.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: svg</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- Uses an indefinite height --> +<svg viewBox="0 0 5 1" width="100px" height="100%" style="aspect-ratio: 1/1; background-color: green;"></svg> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-009.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-009.html new file mode 100644 index 0000000000..7371af1c13 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-009.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img (vertical writing mode)</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1; writing-mode: vertical-rl;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-010.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-010.html new file mode 100644 index 0000000000..26b831a959 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-010.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: SVG img (vertical writing mode)</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' style='background-color: green'%3E%3C/svg%3E" style="width: 100px; aspect-ratio: 5/1; writing-mode: vertical-rl; vertical-align: top;"> +<div style="background: green; height: 80px; width: 100px;"></div> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-011.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-011.html new file mode 100644 index 0000000000..d22bd0da25 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-011.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: svg</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<svg viewBox="0 0 1 1" style="width: 100px; aspect-ratio: 5/1; background-color: green; writing-mode: vertical-rl; vertical-align: top;"></svg> +<div style="background: green; height: 80px; width: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-012.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-012.html new file mode 100644 index 0000000000..e8bd0b60ca --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-012.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: picture</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<picture> + <source srcset="support/20x50-green.png"> + <img style="width: 100px; aspect-ratio: 1/1;"> +</picture> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-013.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-013.html new file mode 100644 index 0000000000..bcbf653d68 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-013.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- Replaced elements should always use content-box sizing for the purpose of + aspect ratio. --> +<img src="support/20x50-green.png" style="aspect-ratio: 20/50; background: green; padding-right: 80px; padding-bottom: 50px; box-sizing: border-box;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-014.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-014.html new file mode 100644 index 0000000000..4c1ad16ce8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-014.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- Replaced elements should always use content-box sizing for the purpose of + aspect ratio. --> +<img src="support/20x50-green.png" style="aspect-ratio: 20/50; background: green; padding-right: 80px; padding-bottom: 50px; box-sizing: border-box; max-height: 100px;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-015.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-015.html new file mode 100644 index 0000000000..ee579ea7e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-015.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: svg with viewbox (auto && ratio)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<svg viewBox="0 0 1 1" style="width: 100px; aspect-ratio: auto 5/1; background-color: green;"></svg> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-016.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-016.html new file mode 100644 index 0000000000..0ed8330424 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-016.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: svg without viewbox (auto && ratio)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<svg style="width: 100px; aspect-ratio: auto 1/1; background-color: green;"></svg> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-017.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-017.html new file mode 100644 index 0000000000..4947a702d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-017.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>CSS aspect-ratio: canvas</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="reference/ref-filled-green-100x20-rect.html" /> + +<canvas width=200 height=200 style='width:100px; aspect-ratio:5/1;'></canvas> +<script> + window.onload = function() { + const canvas = document.querySelector('canvas'); + const ctx = canvas.getContext('2d'); + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 200, 200); + document.documentElement.removeAttribute('class'); + } +</script> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-018.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-018.html new file mode 100644 index 0000000000..f26c1f60a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-018.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: embed</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<embed type="image/png" src="support/20x50-green.png" style="width: 100px; aspect-ratio: 1/1;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-019.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-019.html new file mode 100644 index 0000000000..80ff2ccd49 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-019.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: embed with ratio 5:1</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="reference/ref-filled-green-100x20-rect.html" /> + +<embed type="image/png" src="support/20x50-green.png" style="width: 100px; aspect-ratio: 5/1;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-020.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-020.html new file mode 100644 index 0000000000..b2d58ea3d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-020.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: SVG object with intrinsic size (auto && ratio)</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<object type="image/svg+xml" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' style='background-color: green'%3E%3C/svg%3E" + style="width: 100px; aspect-ratio: auto 5/1;"></object> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-021.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-021.html new file mode 100644 index 0000000000..14a2b8eb6d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-021.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: SVG object without intrinsic size (auto && ratio)</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<object type="image/svg+xml" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background-color: green'%3E%3C/svg%3E" + style="width: 100px; aspect-ratio: auto 1/1;"></object> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-022.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-022.html new file mode 100644 index 0000000000..ea00810fb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-022.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: canvas with aspect-ratio, object-fit and object-position</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="This test verifies aspect-ratio affects the canvas element's ratio, but not the canvas content's ratio."> + + <style> + canvas { + width: 100px; + aspect-ratio: 1/3; + object-fit: contain; + object-position: top left; + } + </style> + + <script> + window.onload = function() { + const canvas = document.querySelector('canvas'); + const ctx = canvas.getContext('2d'); + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 200, 200); + } + </script> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <canvas width=200 height=200></canvas> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-023.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-023.html new file mode 100644 index 0000000000..72b563a7a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-023.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: canvas with aspect-ratio and contain:size</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5550"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="This test verifies aspect-ratio's <ratio> is used to determine the canvas' size because contain:size enforces no intrinsic aspect ratio."> + + <style> + canvas { + width: 100px; + aspect-ratio: 1/1; + contain: size; + } + </style> + + <script> + window.onload = function() { + const canvas = document.querySelector('canvas'); + const ctx = canvas.getContext('2d'); + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 200, 200); + } + </script> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <canvas width=200 height=200></canvas> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-024.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-024.html new file mode 100644 index 0000000000..168be8769b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-024.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: image with aspect-ratio, object-fit and object-position</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="This test verifies aspect-ratio affects the image element's ratio, but not the image content's ratio."> + + <style> + div { + display: inline-block; + width: 60px; + height: 100px; + background: green; + } + img { + height: 100px; + aspect-ratio: 3/1; + object-fit: contain; + object-position: top left; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <!-- object-fit:contain should preserve the image's ratio, and scale it to 40x100. --> + <div></div><img src="support/20x50-green.png"> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-025.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-025.html new file mode 100644 index 0000000000..733ca2f796 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-025.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: image with aspect-ratio and contain:size</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5550"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="This test verifies aspect-ratio's <ratio> is used to determine the image's size because contain:size enforces no intrinsic aspect ratio."> + + <style> + img { + width: 100px; + aspect-ratio: 1/1; + contain: size; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <img src="support/20x50-green.png"> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-026.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-026.html new file mode 100644 index 0000000000..5a20c67290 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-026.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: video with aspect-ratio, object-fit and object-position</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="This test verifies aspect-ratio affects the video element's ratio, but not the video content's ratio."> + + <style> + div { + display: inline-block; + width: 60px; + height: 100px; + background: green; + } + video { + height: 100px; + aspect-ratio: 3/1; + object-fit: contain; + object-position: top left; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <!-- object-fit:contain should preserve the video poster's ratio, and scale it to 40x100. --> + <div></div><video poster="support/20x50-green.png"></video> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-027.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-027.html new file mode 100644 index 0000000000..42d8fe0be9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-027.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <title>CSS aspect-ratio: video with aspect-ratio and contain:size</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5550"> + <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="This test verifies aspect-ratio's <ratio> is used to determine the video's size because contain:size enforces no intrinsic aspect ratio."> + + <style> + video { + width: 100px; + aspect-ratio: 1/1; + object-fit: fill; + contain: size; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <video poster="support/20x50-green.png"></video> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-028.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-028.html new file mode 100644 index 0000000000..ece5efbc65 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-028.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<img id="test" src="error.png" style="width: 100px; aspect-ratio: 1/5; background: yellow;" alt="Should not be 500px high"> + +<script> +function run_test() { + test(function() { + var img = document.getElementById("test"); + assert_not_equals(img.offsetHeight, 500); + }); +} +onload = run_test; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-029.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-029.html new file mode 100644 index 0000000000..e8d106a88f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-029.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img with display:block and auto ratio</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/1x1-green.png" style="width: 100px; aspect-ratio: auto 10/1; display: block;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-030.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-030.html new file mode 100644 index 0000000000..97aac0fde5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-030.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img with display:block and auto ratio</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/1x1-green.png" style="height: 100px; aspect-ratio: auto 10/1; display: block;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-031.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-031.html new file mode 100644 index 0000000000..4b442fcbfa --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-031.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img block size with box-sizing</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +.border1 { + border-left: 10px solid green; +} +.border2 { + border-left: 15px solid green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- + 1st: A green rect 50x100. + border-left is 10x100 and the content box is 40x100. + We use 'aspect-ratio: auto && <ratio>', so the aspect-ratio works with + content-box dimensions always. The inline size of the content box is + (50px - 10px) = 40px, so the block size is 40px * 5/2 = 100px. + (note: width here is the inline size of border-box.) + + 2st: A green rect 25x100. + border-left is 15x100 and the content box is 10x100. + (note: width here is the inline size of content-box.) + + 3nd: A green rect 25x100. + border-left is 15x100 and the content box is 10x100 because we compute + the block size by aspect-ratio which works with border-box and so the + block size is 25px * 4 = 100. + (note: width here is the inline size of border-box.) +--> +<img class="border1" src="support/20x50-green.png" style="width: 50px; aspect-ratio: auto 1/1; box-sizing: border-box;" +><img class="border2" src="support/20x50-green.png" style="width: 10px; aspect-ratio: 1/10; box-sizing: content-box;" +><img class="border2" src="support/20x50-green.png" style="width: 25px; aspect-ratio: 1/4; box-sizing: border-box;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-032.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-032.html new file mode 100644 index 0000000000..022a2d797b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-032.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img inline size with box-sizing</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +img { + border-top: 40px solid green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- + 1st: A green rect 60x100. + border-top is 60x40 and the content box is 60x60. + We use 'aspect-ratio: auto && <ratio>', so the aspect-ratio works with + content-box dimensions always. The block size of the content box is + (100px - 40px) = 60px, so the inline size is 60px * 1/1 = 60px. + (note: height here is the block size of border-box.) + + 2nd: A green rect 20x100. + border-top is 20x40 and the content box is 20x60. + (note: height here is the block size of content-box.) + + 3rd: A green rect 10x100. + border-top is 10x40 and the content box is 10x60 because we compute + the inline size by aspect-ratio which works with border-box and so the + inline size is 100px / 10 = 10px. + (note: height here is the block size of border-box.) + + 4th: A green rect 10x100. + border-top is 10x40 and the content box is 10x60 to add up to 10x100. +--> +<img src="support/1x1-green.png" style="height: 100px; aspect-ratio: auto 1/10; box-sizing: border-box;" +><img src="support/1x1-green.png" style="height: 60px; aspect-ratio: 1/3; box-sizing: content-box;" +><img src="support/1x1-green.png" style="height: 100px; aspect-ratio: 1/10; box-sizing: border-box;" +><img src="support/1x1-green.png" style="width: 10px; aspect-ratio: 1/6; box-sizing: content-box;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-033.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-033.html new file mode 100644 index 0000000000..f7f01993ee --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-033.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img block size with box-sizing (vertical writing mode)</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +img { + writing-mode: vertical-rl; + border-top: 40px solid green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- + 1st: A green rect 60x100. + border-top is 60x40 and the content box is 60x60. + We use 'aspect-ratio: auto && <ratio>', so the aspect-ratio works with + content-box dimensions always. The inline size of the content box is + (100px - 40px) = 60px, so the block size is 60px * 1/1 = 60px. + + 2nd: A green rect 20x100. + border-top is 20x40 and the content box is 20x60. + + 3rd: A green rect 20x100. + border-top is 20x40 and the content box is 20x60 because we compute + the block size by aspect-ratio which works with border-box and so the + block size is 100px / 5 = 20px. +--> +<img src="support/1x1-green.png" style="height: 100px; aspect-ratio: auto 1/10; box-sizing: border-box;" +><img src="support/1x1-green.png" style="height: 60px; aspect-ratio: 1/3; box-sizing: content-box;" +><img src="support/1x1-green.png" style="height: 100px; aspect-ratio: 1/5; box-sizing: border-box;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-034.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-034.html new file mode 100644 index 0000000000..f56e4caf2f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-034.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +img { + background: green; + box-sizing: border-box; + aspect-ratio: 1/1; + padding-left: 50px; + height: min-content; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<!-- + This test is super subtle. The SVG has a natural (content) size of 50x??. + To determine the natural (content) height we use the aspect-ratio to + multiply through, but we should be using "box-sizing: border-box". + This leaves "height: min-content" to be 100px (as opposed to 50px). +--> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50px'></svg>"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035-ref.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035-ref.html new file mode 100644 index 0000000000..cd8afe1693 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio reference: audio element</title> + +<audio controls style="background: green;"></audio><br> +<audio controls style="width: 100px; background: green;"></audio><br> +<audio controls style="height: 100px; background: green;"></audio> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035.html new file mode 100644 index 0000000000..88ae2c22dc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: audio element</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/media.html#the-audio-element"> +<link rel="match" href="replaced-element-035-ref.html"> + +<audio controls style="aspect-ratio: 1/1; background: green;"></audio><br> +<audio controls style="aspect-ratio: 1/1; width: 100px; background: green;"></audio><br> +<audio controls style="aspect-ratio: 1/1; height: 100px; background: green;"></audio> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-036.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-036.html new file mode 100644 index 0000000000..0cd5eb1a59 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-036.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img</title> +<link rel="author" title="Jake Archibald" href="jakearchibald@google.com" /> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + img { + width: 100px; + aspect-ratio: 1/2; + background: green; + } +</style> +<div id="log"></div> + +<img + src="error.png" + style="display: block" + alt="display:block img should be 200px high" +/> + +<img + src="error.png" + style="display: inline-block" + alt="display:inline-block img should be 200px high" +/> + +<script> + setup({ explicit_done: true }); + + onload = () => { + for (const img of document.images) { + test(() => { + assert_equals(img.offsetHeight, 200); + }, img.alt); + } + + done(); + }; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-037-ref.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-037-ref.html new file mode 100644 index 0000000000..b7fc9f8b7d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-037-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio reference: svg in img</title> +<style> + img { + width: 200px; + height: 100px; + padding-top: 50px; + } +</style> +<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><rect fill="red" stroke="black" stroke-width="6" width="200" height="100"/></svg>'/> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-037.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-037.html new file mode 100644 index 0000000000..e78b5cc59a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-037.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: svg in img with box-sizing:border-box</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="replaced-element-037-ref.html"> + +<style> + img { + height: auto; + box-sizing: border-box; + padding-top: 50px; + } +</style> +<img width="200" height="100" src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><rect fill="red" stroke="black" stroke-width="6" width="200" height="100"/></svg>'/> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-039.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-039.html new file mode 100644 index 0000000000..91cce9e120 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-039.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>Replaced element honors transferred max-height</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-heights"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="SVG item with aspect ratio + intrinsic width + no intrinsic height honors transferred max-height." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='200'%3E%3Crect width='100%25' height='100%25' fill='green'/%3E%3C/svg%3E" style="max-height: 100px; flex: 0 0 auto; background: red;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-040.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-040.html new file mode 100644 index 0000000000..7a2df908ca --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-040.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>Replaced element honors transferred max-width</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-heights"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" content="SVG item with aspect ratio + intrinsic height + no intrinsic width honors transferred max-width." /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='200'%3E%3Crect width='100%25' height='100%25' fill='green'/%3E%3C/svg%3E" style="max-width: 100px; flex: 0 0 auto; background: red;"> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-041.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-041.html new file mode 100644 index 0000000000..4bfb5e2037 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-041.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<title>Replaced Element 041</title> +<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-4/#aspect-ratio-size-transfers"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"/> +<meta name="assert" content="Replaced element transferred max size should be floored by transferred min size" /> +<style> +div { + width: 0px; +} +img { + min-width: 100px; + max-width: 100%; +} +</style> +</head> +<body> +<p>Test passes if there is a filled green square.</p> +<div style="width: 0px"> +<img src="/css/support/60x60-green.png"> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-dynamic-aspect-ratio.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-dynamic-aspect-ratio.html new file mode 100644 index 0000000000..d4b83d3673 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-dynamic-aspect-ratio.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: img + dynamic aspect-ratio</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<style> +body.changed img { + aspect-ratio: 1/1; +} +</style> + +<body onload="document.body.classList.add('changed')"> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/20x50-green.png" style="width: 100px"> + +</body> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/select-element-001-ref.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/select-element-001-ref.html new file mode 100644 index 0000000000..bdd09f7fb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/select-element-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio reference: select elements</title> +<!-- WebKit uses quirky em in user agent sheet for margins of select, avoid it --> +<style> + select { + margin: 0px; + } +</style> +<select style="height: 50px; width: 50px; background: green;"> + <option value=""></option> +</select> +<br> +<select style="height: 50px; width: 50px; background: green;"> + <option value="">The long text is selected</option> +</select> +<br> +<select style="height: 50px; width: auto; background: green;"> + <option value="">The long text is selected</option> +</select> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/select-element-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/select-element-001.html new file mode 100644 index 0000000000..a504e26e79 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/select-element-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: select elements with min-width</title> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="select-element-001-ref.html"> +<!-- WebKit uses quirky em in user agent sheet for margins of select, avoid it --> +<style> + select { + margin: 0px; + } +</style> + +<!-- Sanity Check - aspect-ratio should be applied on the select element --> +<select style="height: 50px; aspect-ratio: 1/1; background: green;"> + <option value=""></option> +</select> +<br> +<!-- The content size shouldn't override the size when min-width is non-auto --> +<select style="height: 50px; aspect-ratio: 1/1; background: green; min-width: 0px;"> + <option value="">The long text is selected</option> +</select> +<br> +<!-- The content size should override the size when min-width is auto --> +<select style="height: 50px; aspect-ratio: 1/1; background: green;"> + <option value="">The long text is selected</option> +</select> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/small-aspect-ratio-crash.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/small-aspect-ratio-crash.html new file mode 100644 index 0000000000..07712542f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/small-aspect-ratio-crash.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: Doesn't crash with small but nonzero width/height in ratio</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<div style="aspect-ratio: 1/0.00000000000001"></div> +<div style="aspect-ratio: 0.00000000000001/1"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/100x100-green.png b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/100x100-green.png Binary files differnew file mode 100644 index 0000000000..25b76c3c6f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/100x100-green.png diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/1x1-green.png b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/1x1-green.png diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/200x200-green.png b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/200x200-green.png Binary files differnew file mode 100644 index 0000000000..1dcc392a6e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/200x200-green.png diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/20x50-green.png b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/20x50-green.png Binary files differnew file mode 100644 index 0000000000..f7f6e67fee --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/20x50-green.png diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.ogv b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.ogv Binary files differnew file mode 100644 index 0000000000..29903c0a81 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.ogv diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/table-element-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/table-element-001.html new file mode 100644 index 0000000000..51daf00957 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/table-element-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: aspect-ratio shouldn't apply to internal table boxes</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +table { + border-collapse: collapse; +} +th, td { + padding: 0px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- aspect-ratio shouldn't apply to internal table boxes --> +<table> + <tr> + <th style='background: green; width: 100px; aspect-ratio: 1/1;'></th> + <td style='background: red; height: 50px; aspect-ratio: 4/1;'></td> + <td style='background: red; height: 50px; min-width: min-content; aspect-ratio: 4/1;'></td> + </tr> +</table> +<!-- aspect-ratio should apply to the table element --> +<table style='background: green; width: 100px; aspect-ratio: 2/1;'></table> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-001.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-001.html new file mode 100644 index 0000000000..760635c40e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: zero aspect-ratio</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: red; width: 100px; aspect-ratio: 0/1;"></div> +<div style="background: green; width: 100px; height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-002.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-002.html new file mode 100644 index 0000000000..300e56d92c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-002.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: zero aspect-ratio</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; background: red;"> + <div style="background: green; height: 100px; aspect-ratio: 0/1;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-003.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-003.html new file mode 100644 index 0000000000..5fb83a105c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-003.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: infinite aspect-ratio</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="background: red; width: 100px; aspect-ratio: 1/0;"></div> +<div style="background: green; width: 100px; height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-004.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-004.html new file mode 100644 index 0000000000..a90837bad7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-004.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: infinite aspect-ratio</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width: 100px; background: red;"> + <div style="background: green; height: 100px; aspect-ratio: 1/0;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-005.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-005.html new file mode 100644 index 0000000000..d018184faa --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-005.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: 0/0 aspect-ratio (behaves as infinity)</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- "aspect-ratio: 0/0" behaves as "aspect-ratio: 1/0"--> +<div style="background: red; width: 100px; aspect-ratio: 0/0;"></div> +<div style="background: green; width: 100px; height: 100px;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-006.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-006.html new file mode 100644 index 0000000000..f34aa6c126 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-006.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: zero aspect-ratio img</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/1x1-green.png" style="width: 100px; aspect-ratio: 0/1;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-007.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-007.html new file mode 100644 index 0000000000..97e602612f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-007.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: zero aspect-ratio img</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/1x1-green.png" style="height: 100px; aspect-ratio: 0/1;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-008.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-008.html new file mode 100644 index 0000000000..644090aa3c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-008.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: infinite aspect-ratio img</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/1x1-green.png" style="width: 100px; aspect-ratio: 1/0;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-009.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-009.html new file mode 100644 index 0000000000..6e320cf541 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-009.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: infinite aspect-ratio img</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/1x1-green.png" style="height: 100px; aspect-ratio: 1/0;"> + diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-010.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-010.html new file mode 100644 index 0000000000..92b4750157 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-010.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS aspect-ratio: 0/0 aspect-ratio img</title> +<link rel="author" title="mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4572"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<img src="support/1x1-green.png" style="width: 100px; aspect-ratio: 0/0;"> + diff --git a/testing/web-platform/tests/css/css-sizing/auto-scrollbar-inside-stf-abspos-ref.html b/testing/web-platform/tests/css/css-sizing/auto-scrollbar-inside-stf-abspos-ref.html new file mode 100644 index 0000000000..076893b272 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/auto-scrollbar-inside-stf-abspos-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<style> + body { overflow:hidden; } +</style> +<p>The word PASS should be visible below.</p> +<div style="position:absolute; height:5em; overflow-y:scroll;"> + <div style="height:15em;">PASS</div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/auto-scrollbar-inside-stf-abspos.html b/testing/web-platform/tests/css/css-sizing/auto-scrollbar-inside-stf-abspos.html new file mode 100644 index 0000000000..9479b2eb3f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/auto-scrollbar-inside-stf-abspos.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="auto-scrollbar-inside-stf-abspos-ref.html"> +<style> + /* Set non-auto overflow on the viewport, so that the UA is more likely to get + the size right the first time. Otherwise, a re-layout might hide the bug + that we're trying to test. */ + body { overflow:hidden; } +</style> +<p>The word PASS should be visible below.</p> +<div style="position:absolute;"> + <div style="height:5em; overflow-y:auto;"> + <div style="height:15em;">PASS</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/available-height-for-replaced-content-001.html b/testing/web-platform/tests/css/css-sizing/available-height-for-replaced-content-001.html new file mode 100644 index 0000000000..f6ea13618e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/available-height-for-replaced-content-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: available height for replaced content</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#available"> +<link rel="help" href="https://crrev.com/acc04ddbdc31a7c5bda78f88719df43367630fed"> +<meta name="assert" content="This test ensures that the available height for replaced content is calculated correctly when the parent has border, padding or min-height."/> +<style> +#wrapper { + width: 200px; + min-height: 1px; + height: 20px; + border: 1px solid green; + padding: 50px; +} +img { + margin: 0; + padding: 0; + border: 0; + width: 100%; + height: 100%; + background: silver; +} +</style> +<div id="log"></div> +<div id="wrapper"> + <img src="" data-expected-height="20"> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout('img'); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/block-fit-content-as-initial-ref.html b/testing/web-platform/tests/css/css-sizing/block-fit-content-as-initial-ref.html new file mode 100644 index 0000000000..7fdc142534 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-fit-content-as-initial-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<body> + <div class='parent'> + <img class='child' src='../support/60x60-green.png'> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/block-fit-content-as-initial.html b/testing/web-platform/tests/css/css-sizing/block-fit-content-as-initial.html new file mode 100644 index 0000000000..7c9422cb5b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-fit-content-as-initial.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Test: Test `fit-content` for block axis behaves the same as the initial value</title> +<link rel="match" href="block-fit-content-as-initial-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +.parent { + height: fit-content; +} +.child { + max-height: 100%; +} +</style> +<body> + <div class='parent'> + <img class='child' src='../support/60x60-green.png'> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/block-image-percentage-max-height-inside-inline.html b/testing/web-platform/tests/css/css-sizing/block-image-percentage-max-height-inside-inline.html new file mode 100644 index 0000000000..2f6ad684c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-image-percentage-max-height-inside-inline.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#max-size-properties"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <span> + <!-- The image is a 1x1 transparent one. --> + <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="display:block; max-width:100px; height:1000px; max-height:100%; background:green;"> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1-ref.html b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1-ref.html new file mode 100644 index 0000000000..c52d3aa4cd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <title>CSS Reference Case: Basic cases with max-content and min-content</title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <meta name="flags" content="ahem"> + <style> + html,body { + margin: 0; + } + .container { + width: max-content; + height: 50px; + border: 1px solid black; + + font-family: Ahem; + font-size: 15px; + line-height: 21px; + } + .container > * { + display: inline-block; + border: 1px solid blue; + } + + .container-vertical { + width: 50px; + border: 1px solid black; + + font-family: Ahem; + font-size: 15px; + line-height: 21px; + } + .container-vertical > * { + writing-mode: vertical-lr; + border: 1px solid blue; + } + </style> +</head> +<body> + <div class="container"> + <div>min<br>in the box</div> + <div>max<br>in the box</div> + </div> + + <div class="container-vertical"> + <div>min<br>in the box</div> + <div>max<br>in the box</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1a.html b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1a.html new file mode 100644 index 0000000000..22193a9fd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1a.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Basic cases of width/height on block axis with max-content and min-content</title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="block-size-with-min-or-max-content-1-ref.html"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + .container { + width: max-content; + height: 50px; + border: 1px solid black; + + font-family: Ahem; + font-size: 15px; + line-height: 21px; + } + .container > * { + display: inline-block; + border: 1px solid blue; + } + .container-vertical { + width: 50px; + border: 1px solid black; + + font-family: Ahem; + font-size: 15px; + line-height: 21px; + } + .container-vertical > * { + writing-mode: vertical-lr; + border: 1px solid blue; + } + </style> +</head> +<body> + <div class="container"> + <div class="height-min-content">min<br>in the box</div> + <div class="height-max-content">max<br>in the box</div> + </div> + + <div class="container-vertical"> + <div class="width-min-content">min<br>in the box</div> + <div class="width-max-content">max<br>in the box</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1b.html b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1b.html new file mode 100644 index 0000000000..35174cd885 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-1b.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Basic cases of block-size with max-content and min-content</title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="block-size-with-min-or-max-content-1-ref.html"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + .container { + inline-size: max-content; + height: 50px; + border: 1px solid black; + + font-family: Ahem; + font-size: 15px; + line-height: 21px; + } + .container > * { + display: inline-block; + border: 1px solid blue; + } + .container-vertical { + width: 50px; + border: 1px solid black; + + font-family: Ahem; + font-size: 15px; + line-height: 21px; + } + .container-vertical > * { + writing-mode: vertical-lr; + border: 1px solid blue; + } + </style> +</head> +<body> + <div class="container"> + <div class="block-min-content">min<br>in the box</div> + <div class="block-max-content">max<br>in the box</div> + </div> + + <div class="container-vertical"> + <div class="block-min-content">min<br>in the box</div> + <div class="block-max-content">max<br>in the box</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1-ref.html b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1-ref.html new file mode 100644 index 0000000000..0810c428b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reference Case: Block size with max-content and min-content in a table</title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <style> + html,body { + margin: 0; + } + table { + border: 2px solid black; + } + + td { + border: 2px solid lime; + } + + .item { + height: 50px; + width: 50px; + border: 1px solid blue; + } + + .container { + writing-mode: vertical-lr; + } + + .small { block-size: 1px; } + .big { block-size: 150px; } + </style> +</head> +<body> + <div class="container"> + <table class="big"><td><div class="item"></div></td></table> + <table class="big"><td><div class="item"></div></td></table> + + <table><td class="small"><div class="item"></div></td></table> + <table><td class="small"><div class="item"></div></td></table> + </div> + + <table class="big"><td><div class="item"></div></td></table> + <table class="big"><td><div class="item"></div></td></table> + + <table><td class="small"><div class="item"></div></td></table> + <table><td class="small"><div class="item"></div></td></table> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1a.html b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1a.html new file mode 100644 index 0000000000..f5abc672a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1a.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Basic cases of width/height (block axis) with max-content and min-content in a table</title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="block-size-with-min-or-max-content-table-1-ref.html"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + + table { + border: 2px solid black; + } + + td { + border: 2px solid lime; + } + + .item { + height: 50px; + width: 50px; + border: 1px solid blue; + } + + .container { + writing-mode: vertical-lr; + } + + .small-h { height: 1px; } + .big-h { height: 150px; } + .small-w { width: 1px; } + .big-w { width: 150px; } + </style> +</head> +<body> + <div class="container"> + <table class="big-w max-width-min-content"> + <td><div class="item"></div></td> + </table> + <table class="big-w max-width-max-content"> + <td><div class="item"></div></td> + </table> + + <table class="small-w min-width-min-content"> + <td><div class="item"></div></td> + </table> + <table class="small-w min-width-max-content"> + <td><div class="item"></div></td> + </table> + </div> + + <table class="big-h max-height-min-content"> + <td><div class="item"></div></td> + </table> + <table class="big-h max-height-max-content"> + <td><div class="item"></div></td> + </table> + + <table class="small-h min-height-min-content"> + <td><div class="item"></div></td> + </table> + <table class="small-h min-height-max-content"> + <td><div class="item"></div></td> + </table> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1b.html b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1b.html new file mode 100644 index 0000000000..0395c07af3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/block-size-with-min-or-max-content-table-1b.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Basic cases of block-size with max-content and min-content in a table</title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="block-size-with-min-or-max-content-table-1-ref.html"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + + table { + border: 2px solid black; + } + + td { + border: 2px solid lime; + } + + .item { + height: 50px; + width: 50px; + border: 1px solid blue; + } + + .container { + writing-mode: vertical-lr; + } + + .small { block-size: 1px; } + .big { block-size: 150px; } + </style> +</head> +<body> + <div class="container"> + <table class="big max-block-min-content"> + <td><div class="item"></div></td> + </table> + <table class="big max-block-max-content"> + <td><div class="item"></div></td> + </table> + + <table class="small min-block-min-content"> + <td><div class="item"></div></td> + </table> + <table class="small min-block-max-content"> + <td><div class="item"></div></td> + </table> + </div> + + <table class="big max-block-min-content"> + <td><div class="item"></div></td> + </table> + <table class="big max-block-max-content"> + <td><div class="item"></div></td> + </table> + + <table class="small min-block-min-content"> + <td><div class="item"></div></td> + </table> + <table class="small min-block-max-content"> + <td><div class="item"></div></td> + </table> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-001-ref.html b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-001-ref.html new file mode 100644 index 0000000000..73947be7a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<title>border-box and max-content should include borders</title> +<style> + .wrapper { + border: 1px solid red; + width: 90px; + } + .item { + width: 50px; + background-color: blue; + padding: 10px 20px; + } + .content { + width: 50px; + height: 50px; + background-color: green; + } +</style> +<div class="wrapper"><div class="item"><div class="content"></div></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-001.html b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-001.html new file mode 100644 index 0000000000..85c35e0656 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<title>border-box and max-content should include borders</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3"> +<link rel="match" href="border-box-and-max-content-001-ref.html"> +<style> + .wrapper { + border: 1px solid red; + width: max-content; + } + .item { + max-width: max-content; + box-sizing: border-box; + + padding: 10px 20px; + background-color: blue; + } + .content { + width: 50px; + height: 50px; + background-color: green; + } +</style> +<div class="wrapper"> + <div class="item"> + <div class="content"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-002-ref.html b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-002-ref.html new file mode 100644 index 0000000000..6627a55abc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-002-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<title>border-box and max-content with aspect ratio should include borders</title> +<style> + .wrapper { + border: 1px solid red; + width: 500px; + } + .item { + width: 500px; + height: 500px; + background-color: blue; + } +</style> +<div class="wrapper"><div class="item"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-002.html b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-002.html new file mode 100644 index 0000000000..e6e47cd68e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<title>border-box and max-content with aspect ratio should include borders</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3"> +<link rel="match" href="border-box-and-max-content-002-ref.html"> +<style> + .wrapper { + border: 1px solid red; + width: max-content; + } + .item { + max-width: max-content; + height: 500px; + aspect-ratio: 1; + padding: 10px 20px; + box-sizing: border-box; + background-color: blue; + } +</style> +<div class="wrapper"> + <div class="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-003-ref.html b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-003-ref.html new file mode 100644 index 0000000000..c4ecda0250 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-003-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<title>border-box and fit-content should include borders</title> +<style> + .wrapper { + border: 1px solid red; + width: 540px; + } + .item { + background-color: blue; + padding: 10px 20px; + } + .content { + width: 500px; + height: 50px; + background-color: green; + } +</style> +<div class="wrapper"><div class="item"><div class="content"></div></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-003.html b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-003.html new file mode 100644 index 0000000000..3a6f179b09 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/border-box-and-max-content-003.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<title>border-box and fit-content should include borders</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3"> +<link rel="match" href="border-box-and-max-content-003-ref.html"> +<style> + .wrapper { + border: 1px solid red; + width: max-content; + } + .item { + max-width: fit-content(500px); + padding: 10px 20px; + box-sizing: border-box; + background-color: blue; + } + .content { + width: 500px; + height: 50px; + background-color: green; + } +</style> +<div class="wrapper"><div class="item"><div class="content"></div></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-001-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-001-ref.xht new file mode 100644 index 0000000000..e886a0f05e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-001-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Box Sizing - Border-Box with specified width</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + width: 140px; + z-index: 1; + float: left; + border: 5px solid black; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-001.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-001.xht new file mode 100644 index 0000000000..c66cda94eb --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-001.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Box Sizing - Border-Box with specified width</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-border-box-001-ref.xht" /> + <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." /> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + box-sizing: border-box; + width: 50%; + z-index: 1; + float: left; + border: 5px solid black; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-002-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-002-ref.xht new file mode 100644 index 0000000000..7c6bc218a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-002-ref.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Box Sizing - Border-Box with specified width</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + width: 120px; + z-index: 1; + float: left; + border: 5px solid black; + padding: 0px 10px; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-002.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-002.xht new file mode 100644 index 0000000000..ea4c9e4f67 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-002.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Box Sizing - Border-Box with specified width</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-border-box-002-ref.xht" /> + <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." /> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + box-sizing: border-box; + width: 50%; + z-index: 1; + float: left; + border: 5px solid black; + padding: 0px 10px; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-003-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-003-ref.xht new file mode 100644 index 0000000000..c468c5b5b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-003-ref.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Box Sizing - Border-Box with specified width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + height: 400px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + width: 120px; + height: 340px; + z-index: 1; + float: left; + border: 5px solid black; + padding: 25px 10px; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-003.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-003.xht new file mode 100644 index 0000000000..835abeb3c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-003.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Box Sizing - Border-Box with specified width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-border-box-003-ref.xht" /> + <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." /> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + height: 400px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + box-sizing: border-box; + width: 50%; + height: 100%; + z-index: 1; + float: left; + border: 5px solid black; + padding: 25px 10px; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-004-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-004-ref.xht new file mode 100644 index 0000000000..a635acd13e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-004-ref.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Box Sizing - Border-Box with min/max width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <style type="text/css"><![CDATA[ + .container { + min-width: 500px; + max-width: 700px; + min-height: 70px; + max-height: 90px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + min-width: 240px; + max-width: 340px; + min-height: 60px; + max-height: 80px; + z-index: 1; + float: left; + border: 5px solid black; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-004.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-004.xht new file mode 100644 index 0000000000..b9429eeecb --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-border-box-004.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Box Sizing - Border-Box with min/max width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-border-box-004-ref.xht" /> + <meta name="assert" content="box-sizing: border-box should make the element's (length) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." /> + <style type="text/css"><![CDATA[ + .container { + min-width: 500px; + max-width: 700px; + min-height: 70px; + max-height: 90px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + box-sizing: border-box; + min-width: 250px; + max-width: 350px; + min-height: 70px; + max-height: 90px; + z-index: 1; + float: left; + border: 5px solid black; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-001-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-001-ref.xht new file mode 100644 index 0000000000..ca3ff0f7ec --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-001-ref.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Box Sizing - Content-Box with specified width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + height: 110px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + width: 150px; + height: 110px; + z-index: 1; + float: left; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-001.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-001.xht new file mode 100644 index 0000000000..9835c25699 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-001.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Box Sizing - Content-Box with specified width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-content-box-001-ref.xht" /> + <meta name="assert" content="box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + height: 110px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + box-sizing: content-box; + width: 50%; + height: 100%; + z-index: 1; + float: left; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-002-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-002-ref.xht new file mode 100644 index 0000000000..b280e57693 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-002-ref.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Box Sizing - Content-Box with specified width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + height: 100px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + width: 140px; + height: 90px; + z-index: 1; + float: left; + padding: 5px 5px; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-002.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-002.xht new file mode 100644 index 0000000000..536cdbc7ef --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-002.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Box Sizing - Content-Box with specified width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-content-box-002-ref.xht" /> + <meta name="assert" content="box-sizing: content-box should make the element's (calc) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/> + <style type="text/css"><![CDATA[ + .container { + width: 300px; + height: 100px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + box-sizing: content-box; + width: calc(50% - 10px); + height: calc(100% - 10px); + z-index: 1; + float: left; + padding: 5px 5px; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-003-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-003-ref.xht new file mode 100644 index 0000000000..042b5628aa --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-003-ref.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Box Sizing - Content-Box with min/max width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <style type="text/css"><![CDATA[ + .container { + min-width: 500px; + max-width: 700px; + height: 90px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + min-width: 250px; + max-width: 350px; + height: 100%; + z-index: 1; + float: left; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-003.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-003.xht new file mode 100644 index 0000000000..411d001eb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-content-box-003.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Box Sizing - Content-Box with min/max width/height</title> + <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" /> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-content-box-003-ref.xht" /> + <meta name="assert" content="box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/> + <style type="text/css"><![CDATA[ + .container { + min-width: 500px; + max-width: 700px; + height: 90px; + border: 2px solid black; + position: absolute; + left: 25px; + top: 25px; + background-color: red; + } + + .box-sized { + box-sizing: content-box; + width: 50%; + height: 100%; + z-index: 1; + float: left; + } + + #one { + background-color: green; + } + + #two { + background-color: blue; + } + ]]></style> + </head> + <body> + The two divs should be side-by-side, not one on top of another. No red should be visible. + <br /> + <div class="container"> + <div class="box-sized" id="one">LEFT HALF</div> + <div class="box-sized" id="two">RIGHT HALF</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-001-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-001-ref.xht new file mode 100644 index 0000000000..c7ccf666f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-001-ref.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title> + <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link> + <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link> + <meta content="image" name="flags"></meta> + <!-- + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing"> + --> + <style type="text/css"> + p { + display: inline-block; + background-color: white; + margin: 0px 0px; + padding: 0px 0px; + } + + .with-padding { + padding: 5px 5px; + } + + #img { + width: 75px; + height: 75px; + } + </style> + </head> + <body> + <div>All rectangles should be the same size.</div> + <p><img class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p> + <p><img id="img" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p> + <p><img id="img" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p> + <p><img id="img" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p> + <p><img id="img" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p> + <p><img id="img" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p> + <p><img id="img" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p> + <p><img id="img" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p> + <p><img id="img" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p> + <p><img id="img" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p> + <p><img id="img" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p> + <p><img id="img" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p> + <p><img id="img" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p> + <p><img id="img" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p> + <p><img id="img" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p> + <p><img id="img" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p> + <p><img id="img" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p> + <p><img id="img" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p> + <p><img id="img" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p> + <p><img id="img" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-001.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-001.xht new file mode 100644 index 0000000000..a56829e70b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-001.xht @@ -0,0 +1,157 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title> + <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link> + <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-replaced-001-ref.xht" /> + <meta content="image" name="flags"></meta> + <meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding around each." /> + <!-- + This test is derived from replaced-min-max-001, part of the W3C CSS 2.1 + test suite. + --> + <style type="text/css"> + p { + display: inline-block; + background-color: white; + padding: 0px 0px; + margin: 0px 0px; + } + + .with-padding { + padding: 5px 5px; + box-sizing: border-box; + } + + #img1 { + min-width: 70px; + max-width: 115px; + min-height: 55px; + max-height: 130px; + } + + #img2 { + max-width: 85px; + min-height: 70px; + } + + #img3 { + max-width: 85px; + min-height: 85px; + } + + #img4 { + min-width: 85px; + max-height: 110px; + } + + #img5 { + min-width: 85px; + max-height: 85px; + } + + #img6 { + min-width: 70px; + max-height: 85px; + } + + #img7 { + min-width: 85px; + max-height: 85px; + } + + #img8 { + max-width: 110px; + min-height: 85px; + } + + #img9 { + max-width: 85px; + min-height: 85px; + } + + #img10 { + min-width: 85px; + max-width: 160px; + max-height: 85px; + } + + #img11 { + min-width: 35px; + max-width: 235px; + max-height: 85px; + } + + #img12 { + max-width: 85px; + min-height: 85px; + max-height: 160px; + } + + #img13 { + max-width: 85px; + min-height: 35px; + max-height: 235px; + } + + #img14 { + min-width: 60px; + max-width: 110px; + min-height: 85px; + } + + #img15 { + min-width: 65px; + max-width: 85px; + min-height: 85px; + } + + #img16 { + min-width: 85px; + min-height: 60px; + max-height: 110px; + } + + #img17 { + min-width: 85px; + min-height: 65px; + max-height: 85px; + } + + #img18 { + min-width: 85px; + max-height: 85px; + } + + #img19 { + max-width: 85px; + min-height: 85px; + } + </style> + </head> + <body> + <div>All rectangles should be the same size.</div> + <p><img id="img0" class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p> + <p><img id="img1" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p> + <p><img id="img2" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p> + <p><img id="img3" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p> + <p><img id="img4" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p> + <p><img id="img5" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p> + <p><img id="img6" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p> + <p><img id="img7" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p> + <p><img id="img8" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p> + <p><img id="img9" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p> + <p><img id="img10" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p> + <p><img id="img11" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p> + <p><img id="img12" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p> + <p><img id="img13" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p> + <p><img id="img14" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p> + <p><img id="img15" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p> + <p><img id="img16" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p> + <p><img id="img17" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p> + <p><img id="img18" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p> + <p><img id="img19" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-002-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-002-ref.xht new file mode 100644 index 0000000000..d0f4b08ccc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-002-ref.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title> + <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link> + <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link> + <meta content="image" name="flags"></meta> + <!-- + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing"> + --> + <style type="text/css"> + p { + display: inline-block; + background-color: white; + margin: 0px 0px; + padding: 0px 0px; + } + + .with-borderpadding { + padding: 5px 5px; + border: 5px solid blue; + } + + #img { + width: 75px; + height: 75px; + } + </style> + </head> + <body> + <div>All rectangles should be the same size.</div> + <p><img class="with-borderpadding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p> + <p><img id="img" class="with-borderpadding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-002.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-002.xht new file mode 100644 index 0000000000..60490e4808 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-002.xht @@ -0,0 +1,158 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title> + <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link> + <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-replaced-002-ref.xht" /> + <meta content="image" name="flags"></meta> + <meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding and 5px of blue border around each." /> + <!-- + This test is derived from replaced-min-max-001, part of the W3C CSS 2.1 + test suite. + --> + <style type="text/css"> + p { + display: inline-block; + background-color: white; + padding: 0px 0px; + margin: 0px 0px; + } + + .with-borderpadding { + padding: 5px 5px; + border: 5px solid blue; + box-sizing: border-box; + } + + #img1 { + min-width: 80px; + max-width: 125px; + min-height: 65px; + max-height: 140px; + } + + #img2 { + max-width: 95px; + min-height: 80px; + } + + #img3 { + max-width: 95px; + min-height: 95px; + } + + #img4 { + min-width: 95px; + max-height: 120px; + } + + #img5 { + min-width: 95px; + max-height: 95px; + } + + #img6 { + min-width: 80px; + max-height: 95px; + } + + #img7 { + min-width: 95px; + max-height: 95px; + } + + #img8 { + max-width: 120px; + min-height: 95px; + } + + #img9 { + max-width: 95px; + min-height: 95px; + } + + #img10 { + min-width: 95px; + max-width: 170px; + max-height: 95px; + } + + #img11 { + min-width: 45px; + max-width: 245px; + max-height: 95px; + } + + #img12 { + max-width: 95px; + min-height: 95px; + max-height: 170px; + } + + #img13 { + max-width: 95px; + min-height: 45px; + max-height: 245px; + } + + #img14 { + min-width: 70px; + max-width: 120px; + min-height: 95px; + } + + #img15 { + min-width: 75px; + max-width: 95px; + min-height: 95px; + } + + #img16 { + min-width: 95px; + min-height: 70px; + max-height: 120px; + } + + #img17 { + min-width: 95px; + min-height: 75px; + max-height: 95px; + } + + #img18 { + min-width: 95px; + max-height: 95px; + } + + #img19 { + max-width: 95px; + min-height: 95px; + } + </style> + </head> + <body> + <div>All rectangles should be the same size.</div> + <p><img id="img0" class="with-borderpadding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p> + <p><img id="img1" class="with-borderpadding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p> + <p><img id="img2" class="with-borderpadding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p> + <p><img id="img3" class="with-borderpadding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p> + <p><img id="img4" class="with-borderpadding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p> + <p><img id="img5" class="with-borderpadding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p> + <p><img id="img6" class="with-borderpadding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p> + <p><img id="img7" class="with-borderpadding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p> + <p><img id="img8" class="with-borderpadding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p> + <p><img id="img9" class="with-borderpadding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p> + <p><img id="img10" class="with-borderpadding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p> + <p><img id="img11" class="with-borderpadding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p> + <p><img id="img12" class="with-borderpadding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p> + <p><img id="img13" class="with-borderpadding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p> + <p><img id="img14" class="with-borderpadding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p> + <p><img id="img15" class="with-borderpadding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p> + <p><img id="img16" class="with-borderpadding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p> + <p><img id="img17" class="with-borderpadding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p> + <p><img id="img18" class="with-borderpadding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p> + <p><img id="img19" class="with-borderpadding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-003-ref.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-003-ref.xht new file mode 100644 index 0000000000..a54b2df1a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-003-ref.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title> + <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link> + <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link> + <meta content="image" name="flags"></meta> + <!-- + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing"> + --> + <style type="text/css"> + p { + display: inline-block; + background-color: white; + margin: 0px 0px; + padding: 0px 0px; + } + + #img { + width: 75px; + height: 75px; + } + </style> + </head> + <body> + <div>All rectangles should be the same size.</div> + <p><img src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p> + <p><img id="img" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p> + <p><img id="img" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p> + <p><img id="img" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p> + <p><img id="img" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p> + <p><img id="img" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p> + <p><img id="img" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p> + <p><img id="img" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p> + <p><img id="img" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p> + <p><img id="img" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p> + <p><img id="img" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p> + <p><img id="img" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p> + <p><img id="img" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p> + <p><img id="img" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p> + <p><img id="img" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p> + <p><img id="img" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p> + <p><img id="img" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p> + <p><img id="img" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p> + <p><img id="img" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p> + <p><img id="img" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-003.xht b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-003.xht new file mode 100644 index 0000000000..39ce63ea9e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/box-sizing-replaced-003.xht @@ -0,0 +1,156 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title> + <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link> + <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#box-sizing" /> + <link rel="match" href="box-sizing-replaced-003-ref.xht" /> + <meta content="image" name="flags"></meta> + <meta name="assert" content="All images should be sized at 75px x 75px." /> + <!-- + This test is derived from replaced-min-max-001, part of the W3C CSS 2.1 + test suite. + --> + <style type="text/css"> + p { + display: inline-block; + background-color: white; + padding: 0px 0px; + margin: 0px 0px; + } + + .content-box { + box-sizing: content-box; + } + + #img1 { + min-width: 60px; + max-width: 125px; + min-height: 45px; + max-height: 120px; + } + + #img2 { + max-width: 75px; + min-height: 60px; + } + + #img3 { + max-width: 75px; + min-height: 75px; + } + + #img4 { + min-width: 75px; + max-height: 100px; + } + + #img5 { + min-width: 75px; + max-height: 75px; + } + + #img6 { + min-width: 60px; + max-height: 75px; + } + + #img7 { + min-width: 75px; + max-height: 75px; + } + + #img8 { + max-width: 100px; + min-height: 75px; + } + + #img9 { + max-width: 75px; + min-height: 75px; + } + + #img10 { + min-width: 75px; + max-width: 150px; + max-height: 75px; + } + + #img11 { + min-width: 25px; + max-width: 225px; + max-height: 75px; + } + + #img12 { + max-width: 75px; + min-height: 75px; + max-height: 150px; + } + + #img13 { + max-width: 75px; + min-height: 25px; + max-height: 225px; + } + + #img14 { + min-width: 50px; + max-width: 100px; + min-height: 75px; + } + + #img15 { + min-width: 55px; + max-width: 75px; + min-height: 75px; + } + + #img16 { + min-width: 75px; + min-height: 50px; + max-height: 100px; + } + + #img17 { + min-width: 75px; + min-height: 55px; + max-height: 75px; + } + + #img18 { + min-width: 75px; + max-height: 75px; + } + + #img19 { + max-width: 75px; + min-height: 75px; + } + </style> + </head> + <body> + <div>All rectangles should be the same size.</div> + <p><img id="img0" class="content-box" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p> + <p><img id="img1" class="content-box" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p> + <p><img id="img2" class="content-box" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p> + <p><img id="img3" class="content-box" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p> + <p><img id="img4" class="content-box" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p> + <p><img id="img5" class="content-box" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p> + <p><img id="img6" class="content-box" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p> + <p><img id="img7" class="content-box" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p> + <p><img id="img8" class="content-box" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p> + <p><img id="img9" class="content-box" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p> + <p><img id="img10" class="content-box" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p> + <p><img id="img11" class="content-box" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p> + <p><img id="img12" class="content-box" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p> + <p><img id="img13" class="content-box" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p> + <p><img id="img14" class="content-box" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p> + <p><img id="img15" class="content-box" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p> + <p><img id="img16" class="content-box" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p> + <p><img id="img17" class="content-box" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p> + <p><img id="img18" class="content-box" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p> + <p><img id="img19" class="content-box" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/button-min-width.html b/testing/web-platform/tests/css/css-sizing/button-min-width.html new file mode 100644 index 0000000000..8f780ec96a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/button-min-width.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>min-width: Should apply to buttons</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.button-row { + background-color: #BBB; + display: flex; + flex-direction: row; + width: 400px; + margin-top: 8px; +} +button { + flex: 0 0 auto; + margin: 0px; +} +</style> +<div> + <p>Expected: All buttons should be 200px wide</p> +</div> +<div class="button-row"> + <button style="min-width: 200px">Foo</button> + <button style="min-width: 200px">Bar</button> +</div> +<div class="button-row"> + <button style="min-width: 50%">Foo</button> + <button style="min-width: 50%">Bar</button> +</div> +<div class="button-row" style="writing-mode: vertical-rl; height: 100px;flex-direction:column"> + <button style="min-width: 200px">Foo</button> + <button style="min-width: 200px">Bar</button> +</div> +<div class="button-row" style="zoom:2"> + <button style="min-width: 200px">Foo</button> + <button style="min-width: 200px">Bar</button> +</div> +<script> +test(() => { + let buttons = document.querySelectorAll("button"); + for (let button of document.querySelectorAll("button")) + assert_equals(button.offsetWidth, 200); +}, 'min-width should force all buttons to be 200px wide'); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/calc-margins-block.html b/testing/web-platform/tests/css/css-sizing/calc-margins-block.html new file mode 100644 index 0000000000..362d3646e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/calc-margins-block.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066"> +<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing."> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: min-content; height: 100px; background: green;"> + <div style="margin-left: calc(10% + 100px);"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/calc-margins-fieldset-content.html b/testing/web-platform/tests/css/css-sizing/calc-margins-fieldset-content.html new file mode 100644 index 0000000000..6a74dd0863 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/calc-margins-fieldset-content.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066"> +<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing."> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<fieldset style="width: min-content; height: 100px; margin: 0; padding: 0; border: none; background: green;"> + <div style="margin-left: calc(10% + 100px);"></div> +</fieldset> diff --git a/testing/web-platform/tests/css/css-sizing/calc-margins-fieldset-legend.html b/testing/web-platform/tests/css/css-sizing/calc-margins-fieldset-legend.html new file mode 100644 index 0000000000..001bcb0919 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/calc-margins-fieldset-legend.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066"> +<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing."> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<fieldset style="width: min-content; height: 100px; margin: 0; padding: 0; border: none; background: green;"> + <legend style="margin-left: calc(10% + 100px); padding: 0;"></legend> +</fieldset> diff --git a/testing/web-platform/tests/css/css-sizing/calc-margins-flex.html b/testing/web-platform/tests/css/css-sizing/calc-margins-flex.html new file mode 100644 index 0000000000..d1dbbcfa35 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/calc-margins-flex.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066"> +<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing."> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: flex; width: min-content; height: 100px; background: green;"> + <div style="margin-left: calc(10% + 100px);"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/calc-margins-table-caption.html b/testing/web-platform/tests/css/css-sizing/calc-margins-table-caption.html new file mode 100644 index 0000000000..dd9ab6822a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/calc-margins-table-caption.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066"> +<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing."> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: table; width: min-content; height: 100px; background: green;"> + <div style="dipslay: table-caption; margin-left: calc(10% + 100px);"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/canvas-intrinsic-dynamic.html b/testing/web-platform/tests/css/css-sizing/canvas-intrinsic-dynamic.html new file mode 100644 index 0000000000..4a33716e5c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/canvas-intrinsic-dynamic.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the intrinsic size of a canvas element correctly changes the intrinsic size of a parent." /> +<body style="position: relative;"> + <p>Test passes if there is a filled green square.</p> + <div style="position: absolute; background: green; line-height: 0;"> + <canvas id="target"></canvas> + </div> +</body> +<script> + document.body.offsetTop; + const target = document.getElementById('target'); + target.width = '100'; + target.height = '100'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/clone-intrinsic-size-ref.html b/testing/web-platform/tests/css/css-sizing/clone-intrinsic-size-ref.html new file mode 100644 index 0000000000..49c3c13d22 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/clone-intrinsic-size-ref.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<head> + <title>CSS Reference: min/max-content size on box-decoration-break:clone inline box</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: pre; +} +.max > div { + width: max-content; +} +.min > div { + width: min-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div><span>aaa</span><span>aaa</span> +</div> +<div><span>aaa</span>aa<span>aaa</span> +</div> +<div><span>aaa</span> <span>aaa</span> +</div> +<div><span>aaa </span><span>aaa</span> +</div> +<div><span>aaa</span><span> aaa</span> +</div> +<div><span>aaa</span> aa<span>aaa</span> +</div> +<div><span>aaa </span>aa<span>aaa</span> +</div> +<div><span>aaa</span>aa<span> aaa</span> +</div> +<div><span>aaa</span> aa <span>aaa</span> +</div> +<div><span>aaa</span>aa <span>aaa</span> +</div> +<div><span>aaa</span>aa</div> +</f> + +<f class="min"> +<div><span>aaa</span><span>aaa</span> +</div> +<div><span>aaa</span>aa<span>aaa</span> +</div> +<div><span>aaa</span><br><span>aaa</span> +</div> +<div><span>aaa</span><br><span>aaa</span> +</div> +<div><span>aaa</span><span><br>aaa</span> +</div> +<div><span>aaa</span><br>aa<span>aaa</span> +</div> +<div><span>aaa</span><br>aa<span>aaa</span> +</div> +<div><span>aaa</span>aa<span><br>aaa</span> +</div> +<div><span>aaa</span><br>aa<br><span>aaa</span> +</div> +<div><span>aaa</span>aa<br><span>aaa</span> +</div> +<div><span>aaa</span>aa</div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/clone-intrinsic-size.html b/testing/web-platform/tests/css/css-sizing/clone-intrinsic-size.html new file mode 100644 index 0000000000..6bcca543d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/clone-intrinsic-size.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<head> + <title>CSS Test: min/max-content size on box-decoration-break:clone inline box</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"> + <link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1552357"> + <link rel="match" href="clone-intrinsic-size-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; +} +.max > div { + width: max-content; +} +.min > div { + width: min-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div> + <span>aaa</span><span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span> <span>aaa</span> +</div> +<div> + <span>aaa </span><span>aaa</span> +</div> +<div> + <span>aaa</span><span> aaa</span> +</div> +<div> + <span>aaa</span> aa<span>aaa</span> +</div> +<div> + <span>aaa </span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span> aaa</span> +</div> +<div> + <span>aaa</span> aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa </div> +</f> + +<f class="min"> +<div> + <span>aaa</span><span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span> <span>aaa</span> +</div> +<div> + <span>aaa </span><span>aaa</span> +</div> +<div> + <span>aaa</span><span> aaa</span> +</div> +<div> + <span>aaa</span> aa<span>aaa</span> +</div> +<div> + <span>aaa </span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span> aaa</span> +</div> +<div> + <span>aaa</span> aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa </div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-bidi-ref.html b/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-bidi-ref.html new file mode 100644 index 0000000000..a99a359b9f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-bidi-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<head> + <title>CSS Reference: min/max-content size on box-decoration-break:clone inline box with bidi text and white-space:nowrap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: pre; +} +.max > div { + width: max-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div><span>‮a‭bc</span><span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc </span><span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span><span> d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc </span>aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa<span> d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> aa <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa</div> +</f> + +<f class="max"> +<div><span>‮a‭bc</span><span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc </span><span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span><span> d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc </span>aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa<span> d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> aa <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa</div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-bidi.html b/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-bidi.html new file mode 100644 index 0000000000..df3338ed34 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-bidi.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<head> + <title>CSS Test: min/max-content size on box-decoration-break:clone inline box with bidi text and white-space:nowrap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"> + <link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556709"> + <link rel="match" href="clone-nowrap-intrinsic-size-bidi-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: nowrap; +} +.max > div { + width: max-content; +} +.min > div { + width: min-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div> + <span>‮a‭bc</span><span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc </span><span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span><span> d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc </span>aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa<span> d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> aa <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa </div> +</f> + +<f class="min"> +<div> + <span>‮a‭bc</span><span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc </span><span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span><span> d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc </span>aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa<span> d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> aa <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa </div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-ref.html b/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-ref.html new file mode 100644 index 0000000000..520cb42524 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<head> + <title>CSS Reference: min/max-content size on box-decoration-break:clone inline box w. white-space:nowrap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: pre; +} +.max > div { + width: max-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div><span>aaa</span><span>aaa</span> +</div> +<div><span>aaa</span>aa<span>aaa</span> +</div> +<div><span>aaa</span> <span>aaa</span> +</div> +<div><span>aaa </span><span>aaa</span> +</div> +<div><span>aaa</span><span> aaa</span> +</div> +<div><span>aaa</span> aa<span>aaa</span> +</div> +<div><span>aaa </span>aa<span>aaa</span> +</div> +<div><span>aaa</span>aa<span> aaa</span> +</div> +<div><span>aaa</span> aa <span>aaa</span> +</div> +<div><span>aaa</span>aa <span>aaa</span> +</div> +<div><span>aaa</span>aa</div> +</f> + +<f class="max"> +<div><span>aaa</span><span>aaa</span> +</div> +<div><span>aaa</span>aa<span>aaa</span> +</div> +<div><span>aaa</span> <span>aaa</span> +</div> +<div><span>aaa </span><span>aaa</span> +</div> +<div><span>aaa</span><span> aaa</span> +</div> +<div><span>aaa</span> aa<span>aaa</span> +</div> +<div><span>aaa </span>aa<span>aaa</span> +</div> +<div><span>aaa</span>aa<span> aaa</span> +</div> +<div><span>aaa</span> aa <span>aaa</span> +</div> +<div><span>aaa</span>aa <span>aaa</span> +</div> +<div><span>aaa</span>aa</div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size.html b/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size.html new file mode 100644 index 0000000000..38099c6eb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/clone-nowrap-intrinsic-size.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<head> + <title>CSS Test: min/max-content size on box-decoration-break:clone inline box w. white-space:nowrap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"> + <link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556709"> + <link rel="match" href="clone-nowrap-intrinsic-size-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: nowrap; +} +.max > div { + width: max-content; +} +.min > div { + width: min-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div> + <span>aaa</span><span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span> <span>aaa</span> +</div> +<div> + <span>aaa </span><span>aaa</span> +</div> +<div> + <span>aaa</span><span> aaa</span> +</div> +<div> + <span>aaa</span> aa<span>aaa</span> +</div> +<div> + <span>aaa </span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span> aaa</span> +</div> +<div> + <span>aaa</span> aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa </div> +</f> + +<f class="min"> +<div> + <span>aaa</span><span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span> <span>aaa</span> +</div> +<div> + <span>aaa </span><span>aaa</span> +</div> +<div> + <span>aaa</span><span> aaa</span> +</div> +<div> + <span>aaa</span> aa<span>aaa</span> +</div> +<div> + <span>aaa </span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span> aaa</span> +</div> +<div> + <span>aaa</span> aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa </div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/animation/contain-intrinsic-size-interpolation.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/animation/contain-intrinsic-size-interpolation.html new file mode 100644 index 0000000000..b768c1a330 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/animation/contain-intrinsic-size-interpolation.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>contain-intrinsic-size interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + contain: strict; + contain-intrinsic-size: 50px 60px; +} +</style> + +<body></body> + +<script> +// none doesn't interpolate +test_interpolation({ + property: 'contain-intrinsic-size', + from: neutralKeyframe, + to: '20px 10px', +}, [ + {at: -0.3, expect: '59px 75px'}, + {at: 0, expect: '50px 60px'}, + {at: 0.3, expect: '41px 45px'}, + {at: 0.6, expect: '32px 30px'}, + {at: 1, expect: '20px 10px'}, + {at: 1.5, expect: '5px 0px'} +]); + +test_no_interpolation({ + property: 'contain-intrinsic-size', + from: 'initial', + to: '20px 20px', +}); + +test_no_interpolation({ + property: 'contain-intrinsic-size', + from: 'inherit', + to: '20px', +}); + +test_no_interpolation({ + property: 'contain-intrinsic-size', + from: 'unset', + to: '20px', +}); + +test_no_interpolation({ + property: 'contain-intrinsic-size', + from: 'none', + to: '20px 20px', +}); + +test_no_interpolation({ + property: 'contain-intrinsic-size', + from: '10px 15px', + to: 'none', +}); + +test_interpolation({ + property: 'contain-intrinsic-size', + from: 'auto 0px 0px', + to: 'auto 10px 10px' +}, [ + {at: -0.3, expect: 'auto 0px 0px'}, // contain-intrinsic-size can't be negative. + {at: 0, expect: 'auto 0px 0px'}, + {at: 0.3, expect: 'auto 3px 3px'}, + {at: 0.6, expect: 'auto 6px 6px'}, + {at: 1, expect: 'auto 10px 10px'}, + {at: 1.5, expect: 'auto 15px 15px'} +]); + +test_no_interpolation({ + property: 'contain-intrinsic-size', + from: 'auto 10px 15px', + to: '20px 15px', +}); + +test_no_interpolation({ + property: 'contain-intrinsic-size', + from: 'none 15px', + to: '20px 15px', +}); + +test_no_interpolation({ + property: 'contain-intrinsic-size', + from: 'none 15px', + to: 'auto 20px 15px', +}); + +test_interpolation({ + property: 'contain-intrinsic-size', + from: '0px 0px', + to: '10px' +}, [ + {at: -0.3, expect: '0px 0px'}, // contain-intrinsic-size can't be negative. + {at: 0, expect: '0px 0px'}, + {at: 0.3, expect: '3px 3px'}, + {at: 0.6, expect: '6px 6px'}, + {at: 1, expect: '10px 10px'}, + {at: 1.5, expect: '15px 15px'} +]); + +test_interpolation({ + property: 'contain-intrinsic-size', + from: '20px 40px', + to: '30px 50px' +}, [ + {at: -0.3, expect: '17px 37px'}, + {at: 0, expect: '20px 40px'}, + {at: 0.3, expect: '23px 43px'}, + {at: 0.6, expect: '26px 46px'}, + {at: 1, expect: '30px 50px'}, + {at: 1.5, expect: '35px 55px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-001.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-001.html new file mode 100644 index 0000000000..7bf28388c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<div style="height: 2000px;"></div> + +<div style="contain-intrinsic-size: auto 1px;" id="test"> + <div style="height: 50px;"></div> <!-- make 'test' have a 50px height --> +</div> + +<script> +function finalize() { + el.style.contentVisibility = "auto"; + log.innerText = el.offsetHeight; + assert_equals(el.offsetHeight, 50); +} + +var t = async_test("contain-intrinsic-size: auto"); + +var log = document.getElementById("log"); +var el = document.getElementById("test"); +var observer = new ResizeObserver(function() { + requestAnimationFrame(t.step_func_done(finalize)); + observer.unobserve(el); +}); + +observer.observe(el); +el.offsetWidth; + +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-002.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-002.html new file mode 100644 index 0000000000..6412680b79 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>contain-intrinsic-size: auto with a vertical writing mode</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<div style="height: 2000px;"></div> + +<div style="contain-intrinsic-size: auto 1px;" id="test"> + <div style="height: 50px; writing-mode: vertical-lr;"></div> <!-- make 'test' have a 50px height --> +</div> + +<script> +function finalize() { + el.style.contentVisibility = "auto"; + log.innerText = el.offsetHeight; + assert_equals(el.offsetHeight, 50); +} + +var t = async_test("contain-intrinsic-size: auto"); + +var log = document.getElementById("log"); +var el = document.getElementById("test"); +var observer = new ResizeObserver(function() { + requestAnimationFrame(t.step_func_done(finalize)); + observer.unobserve(el); +}); + +observer.observe(el); +el.offsetWidth; + +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-003.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-003.html new file mode 100644 index 0000000000..a995ec1cc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-003.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<title>contain-intrinsic-size: auto with various dynamic changes</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<div style="height: 2000px;"></div> + +<div style="contain-intrinsic-size: auto 1px; contain: size;" id="test"> + <div style="height: 50px;" id="child"></div> <!-- make 'test' have a 50px height --> +</div> + +<script> +var next_func; + +var t = async_test("contain-intrinsic-size: auto"); + +var log = document.getElementById("log"); +var el = document.getElementById("test"); +var child = document.getElementById("child"); +var observer = new ResizeObserver(function() { + requestAnimationFrame(next_func); + observer.unobserve(el); +}); + +function step2() { + el.style.contentVisibility = "auto"; + el.style.contain = "size"; + assert_equals(el.offsetHeight, 50); + child.style.height = "30px"; + // We should still use the old saved size. + assert_equals(el.offsetHeight, 50); + + el.style.contentVisibility = ""; + el.style.contain = ""; + assert_equals(el.offsetHeight, 30); + + // Need to let resize observer run again to update the size. + next_func = t.step_func_done(finalize); + observer.observe(el); +} + +function finalize() { + el.style.contentVisibility = "auto"; + el.style.contain = "size"; + assert_equals(el.offsetHeight, 30); +} + + +el.offsetWidth; +t.step(function() { + assert_equals(el.offsetHeight, 1); + el.style.contain = ""; + assert_equals(el.offsetHeight, 50); + + // Let ResizeObserver run so that the size gets saved. + next_func = t.step_func(step2); + observer.observe(el); +}); + +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-004.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-004.html new file mode 100644 index 0000000000..a70e70cb9c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-004.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<title>Tests that contain-intrinsic-size: auto only works with content-visibility: auto, not just size containment</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<div style="height: 2000px;"></div> + +<div style="contain-intrinsic-size: auto 1px;" id="test"> + <div style="height: 50px;"></div> <!-- make 'test' have a 50px height --> +</div> + +<script> +function finalize() { + el.style.contain = "size"; + log.innerText = el.offsetHeight; + // No content-visibility: auto, so this should remain 1. + assert_equals(el.offsetHeight, 1); +} + +var t = async_test("contain-intrinsic-size: auto"); + +var log = document.getElementById("log"); +var el = document.getElementById("test"); +var observer = new ResizeObserver(function() { + requestAnimationFrame(t.step_func_done(finalize)); + observer.unobserve(el); +}); + +observer.observe(el); +el.offsetWidth; + +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-005.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-005.html new file mode 100644 index 0000000000..2b7e03192d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-005.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<title>Tests that contain-intrinsic-size: auto also works with content-visibility: hidden</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<div style="height: 2000px;"></div> + +<div style="contain-intrinsic-size: auto 1px;" id="test"> + <div style="height: 50px;"></div> <!-- make 'test' have a 50px height --> +</div> + +<script> +function finalize() { + el.style.contain = "size"; + el.style.contentVisibility = "hidden"; + log.innerText = el.offsetHeight; + assert_equals(el.offsetHeight, 50); +} + +var t = async_test("contain-intrinsic-size: auto"); + +var log = document.getElementById("log"); +var el = document.getElementById("test"); +var observer = new ResizeObserver(function() { + requestAnimationFrame(t.step_func_done(finalize)); + observer.unobserve(el); +}); + +observer.observe(el); +el.offsetWidth; + +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-006.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-006.html new file mode 100644 index 0000000000..422b730c2e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-006.html @@ -0,0 +1,407 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Last remembered size</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6220"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7527"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7532"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7539"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7564"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7606"> +<meta name="assert" content="Tests that the last remembered size is properly updated or removed" /> + +<style> +#target { + width: max-content; + height: max-content; +} +.cis-auto { + contain-intrinsic-size: auto 1px auto 2px; +} +.skip-contents { + content-visibility: hidden; +} +.size-100-50 { + width: 100px; + height: 50px; +} +.size-75-25 { + width: 75px; + height: 25px; +} +.vertical { + writing-mode: vertical-lr; +} +.hidden { + display: none; +} +.flex { + display: flex; +} +.inline { + display: inline; +} +</style> + +<div id="log"></div> + +<div id="parent"> + <div id="target"> + <div id="contents"></div> + </div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const parent = document.getElementById("parent"); +const target = document.getElementById("target"); +const contents = document.getElementById("contents"); + +function checkSize(expectedWidth, expectedHeight, msg) { + assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); + assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); +} + +function nextRendering() { + return new Promise(resolve => { + requestAnimationFrame(() => requestAnimationFrame(() => resolve())); + }); +} + +function cleanup() { + parent.className = ""; + target.className = ""; + contents.className = ""; + checkSize(0, 0, "Sizing after cleanup"); +} + +promise_test(async function() { + this.add_cleanup(cleanup); + target.className = "cis-auto skip-contents"; + contents.classList.add("size-100-50"); + checkSize(1, 2, "Size containment with no last remembered size"); + + target.classList.remove("skip-contents"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + checkSize(100, 50, "Using last remembered size"); + + contents.classList.remove("size-100-50"); + contents.classList.add("size-75-25"); + checkSize(100, 50, "Still using last remembered size"); + + target.classList.remove("skip-contents"); + checkSize(75, 25, "Sizing normally with different size"); + + target.classList.add("skip-contents"); + checkSize(100, 50, "Going back to last remembered size"); + + target.classList.remove("skip-contents"); + await nextRendering(); + target.classList.add("skip-contents"); + checkSize(75, 25, "Using the new last remembered size"); +}, "Basic usage"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + checkSize(0, 0, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + contents.classList.add("size-100-50"); + checkSize(0, 0, "Using last remembered size"); +}, "Last remembered size can be 0"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + parent.classList.add("hidden"); + checkSize(0, 0, "No box"); + + await nextRendering(); + parent.classList.remove("hidden"); + contents.classList.remove("size-100-50"); + checkSize(0, 0, "Sizing normally to 0x0"); + + await nextRendering(); + contents.classList.add("size-100-50"); + target.classList.add("skip-contents"); + checkSize(0, 0, "Using the new last remembered size"); +}, "Last remembered size can be set to 0 after losing display:none"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + contents.classList.remove("size-100-50"); + checkSize(100, 50, "Using last remembered size"); + + target.classList.add("vertical"); + checkSize(50, 100, "Last remembered size is logical"); +}, "Last remembered size is logical"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + checkSize(100, 50, "Using last remembered size"); + + parent.classList.add("hidden"); + checkSize(0, 0, "No box"); + + await nextRendering(); + parent.classList.remove("hidden"); + contents.classList.remove("size-100-50"); + checkSize(100, 50, "Still using last remembered size"); +}, "Last remembered size survives box destruction"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + contents.classList.remove("size-100-50"); + checkSize(100, 50, "Using last remembered size"); + + target.classList.add("flex"); + checkSize(100, 50, "Still using last remembered size"); +}, "Last remembered size survives display type changes"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + checkSize(100, 50, "Using last remembered size"); + + target.classList.remove("cis-auto"); + checkSize(0, 0, "Basic size containment"); + + await nextRendering(); + target.classList.add("cis-auto"); + checkSize(1, 2, "Size containment with no last remembered size"); +}, "Losing cis:auto removes last remembered size"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.remove("cis-auto"); + checkSize(100, 50, "Sizing normally again"); + + await nextRendering(); + target.classList.add("cis-auto"); + target.classList.add("skip-contents"); + checkSize(1, 2, "Size containment with no last remembered size"); +}, "Losing cis:auto removes last remembered size even if size doesn't change"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + checkSize(100, 50, "Using last remembered size"); + + target.classList.remove("cis-auto"); + checkSize(0, 0, "Basic size containment"); + + target.classList.add("cis-auto"); + checkSize(1, 2, "Size containment with no last remembered size"); +}, "Losing cis:auto removes last remembered size immediately"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + contents.classList.remove("size-100-50"); + contents.classList.add("size-75-25"); + checkSize(100, 50, "Using last remembered size"); + + parent.classList.add("hidden"); + target.classList.remove("cis-auto"); + target.classList.remove("skip-contents"); + checkSize(0, 0, "No box"); + + await nextRendering(); + parent.classList.remove("hidden"); + target.classList.add("cis-auto"); + contents.classList.remove("size-100-50"); + contents.classList.add("size-75-25"); + checkSize(75, 25, "Sizing normally with different size"); + + target.classList.add("skip-contents"); + checkSize(100, 50, "Going back to last remembered size"); +}, "Losing cis:auto during display:none doesn't remove last remembered size"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + contents.classList.remove("size-100-50"); + contents.classList.add("size-75-25"); + checkSize(100, 50, "Using last remembered size"); + + parent.classList.add("hidden"); + checkSize(0, 0, "No box"); + + await nextRendering(); + parent.classList.remove("hidden"); + target.classList.remove("cis-auto"); + checkSize(0, 0, "Basic size containment"); + + target.classList.add("cis-auto"); + checkSize(1, 2, "Size containment with no last remembered size"); +}, "Lack of cis:auto during box creation removes last remembered size"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + contents.classList.remove("size-100-50"); + contents.classList.add("size-75-25"); + checkSize(100, 50, "Using last remembered size"); + + parent.classList.add("hidden"); + target.classList.remove("cis-auto"); + checkSize(0, 0, "No box"); + + parent.classList.remove("hidden"); + checkSize(0, 0, "Basic size containment"); + + target.classList.add("cis-auto"); + checkSize(1, 2, "Size containment with no last remembered size"); +}, "Last remembered size can be removed synchronously"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + checkSize(100, 50, "Using last remembered size"); + + target.remove(); + checkSize(0, 0, "No box"); + + parent.appendChild(target); + checkSize(100, 50, "Still using last remembered size"); +}, "Disconnected element can briefly keep last remembered size"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + contents.classList.remove("size-100-50"); + contents.classList.add("size-75-25"); + checkSize(100, 50, "Using last remembered size"); + + target.remove(); + checkSize(0, 0, "No box"); + + await nextRendering(); + parent.appendChild(target); + checkSize(1, 2, "Size containment with no last remembered size"); +}, "Disconnected element ends up losing last remembered size"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + checkSize(0, 0, "Sizing normally"); + + await nextRendering(); + target.classList.add("skip-contents"); + target.remove(); + checkSize(0, 0, "No box"); + + await nextRendering(); + parent.appendChild(target); + checkSize(1, 2, "Size containment with no last remembered size"); +}, "Disconnected element ends up losing last remembered size even if size was 0x0"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("inline"); + checkSize(0, 0, "Non-atomic inline box"); + + await nextRendering(); + target.classList.remove("inline"); + target.classList.add("skip-contents"); + contents.classList.remove("size-100-50"); + checkSize(100, 50, "Still using previous last remembered size"); +}, "Last remembered size survives becoming inline"); + +promise_test(async function() { + this.add_cleanup(cleanup); + target.classList.add("cis-auto"); + contents.classList.add("size-100-50"); + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.classList.add("inline"); + checkSize(0, 0, "Non-atomic inline box"); + + await nextRendering(); + target.classList.remove("inline"); + contents.classList.remove("size-100-50"); + checkSize(0, 0, "Sizing normally to 0x0"); + + await nextRendering(); + target.classList.add("skip-contents"); + contents.classList.add("size-100-50"); + checkSize(0, 0, "Last remembered size is now 0x0"); +}, "Last remembered size can be set to 0x0 after losing display:inline"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-007.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-007.html new file mode 100644 index 0000000000..02501264c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-007.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Last remembered size</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> +<meta name="assert" content="Tests that the last remembered size works well in a variety of different elements or boxes." /> + +<style> +.test { + width: max-content; + height: max-content; + border: 1px solid; +} +.test::before { + content: ""; + display: block; + width: 320px; + height: 240px; +} +.contain-size { + contain: size; +} +.auto-width { + contain-intrinsic-width: auto 1px; +} +.auto-height { + contain-intrinsic-height: auto 2px; +} +.auto-both { + contain-intrinsic-size: auto 3px auto 4px; +} +.skip-contents .test { + content-visibility: hidden; +} +.scroll { + overflow: scroll; +} +.columns { + columns: 60px 2; +} +.grid { + display: grid; +} +.flex { + display: flex; +} +</style> + +<div id="log"></div> + +<div id="tests"> + <div></div> + <div class="scroll"></div> + <div class="columns"></div> + <div class="grid"></div> + <div class="flex"></div> + <fieldset></fieldset> + <img src="resources/dice.png"> + <svg></svg> + <canvas></canvas> + <iframe></iframe> + <video></video> + <button></button> + <select><option>Lorem ipsum</option></select> + <select multiple><option>Lorem ipsum</option></select> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +function nextRendering() { + return new Promise(resolve => { + requestAnimationFrame(() => requestAnimationFrame(() => resolve())); + }); +} +addEventListener("load", async function() { + const wrapper = document.getElementById("tests"); + const tests = new DocumentFragment(); + for (let template of wrapper.children) { + template.classList.add("test"); + const autoWidthTest = template.cloneNode(true); + const autoHeightTest = template.cloneNode(true); + const autoBothTest = template.cloneNode(true); + autoWidthTest.classList.add("auto-width"); + autoHeightTest.classList.add("auto-height"); + autoBothTest.classList.add("auto-both"); + + const normalWidth = template.clientWidth; + const normalHeight = template.clientHeight; + template.classList.add("contain-size"); + const containedWidth = template.clientWidth; + const containedHeight = template.clientHeight; + + autoWidthTest.dataset.expectedClientWidth = normalWidth; + autoWidthTest.dataset.expectedClientHeight = containedHeight; + autoHeightTest.dataset.expectedClientWidth = containedWidth; + autoHeightTest.dataset.expectedClientHeight = normalHeight; + autoBothTest.dataset.expectedClientWidth = normalWidth; + autoBothTest.dataset.expectedClientHeight = normalHeight; + + tests.append(autoWidthTest, autoHeightTest, autoBothTest); + } + wrapper.textContent = ""; + wrapper.appendChild(tests); + + // Wait so that the last remembered size can be stored. + await nextRendering(); + + wrapper.classList.add("skip-contents"); + checkLayout(".test"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-008.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-008.html new file mode 100644 index 0000000000..652710192f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-008.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Last remembered size</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering"> +<link rel="help" href="https://drafts.csswg.org/resize-observer-1/#html-event-loop"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7659"> +<meta name="assert" content="Tests that the last remembered size is set immediately before invoking ResizeObserver callbacks." /> + +<style> +.target { + width: max-content; + height: max-content; + border: 1px solid; +} +.target::before { + content: ""; + display: block; + width: 100px; + height: 50px; +} +.cis-auto .target { + contain-intrinsic-size: auto 40px auto 20px; +} +.skip-contents { + content-visibility: hidden; +} +</style> + +<div id="log"></div> + +<div class="target" id="target1"></div> +<div class="target" id="target2"></div> +<div class="target" id="target3"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +function checkSize(target, expectedWidth, expectedHeight, msg) { + assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); + assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); +} + +let step = 0; + +// Animation frame callbacks are invoked before ResizeObserver callbacks, +// so the last remembered size shouldn't have been set yet. +const test1 = async_test("requestAnimationFrame"); +const target1 = document.getElementById("target1"); +function step1(entries, ro) { + assert_equals(++step, 1, "Step 1"); + target1.classList.add("skip-contents"); + checkSize(target1, 40, 20, "No last remembered size"); +} +requestAnimationFrame(test1.step_func_done(step1)); + +// The last remembered size should be set immediately before invoking +// ResizeObserver callbacks, even if the ResizeObserver is created before +// laying out an element that can record a last remembered size. +const test2 = async_test("Early ResizeObserver"); +const target2 = document.getElementById("target2"); +function step2(entries, ro) { + assert_equals(++step, 2, "Step 2"); + ro.disconnect(); + target2.classList.add("skip-contents"); + checkSize(target2, 100, 50, "Using last remembered size"); +} +new ResizeObserver(test2.step_func_done(step2)).observe(target2); + +// Let elements record a last remembered size and force layout. +document.body.classList.add("cis-auto"); +document.body.offsetLeft; + +// The last remembered size should also have been set in the callback of +// a ResizeObserver creater after laying out an element that can record +// a last remembered size. +const test3 = async_test("Late ResizeObserver"); +const target3 = document.getElementById("target3"); +function step3(entries, ro) { + assert_equals(++step, 3, "Step 3"); + ro.disconnect(); + target3.classList.add("skip-contents"); + checkSize(target3, 100, 50, "Using last remembered size"); +} +new ResizeObserver(test3.step_func_done(step3)).observe(target3); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-009.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-009.html new file mode 100644 index 0000000000..6e17f69e98 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-009.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Last remembered size</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7529"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7516"> +<meta name="assert" content="Tests that the last remembered size is tracked independently for each axis." /> + +<style> +#target { + width: max-content; + height: max-content; + border: 1px solid; +} +#target::before { + content: ""; + display: block; +} +.content-100-50::before { + width: 100px; + height: 50px; +} +.content-skip { + content-visibility: hidden; +} +.ciw-auto-2 { + contain-intrinsic-width: auto 2px; +} +.ciw-auto-20 { + contain-intrinsic-width: auto 20px; +} +.cih-auto-1 { + contain-intrinsic-height: auto 1px; +} +.cih-auto-10 { + contain-intrinsic-height: auto 10px; +} +</style> + +<div id="log"></div> + +<div id="target"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const target = document.getElementById("target"); + +function checkSize(expectedWidth, expectedHeight, msg) { + assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); + assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); +} + +function nextRendering() { + return new Promise(resolve => { + requestAnimationFrame(() => requestAnimationFrame(() => resolve())); + }); +} + +promise_test(async function() { + target.className = "content-100-50 ciw-auto-20"; + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.className = "content-skip ciw-auto-2 cih-auto-1"; + checkSize(100, 1, "Using last remembered inline size"); +}, "Only recording last remembered inline size"); + +promise_test(async function() { + target.className = "content-100-50 cih-auto-10"; + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.className = "content-skip ciw-auto-2 cih-auto-1"; + checkSize(2, 50, "Using last remembered block size"); +}, "Only recording last remembered block size"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-010.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-010.html new file mode 100644 index 0000000000..03a9056c43 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-010.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Last remembered size</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7598"> +<meta name="assert" content="Tests that the last remembered size takes all fragments into account." /> + +<style> +#wrapper { + column-width: 100px; + width: max-content; + height: 100px; +} +#target { + width: max-content; + height: max-content; + background: orange; +} +#target::before { + content: ""; + display: block; +} +.content-50-150::before { + width: 50px; + height: 150px; +} +.content-50-175::before { + width: 50px; + height: 175px; +} +.content-skip { + content-visibility: hidden; +} +.cis-auto { + contain-intrinsic-size: auto 1px; +} +</style> + +<div id="log"></div> + +<div id="wrapper"> + <div id="target"></div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const target = document.getElementById("target"); + +function checkSizes(expectedSizes, msg) { + const rects = target.getClientRects(); + assert_equals(rects.length, expectedSizes.length, msg + " - fragments"); + for (let i = 0; i < rects.length; ++i) { + assert_equals(rects[i].width, expectedSizes[i][0], `${msg} - fragment #${i+1} width`); + assert_equals(rects[i].height, expectedSizes[i][1], `${msg} - fragment #${i+1} height`); + } +} + +function checkSize(expectedWidth, expectedHeight, msg) { + assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); + assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); +} + +function nextRendering() { + return new Promise(resolve => { + requestAnimationFrame(() => requestAnimationFrame(() => resolve())); + }); +} + +promise_test(async function() { + target.className = "cis-auto content-50-150"; + checkSizes([[50, 100], [50, 50]], "Sizing normally"); + + await nextRendering(); + target.className = "cis-auto content-skip"; + checkSize(50, 150, "Using last remembered size"); +}, "Last remembered size supports multiple fragments"); + +promise_test(async function() { + target.className = "cis-auto content-50-150"; + checkSizes([[50, 100], [50, 50]], "Sizing normally"); + + await nextRendering(); + target.className = "cis-auto content-50-175"; + checkSizes([[50, 100], [50, 75]], "Sizing normally with new size"); + + await nextRendering(); + target.className = "cis-auto content-skip"; + checkSize(50, 175, "Using updated last remembered size"); +}, "Last remembered size is updated when 2nd fragment changes size"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-011.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-011.html new file mode 100644 index 0000000000..cb82eedf26 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-011.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Last remembered size</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> +<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7807"> +<meta name="assert" content="Tests that the last remembered size can be updated when the element has size containment but doesn't skip its contents." /> + +<style> +#target { + width: max-content; + height: max-content; + border: 1px solid; +} +#target::before { + content: ""; + display: block; +} +.content-100-50::before { + width: 100px; + height: 50px; +} +.content-skip { + content-visibility: hidden; +} +.contain-size { + contain: size; +} +.contain-inline-size { + contain: inline-size; +} +.ciw-auto-2 { + contain-intrinsic-width: auto 2px; +} +.ciw-auto-20 { + contain-intrinsic-width: auto 20px; +} +.cih-auto-1 { + contain-intrinsic-height: auto 1px; +} +.cih-auto-10 { + contain-intrinsic-height: auto 10px; +} +</style> + +<div id="log"></div> + +<div id="target"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const target = document.getElementById("target"); + +function checkSize(expectedWidth, expectedHeight, msg) { + assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); + assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); +} + +function nextRendering() { + return new Promise(resolve => { + requestAnimationFrame(() => requestAnimationFrame(() => resolve())); + }); +} + +promise_test(async function() { + target.className = "content-100-50"; + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.className = "content-100-50 ciw-auto-20 cih-auto-10 contain-size"; + checkSize(20, 10, "Size containment"); + + await nextRendering(); + target.className = "content-skip ciw-auto-2 cih-auto-1"; + checkSize(20, 10, "Using last remembered size"); +}, "contain:size does not prevent recording last remembered size"); + +promise_test(async function() { + target.className = "content-100-50"; + checkSize(100, 50, "Sizing normally"); + + await nextRendering(); + target.className = "content-100-50 ciw-auto-20 cih-auto-10 contain-inline-size"; + checkSize(20, 50, "Size containment for inline axis"); + + await nextRendering(); + target.className = "content-skip ciw-auto-2 cih-auto-1"; + checkSize(20, 50, "Using last remembered block size"); +}, "contain:inline-size does not prevent recording last remembered inline size"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-012.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-012.html new file mode 100644 index 0000000000..8fd395a224 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-012.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Last remembered size</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7807"> +<meta name="assert" content="Tests that content-visibility:auto, contain:size and contain-intrinsic-size:auto do not result in instable size." /> + +<style> +#target { + content-visibility: auto; + contain-intrinsic-size: auto 100px auto 101px; + width: max-content; + height: max-content; + border: 1px solid; +} +#target::before { + content: ""; + display: block; + width: 50px; + height: 51px; +} +</style> + +<div id="log"></div> + +<div id="spacer"></div> +<div id="target"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const target = document.getElementById("target"); +const spacer = document.getElementById("spacer"); + +function checkSize(expectedWidth, expectedHeight, msg) { + test(function() { + assert_equals(target.clientWidth, expectedWidth, "clientWidth"); + assert_equals(target.clientHeight, expectedHeight, "clientHeight"); + }, msg); +} + +function nextRendering() { + return new Promise(resolve => { + requestAnimationFrame(() => requestAnimationFrame(() => resolve())); + }); +} + +setup({explicit_done: true}); + +(async function() { + // Size normally. + await nextRendering(); + checkSize(50, 51, "Sizing normally"); + await nextRendering(); + + // The last remembered size is 50x51, but the element is not skipping + // its contents, so the fallback size will be used instead. + target.style.contain = "size"; + checkSize(100, 101, "Sizing with c-i-s fallback"); + await nextRendering(); + + // The last remembered size is now 100x101, but still not using it. + spacer.style.height = "10000vh"; + checkSize(100, 101, "Still sizing with c-i-s fallback"); + await nextRendering(); + + // The element went off-screen, using last remembered size now. + // It's important that this is the same as in previous step! + checkSize(100, 101, "Sizing with last remembered size"); + await nextRendering(); + + // Change the c-i-s fallback to prove last remembered size is used. + target.style.containIntrinsicSize = "auto 150px auto 151px"; + checkSize(100, 101, "Still sizing with last remembered size"); + + // Move the element on-screen. Switch to using c-i-s fallback, and + // update the last remembered size. + spacer.style.height = "0px"; + await nextRendering(); + checkSize(150, 151, "Sizing with new c-i-s fallback"); + await nextRendering(); + + // Move off-screen again. Same size as in previous step! + spacer.style.height = "10000vh"; + await nextRendering(); + target.style.containIntrinsicSize = "auto 200px auto 201px"; + checkSize(150, 151, "Sizing with new last remembered size"); + + done(); +})(); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001-ref.html new file mode 100644 index 0000000000..299930ac35 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001-ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: unsized div</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + background: lightblue; + height: 222px; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html new file mode 100644 index 0000000000..86f141e087 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: unsized div</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-001-ref.html"> +<meta name="assert" content="contain-intrinsic-size is used to size the div as if it had a single child of this size"> + +<style> +#target { + background: lightblue; + contain-intrinsic-size: 111px 222px; + contain: size; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002-ref.html new file mode 100644 index 0000000000..a2fc6a0731 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: div with max-content parent</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#border { + width: max-content; + border: 1px solid black; +} +#target { + background: lightblue; + width: 111px; + height: 222px; +} +</style> + +<div id=border> + <div id=target></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002.html new file mode 100644 index 0000000000..cef3ed27ce --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002.html @@ -0,0 +1,23 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: div with max-content parent</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-002-ref.html"> +<meta name="assert" content="contain-intrinsic-size is used to size the div, with parent's max-content width respecting it"> + +<style> +#border { + width: max-content; + border: 1px solid black; +} +#target { + background: lightblue; + contain-intrinsic-size: 111px 222px; + contain: size; +} +</style> + +<div id=border> + <div id=target></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003-ref.html new file mode 100644 index 0000000000..dab2739460 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: width specified</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + background: lightblue; + width: 50px; + height: 222px; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003.html new file mode 100644 index 0000000000..a56d02b316 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: width specified</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-003-ref.html"> +<meta name="assert" content="contain-intrinsic-size's width is ignored if width is specified"> + +<style> +#target { + background: lightblue; + contain-intrinsic-size: 111px 222px; + contain: size; + width: 50px; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004-ref.html new file mode 100644 index 0000000000..5f896803e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: width is min-content</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + background: lightblue; + width: 111px; + height: 222px; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004.html new file mode 100644 index 0000000000..dd1055d768 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: width is min-content</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-004-ref.html"> +<meta name="assert" content="div is sized to intrinsic-width if width is min-content"> + +<style> +#target { + background: lightblue; + contain-intrinsic-size: 111px 222px; + contain: size; + width: min-content; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005-ref.html new file mode 100644 index 0000000000..0940a6f702 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: width is max-content</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + background: lightblue; + width: 111px; + height: 222px; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005.html new file mode 100644 index 0000000000..b5f019b042 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: width is max-content</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-004-ref.html"> +<meta name="assert" content="div is sized to intrinsic-width if width is max-content"> + +<style> +#target { + background: lightblue; + contain-intrinsic-size: 111px 222px; + contain: size; + width: max-content; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006-ref.html new file mode 100644 index 0000000000..9d3912dafe --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: unsized div, intrinsic-size is small</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + background: lightblue; + height: 6px; + contain: size; +} +</style> + +<div id=target>Lorem ipsum</div> + diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006.html new file mode 100644 index 0000000000..6dd0e47729 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: unsized div, intrinsic-size is small</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-006-ref.html"> +<meta name="assert" content="content dimensions are ignored if intrinsic-size is specified"> + +<style> +#target { + background: lightblue; + contain-intrinsic-size: 5px 6px; + contain: size; +} +</style> + +<div id=target>Lorem ipsum</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007-ref.html new file mode 100644 index 0000000000..c372f2dfce --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007-ref.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: div with border</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#border { + border: 1px solid blue; + width: max-content; +} + +#target { + background: lightblue; + box-sizing: content-box; + width: 55px; + height: 66px; + + border-style: solid; + border-color: black; + border-width: 2px 3px 5px 7px; +} +</style> + +<div id=border> + <div id=target></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007.html new file mode 100644 index 0000000000..838836c3a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: div with border</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-007-ref.html"> +<meta name="assert" content="contain-intrinsic-size sizes the content box, not the border box"> + +<style> +#border { + border: 1px solid blue; + width: max-content; +} + +#target { + background: lightblue; + contain-intrinsic-size: 55px 66px; + contain: size; + border-style: solid; + border-color: black; + border-width: 2px 3px 5px 7px; +} +</style> + +<div id=border> + <div id=target></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008-ref.html new file mode 100644 index 0000000000..af20b26a39 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008-ref.html @@ -0,0 +1,37 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: writing modes</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +.border { + border: 1px solid blue; + width: max-content; + margin: 5px; +} + +.box { + background: lightblue; + box-sizing: content-box; + width: 55px; + height: 66px; + border-style: solid; + border-color: black; + border-width: 2px 3px 5px 7px; + padding: 11px 13px 17px 19px; +} +.verticalrl { + writing-mode: vertical-rl; +} +.verticallr { + writing-mode: vertical-lr; +} +.horizontaltb { + writing-mode: horizontal-tb; +} +</style> + +<div class=border><div class="box verticalrl">Lorem</div></div> +<div class=border><div class="box verticallr">Ipsum</div></div> +<div class=border><div class="box horizontaltb">Dolor</div></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008.html new file mode 100644 index 0000000000..ac265ad7b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008.html @@ -0,0 +1,38 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: writing modes</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-008-ref.html"> +<meta name="assert" content="contain-intrinsic-size specifies physical dimensions, and respects writing modes"> + +<style> +.border { + border: 1px solid blue; + width: max-content; + margin: 5px; +} + +.box { + background: lightblue; + contain-intrinsic-size: 55px 66px; + contain: size; + border-style: solid; + border-color: black; + border-width: 2px 3px 5px 7px; + padding: 11px 13px 17px 19px; +} +.verticalrl { + writing-mode: vertical-rl; +} +.verticallr { + writing-mode: vertical-lr; +} +.horizontaltb { + writing-mode: horizontal-tb; +} +</style> + +<div class=border><div class="box verticalrl">Lorem</div></div> +<div class=border><div class="box verticallr">Ipsum</div></div> +<div class=border><div class="box horizontaltb">Dolor</div></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-009.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-009.html new file mode 100644 index 0000000000..0aa62eaaef --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-009.html @@ -0,0 +1,68 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS contain-intrinsic-size: select multiple</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<meta name="assert" content="contain-intrinsic-size sizes select multiple"> + +<style> +.cis-both { + contain-intrinsic-size: 55px 66px; +} + +.cis-width { + contain-intrinsic-size: 55px none; +} + +.cis-height { + contain-intrinsic-size: none 66px; +} + +select { + padding: 0; +} + +.test { + contain: size; + background: lightblue; + border: 1px solid blue; + margin: 5px; +} +</style> + +<!-- To measure the size of an empty <select> without size containment --> +<select id="reference" multiple size="1"></select> + +<select multiple class="test cis-both" +data-expected-client-width="55" data-expected-client-height="66"></select> +<select multiple class="test cis-width" +data-expected-client-width="55"></select> +<select multiple class="test cis-height" +data-expected-client-height="66"></select> + +<select multiple size="1" class="test cis-width" +data-expected-client-width="55"></select> +<select multiple size="1" class="test cis-height" +data-expected-client-height="66"></select> + +<select multiple size="10" class="test cis-width" +data-expected-client-width="55"></select> +<select multiple size="10" class="test cis-height" +data-expected-client-height="66"></select> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +const reference = document.getElementById("reference"); +const normalWidth = reference.clientWidth; +for (let test of document.querySelectorAll(".test.cis-width")) { + reference.size = test.size || 4; + test.dataset.expectedClientHeight = reference.clientHeight; +} +for (let test of document.querySelectorAll(".test.cis-height")) { + test.dataset.expectedClientWidth = normalWidth; + } + +checkLayout('.test'); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010-ref.html new file mode 100644 index 0000000000..950ddd1f89 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010-ref.html @@ -0,0 +1,39 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: flex row</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#flex { + display: flex; + flex-direction: row; + width: 500px; + height: 100px; +} +.item { + border: 1px solid black; + box-sizing: content-box; +} +#one { + background: lightblue; + width: 55px; + flex-grow: 3; +} +#two { + background: lightgreen; + width: 66px; + flex-grow: 2; +} +#three { + background: lightgrey; + width: 77px; + flex-grow: 1; +} +</style> + +<div id=flex> + <div class=item id=one></div> + <div class=item id=two></div> + <div class=item id=three></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010.html new file mode 100644 index 0000000000..f5df500e8c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010.html @@ -0,0 +1,43 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: flex row</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-010-ref.html"> +<meta name="assert" content="items are flexed correctly when they are sized by intrinsic-size in a flex row"> + +<style> +#flex { + display: flex; + flex-direction: row; + width: 500px; + height: 100px; +} +.item { + border: 1px solid black; +} +#one { + background: lightblue; + contain-intrinsic-size: 55px 11px; + contain: size; + flex-grow: 3; +} +#two { + background: lightgreen; + contain-intrinsic-size: 66px 22px; + contain: size; + flex-grow: 2; +} +#three { + background: lightgrey; + contain-intrinsic-size: 77px 33px; + contain: size; + flex-grow: 1; +} +</style> + +<div id=flex> + <div class=item id=one></div> + <div class=item id=two></div> + <div class=item id=three></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011-ref.html new file mode 100644 index 0000000000..68d1fbe408 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011-ref.html @@ -0,0 +1,39 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: flex column</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#flex { + display: flex; + flex-direction: column; + width: 100px; + height: 200px; +} +.item { + border: 1px solid black; + box-sizing: content-box; +} +#one { + background: lightblue; + height: 11px; + flex-grow: 3; +} +#two { + background: lightgreen; + height: 22px; + flex-grow: 2; +} +#three { + background: lightgrey; + height: 33px; + flex-grow: 1; +} +</style> + +<div id=flex> + <div class=item id=one></div> + <div class=item id=two></div> + <div class=item id=three></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011.html new file mode 100644 index 0000000000..de35326629 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011.html @@ -0,0 +1,43 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: flex column</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-011-ref.html"> +<meta name="assert" content="items are flexed correctly when they are sized by intrinsic-size in a flex column"> + +<style> +#flex { + display: flex; + flex-direction: column; + width: 100px; + height: 200px; +} +.item { + border: 1px solid black; +} +#one { + background: lightblue; + contain-intrinsic-size: 55px 11px; + contain: size; + flex-grow: 3; +} +#two { + background: lightgreen; + contain-intrinsic-size: 66px 22px; + contain: size; + flex-grow: 2; +} +#three { + background: lightgrey; + contain-intrinsic-size: 77px 33px; + contain: size; + flex-grow: 1; +} +</style> + +<div id=flex> + <div class=item id=one></div> + <div class=item id=two></div> + <div class=item id=three></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012-ref.html new file mode 100644 index 0000000000..4b0fe755b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012-ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: replaced content</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + width: 100px; + height: 200px; +} +</style> + +<img id=target src="resources/dice.png"></img> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012.html new file mode 100644 index 0000000000..54a49c1856 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: replaced content</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-012-ref.html"> +<meta name="assert" content="contain-intrinsic-size overrides replaced content's intrinsic dimensions"> + +<style> +#target { + contain-intrinsic-size: 100px 200px; + contain: size; +} +</style> + +<img id=target src="resources/dice.png"></img> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013-ref.html new file mode 100644 index 0000000000..7a0b5788ae --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: intrinsic-size changes</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#border { + width: max-content; + border: 1px solid black; +} +#border > div { + width: 77px; + height: 88px; +} +</style> + +<div id=border><div id=target></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013.html new file mode 100644 index 0000000000..370398042f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013.html @@ -0,0 +1,33 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: intrinsic-size changes.</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-013-ref.html"> +<meta name="assert" content="changes in intrinsic-size cause reflow"> +<script src="/common/reftest-wait.js"></script> + +<style> +#border { + width: max-content; + border: 1px solid black; +} +#border > div { + contain-intrinsic-size: 55px 66px; + contain: size; +} +</style> + +<div id=border><div id=target></div></div> + +<script> +function changeStyle() { + document.getElementById("target").style = "contain-intrinsic-size: 77px 88px;"; + requestAnimationFrame(takeScreenshot); +} + +onload = () => requestAnimationFrame(() => requestAnimationFrame(changeStyle)); + +</script> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014-ref.html new file mode 100644 index 0000000000..72a24c7a59 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: fieldset</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +fieldset { + box-sizing: content-box; + width: 111px; + height: 222px; +} +</style> + +<fieldset> + <legend>This is a legend</legend> + This is some content. +</fieldset> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014.html new file mode 100644 index 0000000000..d268264d28 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: fieldset</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-014-ref.html"> +<meta name="assert" content="contain-intrinsic-size sizes fieldsets"> + +<style> +fieldset { + width: max-content; + contain-intrinsic-size: 111px 222px; + contain: size; +} +</style> + +<fieldset> + <legend>This is a legend</legend> + This is some content. +</fieldset> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015-ref.html new file mode 100644 index 0000000000..76abf0c14b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS contain-intrinsic-size: inline flex</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> +<style> +div { + display: inline-flex; + border: 5px solid green; + width: 111px; + height: 222px; + box-sizing: content-box; +} +</style> + +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015.html new file mode 100644 index 0000000000..8eda4b8845 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS contain-intrinsic-size: inline flex</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size"> +<link rel="match" href="contain-intrinsic-size-015-ref.html"> +<meta name="assert" content="contain-intrinsic-size sizes an inline-flex element"> +<style> +div { + display: inline-flex; + border: 5px solid green; + contain-intrinsic-size: 111px 222px; + contain: size; + color: transparent; +} +</style> + +<div>test</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016-ref.html new file mode 100644 index 0000000000..029159390a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016-ref.html @@ -0,0 +1,39 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: flex row, items with size containment (ref)</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#flex { + display: flex; + flex-direction: row; + width: 500px; + height: 100px; +} +.item { + border: 1px solid black; + box-sizing: content-box; +} +#one { + background: lightblue; + width: 55px; + flex-grow: 3; +} +#two { + background: lightgreen; + width: 66px; + flex-grow: 2; +} +#three { + background: lightgrey; + width: 77px; + flex-grow: 1; +} +</style> + +<div id=flex> + <div class=item id=one></div> + <div class=item id=two></div> + <div class=item id=three></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016.html new file mode 100644 index 0000000000..fabc48d4a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016.html @@ -0,0 +1,44 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: flex row, items with size containment</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-016-ref.html"> +<meta name="assert" content="contain-intrinsic-size take 'priority' over size-containment in flex"> + +<style> +#flex { + display: flex; + flex-direction: row; + width: 500px; + height: 100px; +} +.item { + border: 1px solid black; + contain: size; +} +#one { + background: lightblue; + contain-intrinsic-size: 55px 11px; + contain: size; + flex-grow: 3; +} +#two { + background: lightgreen; + contain-intrinsic-size: 66px 22px; + contain: size; + flex-grow: 2; +} +#three { + background: lightgrey; + contain-intrinsic-size: 77px 33px; + contain: size; + flex-grow: 1; +} +</style> + +<div id=flex> + <div class=item id=one></div> + <div class=item id=two></div> + <div class=item id=three></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017-ref.html new file mode 100644 index 0000000000..49f7499fe8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017-ref.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: replaced content (vertical-lr)</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +body { + writing-mode: vertical-lr; +} +#target { + width: 100px; + height: 200px; +} +</style> + +<img id=target src="resources/dice.png"></img> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017.html new file mode 100644 index 0000000000..5ce15eba59 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017.html @@ -0,0 +1,21 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: replaced content (vertical-lr)</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-017-ref.html"> +<meta name="assert" content="contain-intrinsic-size specifies physical dimensions on replaced content"> + +<style> +body { + writing-mode: vertical-lr; +} +#target { + contain-intrinsic-size: 100px 200px; + contain: size; + inline-size: min-content; + block-size: auto; +} +</style> + +<img id=target src="resources/dice.png"></img> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018-ref.html new file mode 100644 index 0000000000..537001d6d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: sized div</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + background: lightblue; + width: 55px; + height: 66px; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018.html new file mode 100644 index 0000000000..649e83364f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: sized div</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-018-ref.html"> +<meta name="assert" content="width / height ignore intrinsic-size"> + +<style> +#target { + background: lightblue; + width: 55px; + height: 66px; + contain-intrinsic-size: 111px 222px; + contain: size; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019-ref.html new file mode 100644 index 0000000000..172c78177b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: div with fit-content width</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + background: lightblue; + width: 111px; + height: 222px; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019.html new file mode 100644 index 0000000000..4ba1bed9de --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: div with fit-content width</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-019-ref.html"> +<meta name="assert" content="div is sized to intrinsic-width when width is fit-content"> + +<style> +#target { + background: lightblue; + contain-intrinsic-size: 111px 222px; + contain: size; + width: fit-content; +} +</style> + +<div id=target></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020-ref.html new file mode 100644 index 0000000000..c4f34e84f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020-ref.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: replaced content (min-content)</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#target { + width: 100px; + height: 200px; +} +</style> + +<img id=target src="resources/dice.png"></img> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020.html new file mode 100644 index 0000000000..42482abf0f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: replaced content (min-content)</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-020-ref.html"> +<meta name="assert" content="replaced content is sized to intrinsic-width when width is min-content"> + +<style> +#target { + contain-intrinsic-size: 100px 200px; + contain: size; + inline-size: min-content; + block-size: auto; +} +</style> + +<img id=target src="resources/dice.png"></img> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021-ref.html new file mode 100644 index 0000000000..6019652087 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021-ref.html @@ -0,0 +1,41 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: flex row, flex height based on children</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#flex { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + width: 250px; +} +.item { + border: 1px solid black; + box-sizing: content-box; +} +#one { + background: lightblue; + width: 55px; + height: 21px; +} +#two { + background: lightgreen; + width: 66px; + height: 42px; +} +#three { + background: lightgrey; + align-self: stretch; + width: 77px; + height: 63px; +} +</style> + +<div id=flex> + <div class=item id=one></div> + <div class=item id=two></div> + <div class=item id=three></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021.html new file mode 100644 index 0000000000..12f9398420 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021.html @@ -0,0 +1,42 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: flex row, flex height based on children</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-021-ref.html"> +<meta name="assert" content="flex container is sized by the largest intrinsic-height of content, even with align-self: stretch"> + +<style> +#flex { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + width: 250px; +} +.item { + border: 1px solid black; +} +#one { + background: lightblue; + contain-intrinsic-size: 55px 21px; + contain: size; +} +#two { + background: lightgreen; + contain-intrinsic-size: 66px 42px; + contain: size; +} +#three { + background: lightgrey; + align-self: stretch; + contain-intrinsic-size: 77px 63px; + contain: size; +} +</style> + +<div id=flex> + <div class=item id=one></div> + <div class=item id=two></div> + <div class=item id=three></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022-ref.html new file mode 100644 index 0000000000..81991fb17c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid definite size</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#grid { + border: 3px solid black; + display: grid; + grid-template: 55px 66px / 77px 88px; + box-sizing: content-box; + width: 70px; + height: 80px; + background: lightblue; + grid-gap: 5px; +} +.item { + background: lightgreen; + opacity: 0.5; + height: 100%; +} +</style> + +<div id=grid> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022.html new file mode 100644 index 0000000000..5f58851748 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022.html @@ -0,0 +1,32 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid definite size</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-022-ref.html"> +<meta name="assert" content="grid container is sized by intrinsic-size, even if definite track sizes overflow"> + +<style> +#grid { + border: 3px solid black; + display: grid; + grid-template: 55px 66px / 77px 88px; + contain-intrinsic-size: 70px 80px; + contain: size; + width: max-content; + background: lightblue; + grid-gap: 5px; +} +.item { + background: lightgreen; + opacity: 0.5; + height: 100%; +} +</style> + +<div id=grid> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023-ref.html new file mode 100644 index 0000000000..eccbecb6c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid indefinite size</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#grid { + border: 3px solid black; + display: grid; + grid-template: 1fr 2fr / 3fr 4fr; + box-sizing: content-box; + width: 70px; + height: 80px; + background: lightblue; + grid-gap: 5px; +} +.item { + background: lightgreen; + height: 100%; +} +</style> + +<div id=grid> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023.html new file mode 100644 index 0000000000..f8e3a607f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid indefinite size</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-023-ref.html"> +<meta name="assert" content="grid container is sized by intrinsic-size, with fr-tracks using that space"> + +<style> +#grid { + border: 3px solid black; + display: grid; + grid-template: 1fr 2fr / 3fr 4fr; + contain-intrinsic-size: 70px 80px; + contain: size; + width: max-content; + background: lightblue; + grid-gap: 5px; +} +.item { + background: lightgreen; + height: 100%; +} +</style> + +<div id=grid> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024-ref.html new file mode 100644 index 0000000000..e2f53b6570 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid definite size, large size</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +#grid { + border: 3px solid black; + display: grid; + grid-template: 55px 66px / 77px 88px; + box-sizing: content-box; + width: 200px; + height: 300px; + background: lightblue; + grid-gap: 5px; +} +.item { + background: lightgreen; + opacity: 0.5; + height: 100%; +} +</style> + +<div id=grid> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024.html new file mode 100644 index 0000000000..f6305d438b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024.html @@ -0,0 +1,32 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid definite size, large size</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-024-ref.html"> +<meta name="assert" content="contain-intrinsic-size sizes grid container, even if definite tracks are smaller"> + +<style> +#grid { + border: 3px solid black; + display: grid; + grid-template: 55px 66px / 77px 88px; + contain-intrinsic-size: 200px 300px; + contain: size; + width: max-content; + background: lightblue; + grid-gap: 5px; +} +.item { + background: lightgreen; + opacity: 0.5; + height: 100%; +} +</style> + +<div id=grid> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025-ref.html new file mode 100644 index 0000000000..fbb1ce8868 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025-ref.html @@ -0,0 +1,56 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid indefinite size, auto-fit</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +.grid { + border: 3px solid black; + display: grid; + width: 70px; + height: 80px; + box-sizing: content-box; + background: lightblue; + grid-gap: 5px; +} +.one { + grid-template: repeat(8, 10px) / 3fr 4fr; +} +.two { + grid-template: 1fr 2fr / repeat(3, 15px); +} +.three { + grid-template: repeat(8, 10px) / repeat(3, 15px); +} + +.item { + background: green; + height: 100%; +} +</style> + +<div class="grid one"> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> +<div class="grid two"> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> +<div class="grid three"> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025.html new file mode 100644 index 0000000000..5557fcc8d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025.html @@ -0,0 +1,58 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid indefinite size, auto-fit</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-025-ref.html"> +<meta name="assert" content="definite size auto-fit uses intrinsic-size for the available space"> + +<style> +.grid { + border: 3px solid black; + display: grid; + contain-intrinsic-size: 70px 80px; + contain: size; + width: max-content; + background: lightblue; + grid-gap: 5px; +} +.one { + grid-template: repeat(auto-fit, 10px) / 3fr 4fr; +} +.two { + grid-template: 1fr 2fr / repeat(auto-fit, 15px); +} +.three { + grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px); +} + +.item { + background: green; + height: 100%; +} +</style> + +<div class="grid one"> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> +<div class="grid two"> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> +<div class="grid three"> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> + <div class=item></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026-ref.html new file mode 100644 index 0000000000..3bf3a288f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026-ref.html @@ -0,0 +1,54 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid auto-fit, min- max- size interactions</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> + +<style> +.grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: repeat(auto-fit, 100px); + height: 40px; +} +.one { + width: 200px; +} +.two { + width: 200px; +} +.three { + width: 200px; +} +.four { + width: 150px; +} +.item { + background: green; + height: 100%; +} +</style> + +<p>min-width larger than contain-intrinsic-width: +<div class="grid one"> + <div class="item">one</div> + <div class="item">two</div> +</div> + +<p>min-width smaller than contain-intrinsic-width: +<div class="grid two"> + <div class="item">one</div> + <div class="item">two</div> +</div> + +<p>max-width ignored since min-width is larger: +<div class="grid three"> + <div class="item">one</div> + <div class="item">two</div> +</div> + +<p>min-width shrinks grid since it overrides contain-intrinsic-width: +<div class="grid four"> + <div class="item">one</div> + <div class="item">two</div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026.html new file mode 100644 index 0000000000..c9f3f1aa38 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026.html @@ -0,0 +1,66 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: grid auto-fit, min- max- size interactions</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="contain-intrinsic-size-026-ref.html"> +<meta name="assert" content="auto-fit columns, with intrinsic-size interacting with min- and max- width"> + +<style> +.grid { + display: inline-grid; + border: 1px solid black; + grid-template-columns: repeat(auto-fit, 100px); + height: 40px; +} +.one { + contain-intrinsic-size: 100px; + contain: size; + min-width: 200px; +} +.two { + contain-intrinsic-size: 200px; + contain: size; + min-width: 100px; +} +.three { + contain-intrinsic-size: 100px; + contain: size; + min-width: 200px; + max-width: 150px; +} +.four { + contain-intrinsic-size: 200px; + contain: size; + min-width: 100px; + max-width: 150px; +} +.item { + background: green; + height: 100%; +} +</style> + +<p>min-width larger than contain-intrinsic-width: +<div class="grid one"> + <div class="item">one</div> + <div class="item">two</div> +</div> + +<p>min-width smaller than contain-intrinsic-width: +<div class="grid two"> + <div class="item">one</div> + <div class="item">two</div> +</div> + +<p>max-width ignored since min-width is larger: +<div class="grid three"> + <div class="item">one</div> + <div class="item">two</div> +</div> + +<p>min-width shrinks grid since it overrides contain-intrinsic-width: +<div class="grid four"> + <div class="item">one</div> + <div class="item">two</div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-027.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-027.html new file mode 100644 index 0000000000..61581e893f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-027.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: aspect-ratio interaction</title> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5241"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="contain-intrinsic-size doesn't establish an aspect-ratio"> + +<p>Test passes if there is a filled green square.</p> + +<!-- Use flex because a bug in blink's layout_replaced size computation makes + this test pass even when blink makes c-i-s establish an aspect ratio. Flex + doesn't use layout_replaced sizing, so it bypasses the bug. --> +<!-- min-width: 0 is just so we don't have to think about it. --> +<div style="display: flex;"> + <img src="/css/support/60x60-green.png" style="min-width: 0px; contain: size; contain-intrinsic-size: 50px 100px; width: 100px;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-028.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-028.html new file mode 100644 index 0000000000..15e8e0e891 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-028.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: single axis size containment</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size"> +<style> +.test { + contain: inline-size; + display: inline-block; + background: green; +} +.test::before { + content: ''; + display: block; + width: 40px; + height: 20px; +} +.cis-none { + contain-intrinsic-size: none none; +} +.cis-height { + contain-intrinsic-size: none 50px; +} +.cis-width { + contain-intrinsic-size: 100px none; +} +.cis-both { + contain-intrinsic-size: 100px 50px; +} +.vertical { + writing-mode: vertical-lr; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.test')"> + <div id="log"></div> + + <div class="test cis-none" + data-expected-client-width="0" data-expected-client-height="20"></div> + <div class="test cis-height" + data-expected-client-width="0" data-expected-client-height="20"></div> + <div class="test cis-width" + data-expected-client-width="100" data-expected-client-height="20"></div> + <div class="test cis-both" + data-expected-client-width="100" data-expected-client-height="20"></div> + + <div class="test cis-none vertical" + data-expected-client-width="40" data-expected-client-height="0"></div> + <div class="test cis-height vertical" + data-expected-client-width="40" data-expected-client-height="50"></div> + <div class="test cis-width vertical" + data-expected-client-width="40" data-expected-client-height="0"></div> + <div class="test cis-both vertical" + data-expected-client-width="40" data-expected-client-height="50"></div> + + <hr> + + <img class="test cis-none" src="/css/support/60x60-green.png" + data-expected-client-width="0" data-expected-client-height="60"> + <img class="test cis-height" src="/css/support/60x60-green.png" + data-expected-client-width="0" data-expected-client-height="60"> + <img class="test cis-width" src="/css/support/60x60-green.png" + data-expected-client-width="100" data-expected-client-height="60"> + <img class="test cis-both" src="/css/support/60x60-green.png" + data-expected-client-width="100" data-expected-client-height="60"> + + <img class="test cis-none vertical" src="/css/support/60x60-green.png" + data-expected-client-width="60" data-expected-client-height="0"> + <img class="test cis-height vertical" src="/css/support/60x60-green.png" + data-expected-client-width="60" data-expected-client-height="50"> + <img class="test cis-width vertical" src="/css/support/60x60-green.png" + data-expected-client-width="60" data-expected-client-height="0"> + <img class="test cis-both vertical" src="/css/support/60x60-green.png" + data-expected-client-width="60" data-expected-client-height="50"> + + <hr> + + <svg class="test cis-none" + data-expected-client-width="0" data-expected-client-height="150"></svg> + <svg class="test cis-height" + data-expected-client-width="0" data-expected-client-height="150"></svg> + <svg class="test cis-width" + data-expected-client-width="100" data-expected-client-height="150"></svg> + <svg class="test cis-both" + data-expected-client-width="100" data-expected-client-height="150"></svg> + + <svg class="test cis-none vertical" + data-expected-client-width="300" data-expected-client-height="0"></svg> + <svg class="test cis-height vertical" + data-expected-client-width="300" data-expected-client-height="50"></svg> + <svg class="test cis-width vertical" + data-expected-client-width="300" data-expected-client-height="0"></svg> + <svg class="test cis-both vertical" + data-expected-client-width="300" data-expected-client-height="50"></svg> + + <hr> + + <canvas class="test cis-none" width="40" height="20" + data-expected-client-width="0" data-expected-client-height="20"></canvas> + <canvas class="test cis-height" width="40" height="20" + data-expected-client-width="0" data-expected-client-height="20"></canvas> + <canvas class="test cis-width" width="40" height="20" + data-expected-client-width="100" data-expected-client-height="20"></canvas> + <canvas class="test cis-both" width="40" height="20" + data-expected-client-width="100" data-expected-client-height="20"></canvas> + + <canvas class="test cis-none vertical" width="40" height="20" + data-expected-client-width="40" data-expected-client-height="0"></canvas> + <canvas class="test cis-height vertical" width="40" height="20" + data-expected-client-width="40" data-expected-client-height="50"></canvas> + <canvas class="test cis-width vertical" width="40" height="20" + data-expected-client-width="40" data-expected-client-height="0"></canvas> + <canvas class="test cis-both vertical" width="40" height="20" + data-expected-client-width="40" data-expected-client-height="50"></canvas> + + <hr> + + <iframe class="test cis-none" + data-expected-client-width="0" data-expected-client-height="150"></iframe> + <iframe class="test cis-height" + data-expected-client-width="0" data-expected-client-height="150"></iframe> + <iframe class="test cis-width" + data-expected-client-width="100" data-expected-client-height="150"></iframe> + <iframe class="test cis-both" + data-expected-client-width="100" data-expected-client-height="150"></iframe> + + <iframe class="test cis-none vertical" + data-expected-client-width="300" data-expected-client-height="0"></iframe> + <iframe class="test cis-height vertical" + data-expected-client-width="300" data-expected-client-height="50"></iframe> + <iframe class="test cis-width vertical" + data-expected-client-width="300" data-expected-client-height="0"></iframe> + <iframe class="test cis-both vertical" + data-expected-client-width="300" data-expected-client-height="50"></iframe> + + <hr> + + <video class="test cis-none" + data-expected-client-width="0" data-expected-client-height="150"></video> + <video class="test cis-height" + data-expected-client-width="0" data-expected-client-height="150"></video> + <video class="test cis-width" + data-expected-client-width="100" data-expected-client-height="150"></video> + <video class="test cis-both" + data-expected-client-width="100" data-expected-client-height="150"></video> + + <video class="test cis-none vertical" + data-expected-client-width="300" data-expected-client-height="0"></video> + <video class="test cis-height vertical" + data-expected-client-width="300" data-expected-client-height="50"></video> + <video class="test cis-width vertical" + data-expected-client-width="300" data-expected-client-height="0"></video> + <video class="test cis-both vertical" + data-expected-client-width="300" data-expected-client-height="50"></video> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-029.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-029.html new file mode 100644 index 0000000000..6169a1a287 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-029.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: button</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size"> +<style> +.test { + contain: size; + padding: 0; + border: 5px solid; +} +.test::before { + content: ''; + display: block; + width: 40px; + height: 20px; +} +.cis-none { + contain-intrinsic-size: none none; +} +.cis-height { + contain-intrinsic-size: none 50px; +} +.cis-width { + contain-intrinsic-size: 100px none; +} +.cis-both { + contain-intrinsic-size: 100px 50px; +} +.min-size { + min-width: 30px; + min-height: 15px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.test')"> + <div id="log"></div> + + <button class="test cis-none" + data-expected-client-width="0" data-expected-client-height="0"></button> + <button class="test cis-height" + data-expected-client-width="0" data-expected-client-height="50"></button> + <button class="test cis-width" + data-expected-client-width="100" data-expected-client-height="0"></button> + <button class="test cis-both" + data-expected-client-width="100" data-expected-client-height="50"></button> + + <button class="test cis-none min-size" + data-expected-client-width="20" data-expected-client-height="5"></button> + <button class="test cis-height min-size" + data-expected-client-width="20" data-expected-client-height="50"></button> + <button class="test cis-width min-size" + data-expected-client-width="100" data-expected-client-height="5"></button> + <button class="test cis-both min-size" + data-expected-client-width="100" data-expected-client-height="50"></button> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-030.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-030.html new file mode 100644 index 0000000000..8acfabbf61 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-030.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: scroll containers</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scroll-container"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<style> +.test { + contain: size; + display: inline-block; + padding: 0; + border: 5px solid; +} +.test::before { + content: ''; + display: block; + width: 40px; + height: 20px; +} +.big-contents::before { + width: 400px; + height: 200px; +} +.overflow-auto { + overflow: auto; + scrollbar-gutter: stable; +} +.overflow-scroll { + overflow: scroll; +} +.overflow-hidden { + overflow: hidden; +} +.cis-none { + contain-intrinsic-size: none none; +} +.cis-height { + contain-intrinsic-size: none 50px; +} +.cis-width { + contain-intrinsic-size: 100px none; +} +.cis-both { + contain-intrinsic-size: 100px 50px; +} +</style> + +<div id="log"></div> + +<div class="test small-contents overflow-auto cis-none" + data-expected-client-width="0" data-expected-client-height="0" + data-expected-scroll-width="40" data-expected-scroll-height="20"></div> +<div class="test small-contents overflow-auto cis-height" + data-expected-client-width="0" data-expected-client-height="50" + data-expected-scroll-width="40" data-expected-scroll-height="50"></div> +<div class="test small-contents overflow-auto cis-width" + data-expected-client-width="100" data-expected-client-height="0" + data-expected-scroll-width="100" data-expected-scroll-height="20"></div> +<div class="test small-contents overflow-auto cis-both" + data-expected-client-width="100" data-expected-client-height="50" + data-expected-scroll-width="100" data-expected-scroll-height="50"></div> + +<div class="test small-contents overflow-scroll cis-none" + data-expected-client-width="0" data-expected-client-height="0" + data-expected-scroll-width="40" data-expected-scroll-height="20"></div> +<div class="test small-contents overflow-scroll cis-height" + data-expected-client-width="0" data-expected-client-height="50" + data-expected-scroll-width="40" data-expected-scroll-height="50"></div> +<div class="test small-contents overflow-scroll cis-width" + data-expected-client-width="100" data-expected-client-height="0" + data-expected-scroll-width="100" data-expected-scroll-height="20"></div> +<div class="test small-contents overflow-scroll cis-both" + data-expected-client-width="100" data-expected-client-height="50" + data-expected-scroll-width="100" data-expected-scroll-height="50"></div> + +<div class="test small-contents overflow-hidden cis-none" + data-expected-client-width="0" data-expected-client-height="0" + data-expected-scroll-width="40" data-expected-scroll-height="20"></div> +<div class="test small-contents overflow-hidden cis-height" + data-expected-client-width="0" data-expected-client-height="50" + data-expected-scroll-width="40" data-expected-scroll-height="50"></div> +<div class="test small-contents overflow-hidden cis-width" + data-expected-client-width="100" data-expected-client-height="0" + data-expected-scroll-width="100" data-expected-scroll-height="20"></div> +<div class="test small-contents overflow-hidden cis-both" + data-expected-client-width="100" data-expected-client-height="50" + data-expected-scroll-width="100" data-expected-scroll-height="50"></div> + + +<div class="test big-contents overflow-auto cis-none" + data-expected-client-width="0" data-expected-client-height="0" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-auto cis-height" + data-expected-client-width="0" data-expected-client-height="50" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-auto cis-width" + data-expected-client-width="100" data-expected-client-height="0" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-auto cis-both" + data-expected-client-width="100" data-expected-client-height="50" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> + +<div class="test big-contents overflow-scroll cis-none" + data-expected-client-width="0" data-expected-client-height="0" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-scroll cis-height" + data-expected-client-width="0" data-expected-client-height="50" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-scroll cis-width" + data-expected-client-width="100" data-expected-client-height="0" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-scroll cis-both" + data-expected-client-width="100" data-expected-client-height="50" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> + +<div class="test big-contents overflow-hidden cis-none" + data-expected-client-width="0" data-expected-client-height="0" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-hidden cis-height" + data-expected-client-width="0" data-expected-client-height="50" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-hidden cis-width" + data-expected-client-width="100" data-expected-client-height="0" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> +<div class="test big-contents overflow-hidden cis-both" + data-expected-client-width="100" data-expected-client-height="50" + data-expected-scroll-width="400" data-expected-scroll-height="200"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +checkLayout(".test"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-031.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-031.html new file mode 100644 index 0000000000..981ddc693b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-031.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: multi-column containers</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#the-multi-column-model"> +<style> +.test { + contain: size; + display: inline-block; + padding: 0; + border: 5px solid; + column-gap: 5px; +} +.columns-60px-1 { + columns: 60px 1; +} +.columns-120px-1 { + columns: 120px 1; +} +.columns-60px-2 { + columns: 60px 2; +} +.cis-none { + contain-intrinsic-size: none none; +} +.cis-height { + contain-intrinsic-size: none 50px; +} +.cis-width { + contain-intrinsic-size: 100px none; +} +.cis-both { + contain-intrinsic-size: 100px 50px; +} +</style> + +<div id="log"></div> + +<div class="test columns-60px-1 cis-none" + data-expected-client-width="60" data-expected-client-height="0"></div> +<div class="test columns-60px-1 cis-height" + data-expected-client-width="60" data-expected-client-height="50"></div> +<div class="test columns-60px-1 cis-width" + data-expected-client-width="100" data-expected-client-height="0"></div> +<div class="test columns-60px-1 cis-both" + data-expected-client-width="100" data-expected-client-height="50"></div> + +<div class="test columns-120px-1 cis-none" + data-expected-client-width="120" data-expected-client-height="0"></div> +<div class="test columns-120px-1 cis-height" + data-expected-client-width="120" data-expected-client-height="50"></div> +<div class="test columns-120px-1 cis-width" + data-expected-client-width="100" data-expected-client-height="0"></div> +<div class="test columns-120px-1 cis-both" + data-expected-client-width="100" data-expected-client-height="50"></div> + +<div class="test columns-60px-2 cis-none" + data-expected-client-width="125" data-expected-client-height="0"></div> +<div class="test columns-60px-2 cis-height" + data-expected-client-width="125" data-expected-client-height="50"></div> +<div class="test columns-60px-2 cis-width" + data-expected-client-width="100" data-expected-client-height="0"></div> +<div class="test columns-60px-2 cis-both" + data-expected-client-width="100" data-expected-client-height="50"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +checkLayout(".test"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-032.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-032.html new file mode 100644 index 0000000000..6dfb73aa4f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-032.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS contain-intrinsic-size: single-select list box</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#list-box"> +<style> +.ciw-0 { + contain-intrinsic-width: 0px; +} +.ciw-100 { + contain-intrinsic-width: 100px; +} +.cih-0 { + contain-intrinsic-height: 0px; +} +.cih-100 { + contain-intrinsic-height: 100px; +} +select { + padding: 0; + border: solid; + margin: 5px; +} +.test { + contain: size; +} +</style> + +<!-- To measure the size of an empty <select> without size containment --> +<select id="reference"></select> + +<select class="test ciw-none cih-none" + data-expected-client-width="default" data-expected-client-height="default"></select> +<select class="test ciw-none cih-0" + data-expected-client-width="default" data-expected-client-height="0"></select> +<select class="test ciw-none cih-100" + data-expected-client-width="default" data-expected-client-height="100"></select> + +<select class="test ciw-0 cih-none" + data-expected-client-width="0" data-expected-client-height="default"></select> +<select class="test ciw-0 cih-0" + data-expected-client-width="0" data-expected-client-height="0"></select> +<select class="test ciw-0 cih-100" + data-expected-client-width="0" data-expected-client-height="100"></select> + +<select class="test ciw-100 cih-none" + data-expected-client-width="100" data-expected-client-height="default"></select> +<select class="test ciw-100 cih-0" + data-expected-client-width="100" data-expected-client-height="0"></select> +<select class="test ciw-100 cih-100" + data-expected-client-width="100" data-expected-client-height="100"></select> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +const reference = document.getElementById("reference"); +const normalWidth = reference.clientWidth; +const normalHeight = reference.clientHeight; +for (let test of document.querySelectorAll(".ciw-none")) { + test.dataset.expectedClientWidth = normalWidth; +} +for (let test of document.querySelectorAll(".cih-none")) { + test.dataset.expectedClientHeight = normalHeight; +} +checkLayout('.test'); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-033.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-033.html new file mode 100644 index 0000000000..68192a8379 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-033.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CIS + content-visibility:hidden and contain:size</title> +<link rel="help" href="https://w3c.github.io/csswg-drafts/css-sizing-4/#explicit-intrinsic-inner-size"> +<link rel="help" href="https://w3c.github.io/csswg-drafts/css-contain-2/#size-containment"> +<link rel="help" href="https://w3c.github.io/csswg-drafts/css-contain-2/#using-cv-hidden"> +<meta name="assert" + content="Tests that CIS + content-visibility:hidden should be same to CIS + contain:size" /> + +<style> + .test { + width: max-content; + height: max-content; + border: 1px solid; + } + + .test::before { + content: ""; + display: block; + width: 320px; + height: 240px; + } + + .contain-size { + contain: size; + } + + .ci-width { + contain-intrinsic-width: 10px; + } + + .ci-height { + contain-intrinsic-height: 20px; + } + + .ci-both { + contain-intrinsic-size: 10px 20px; + } + + .skip-contents .test { + content-visibility: hidden; + } + +</style> + +<div id="log"></div> + +<div id="tests"> + + <div></div> + <div class="scroll"></div> + <div class="columns"></div> + <div class="grid"></div> + <div class="flex"></div> + <fieldset></fieldset> + <img src="resources/dice.png"> + <svg></svg> + <canvas></canvas> + <iframe></iframe> + <video></video> + <button></button> + <select> + <option>Lorem ipsum</option> + </select> + <select multiple> + <option>Lorem ipsum</option> + </select> + +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +addEventListener("load", async function() { + const wrapper = document.getElementById("tests"); + const tests = new DocumentFragment(); + for (let template of wrapper.children) { + template.classList.add("test"); + + const containIntrinsicWidthTest = template.cloneNode(true); + const containIntrinsicHeightTest = template.cloneNode(true); + const containIntrinsicSizeTest = template.cloneNode(true); + containIntrinsicWidthTest.classList.add("ci-width"); + containIntrinsicHeightTest.classList.add("ci-height"); + containIntrinsicSizeTest.classList.add("ci-both"); + + template.classList.add("contain-size"); + const containSizeWidth = template.clientWidth; + const containSizeHeight = template.clientHeight; + template.classList.add("ci-both"); + const CISWidth = template.clientWidth;; + const CISHeight = template.clientHeight; + + containIntrinsicWidthTest.dataset.expectedClientWidth = CISWidth; + containIntrinsicWidthTest.dataset.expectedClientHeight = containSizeHeight; + containIntrinsicHeightTest.dataset.expectedClientWidth = containSizeWidth; + containIntrinsicHeightTest.dataset.expectedClientHeight = CISHeight; + containIntrinsicSizeTest.dataset.expectedClientWidth = CISWidth; + containIntrinsicSizeTest.dataset.expectedClientHeight = CISHeight; + + tests.append(containIntrinsicWidthTest, containIntrinsicHeightTest, containIntrinsicSizeTest); + } + wrapper.textContent = ""; + wrapper.appendChild(tests); + + wrapper.classList.add("skip-contents"); + checkLayout(".test"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-001.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-001.html new file mode 100644 index 0000000000..9a84bff491 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-001.html @@ -0,0 +1,11 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: Logical versions</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> + +<p>Test passes if there is a filled green square.</p> + +<div style="contain: size; contain-intrinsic-inline-size: 100px; contain-intrinsic-block-size: 50px; background: green; display: inline-block; vertical-align: bottom"></div> +<div style="width: 100px; height: 50px; background: green;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-002.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-002.html new file mode 100644 index 0000000000..b5b9748f81 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-002.html @@ -0,0 +1,11 @@ +<!doctype html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: Logical versions</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> + +<p>Test passes if there is a filled green square.</p> + +<div style="contain: size; contain-intrinsic-inline-size: 50px; contain-intrinsic-block-size: 100px; background: green; writing-mode: vertical-lr;"></div> +<div style="width: 100px; height: 50px; background: green;"></div> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-003.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-003.html new file mode 100644 index 0000000000..48fedb1148 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-003.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<meta charset="utf8"> +<title>CSS contain-intrinsic-size: Logical versions</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size"> +<style> +.test { + contain: size; + display: inline-block; + background: green; +} +.test::before { + content: ''; + display: block; + width: 40px; + height: 20px; +} +.cis-none { + contain-intrinsic-inline-size: none; + contain-intrinsic-block-size: none; +} +.cis-block { + contain-intrinsic-inline-size: none; + contain-intrinsic-block-size: 50px; +} +.cis-inline { + contain-intrinsic-inline-size: 100px; + contain-intrinsic-block-size: none; +} +.cis-both { + contain-intrinsic-inline-size: 100px; + contain-intrinsic-block-size: 50px; +} +.vertical { + writing-mode: vertical-lr; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.test')"> + <div id="log"></div> + + <div class="test cis-none" + data-expected-client-width="0" data-expected-client-height="0"></div> + <div class="test cis-block" + data-expected-client-width="0" data-expected-client-height="50"></div> + <div class="test cis-inline" + data-expected-client-width="100" data-expected-client-height="0"></div> + <div class="test cis-both" + data-expected-client-width="100" data-expected-client-height="50"></div> + + <div class="test cis-none vertical" + data-expected-client-height="0" data-expected-client-width="0"></div> + <div class="test cis-block vertical" + data-expected-client-height="0" data-expected-client-width="50"></div> + <div class="test cis-inline vertical" + data-expected-client-height="100" data-expected-client-width="0"></div> + <div class="test cis-both vertical" + data-expected-client-height="100" data-expected-client-width="50"></div> + + <hr> + + <img class="test cis-none" src="/css/support/60x60-green.png" + data-expected-client-width="0" data-expected-client-height="0"> + <img class="test cis-block" src="/css/support/60x60-green.png" + data-expected-client-width="0" data-expected-client-height="50"> + <img class="test cis-inline" src="/css/support/60x60-green.png" + data-expected-client-width="100" data-expected-client-height="0"> + <img class="test cis-both" src="/css/support/60x60-green.png" + data-expected-client-width="100" data-expected-client-height="50"> + + <img class="test cis-none vertical" src="/css/support/60x60-green.png" + data-expected-client-height="0" data-expected-client-width="0"> + <img class="test cis-block vertical" src="/css/support/60x60-green.png" + data-expected-client-height="0" data-expected-client-width="50"> + <img class="test cis-inline vertical" src="/css/support/60x60-green.png" + data-expected-client-height="100" data-expected-client-width="0"> + <img class="test cis-both vertical" src="/css/support/60x60-green.png" + data-expected-client-height="100" data-expected-client-width="50"> + + <hr> + + <svg class="test cis-none" + data-expected-client-width="0" data-expected-client-height="0"></svg> + <svg class="test cis-block" + data-expected-client-width="0" data-expected-client-height="50"></svg> + <svg class="test cis-inline" + data-expected-client-width="100" data-expected-client-height="0"></svg> + <svg class="test cis-both" + data-expected-client-width="100" data-expected-client-height="50"></svg> + + <svg class="test cis-none vertical" + data-expected-client-height="0" data-expected-client-width="0"></svg> + <svg class="test cis-block vertical" + data-expected-client-height="0" data-expected-client-width="50"></svg> + <svg class="test cis-inline vertical" + data-expected-client-height="100" data-expected-client-width="0"></svg> + <svg class="test cis-both vertical" + data-expected-client-height="100" data-expected-client-width="50"></svg> + + <hr> + + <canvas class="test cis-none" width="40" height="20" + data-expected-client-width="0" data-expected-client-height="0"></canvas> + <canvas class="test cis-block" width="40" height="20" + data-expected-client-width="0" data-expected-client-height="50"></canvas> + <canvas class="test cis-inline" width="40" height="20" + data-expected-client-width="100" data-expected-client-height="0"></canvas> + <canvas class="test cis-both" width="40" height="20" + data-expected-client-width="100" data-expected-client-height="50"></canvas> + + <canvas class="test cis-none vertical" width="40" height="20" + data-expected-client-height="0" data-expected-client-width="0"></canvas> + <canvas class="test cis-block vertical" width="40" height="20" + data-expected-client-height="0" data-expected-client-width="50"></canvas> + <canvas class="test cis-inline vertical" width="40" height="20" + data-expected-client-height="100" data-expected-client-width="0"></canvas> + <canvas class="test cis-both vertical" width="40" height="20" + data-expected-client-height="100" data-expected-client-width="50"></canvas> + + <hr> + + <iframe class="test cis-none" + data-expected-client-width="0" data-expected-client-height="0"></iframe> + <iframe class="test cis-block" + data-expected-client-width="0" data-expected-client-height="50"></iframe> + <iframe class="test cis-inline" + data-expected-client-width="100" data-expected-client-height="0"></iframe> + <iframe class="test cis-both" + data-expected-client-width="100" data-expected-client-height="50"></iframe> + + <iframe class="test cis-none vertical" + data-expected-client-height="0" data-expected-client-width="0"></iframe> + <iframe class="test cis-block vertical" + data-expected-client-height="0" data-expected-client-width="50"></iframe> + <iframe class="test cis-inline vertical" + data-expected-client-height="100" data-expected-client-width="0"></iframe> + <iframe class="test cis-both vertical" + data-expected-client-height="100" data-expected-client-width="50"></iframe> + + <hr> + + <video class="test cis-none" + data-expected-client-width="0" data-expected-client-height="0"></video> + <video class="test cis-block" + data-expected-client-width="0" data-expected-client-height="50"></video> + <video class="test cis-inline" + data-expected-client-width="100" data-expected-client-height="0"></video> + <video class="test cis-both" + data-expected-client-width="100" data-expected-client-height="50"></video> + + <video class="test cis-none vertical" + data-expected-client-height="0" data-expected-client-width="0"></video> + <video class="test cis-block vertical" + data-expected-client-height="0" data-expected-client-width="50"></video> + <video class="test cis-inline vertical" + data-expected-client-height="100" data-expected-client-width="0"></video> + <video class="test cis-both vertical" + data-expected-client-height="100" data-expected-client-width="50"></video> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-computed.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-computed.html new file mode 100644 index 0000000000..c03b282699 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-computed.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Intrinsic Size Test: intrinsic-size with computed values</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<meta name="assert" content="contain-intrinsic-size supports the full grammar '[none | <length>]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id=target></div> +<div id=scratch></div> +<script> + +function length_ref(length) { + document.getElementById("scratch").style.width = length; + return getComputedStyle(document.getElementById("scratch")).getPropertyValue("width"); +} + +test_computed_value("contain-intrinsic-size", "none"); +test_computed_value("contain-intrinsic-size", "1px"); +test_computed_value("contain-intrinsic-size", "auto 1px"); +test_computed_value("contain-intrinsic-size", "auto 1px auto 1px", "auto 1px"); +test_computed_value("contain-intrinsic-size", "1px auto 1px"); +test_computed_value("contain-intrinsic-size", "2vw 3px", length_ref("2vw") + " 3px"); +test_computed_value("contain-intrinsic-size", "2px 3vh", "2px " + length_ref("3vh")); +test_computed_value("contain-intrinsic-size", "5px 5px", "5px"); + +test_computed_value("contain-intrinsic-width", "none"); +test_computed_value("contain-intrinsic-width", "1px"); +test_computed_value("contain-intrinsic-width", "auto 1px"); +test_computed_value("contain-intrinsic-width", "2vw", length_ref("2vw")); +test_computed_value("contain-intrinsic-width", "3vh", length_ref("3vh")); + +test_computed_value("contain-intrinsic-height", "none"); +test_computed_value("contain-intrinsic-height", "1px"); +test_computed_value("contain-intrinsic-height", "auto 1px"); +test_computed_value("contain-intrinsic-height", "2vw", length_ref("2vw")); +test_computed_value("contain-intrinsic-height", "3vh", length_ref("3vh")); +</script> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-invalid.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-invalid.html new file mode 100644 index 0000000000..b63b6f3826 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-invalid.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Intrinsic Size Test: intrinsic-size with invalid values</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<meta name="assert" content="contain-intrinsic-size supports the full grammar 'none | [auto || <length> | <length>]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("contain-intrinsic-size", "legacy"); +test_invalid_value("contain-intrinsic-size", "auto legacy"); +test_invalid_value("contain-intrinsic-size", "auto legacy auto"); +test_invalid_value("contain-intrinsic-size", "10%"); +test_invalid_value("contain-intrinsic-size", "2em 3px 5px"); +test_invalid_value("contain-intrinsic-size", "1px 1%"); +test_invalid_value("contain-intrinsic-size", "1px auto auto"); +test_invalid_value("contain-intrinsic-size", "-1px"); +test_invalid_value("contain-intrinsic-size", "auto"); +test_invalid_value("contain-intrinsic-size", "auto 1px 1px auto"); +test_invalid_value("contain-intrinsic-size", "1px 1px auto"); + +test_invalid_value("contain-intrinsic-width", "legacy"); +test_invalid_value("contain-intrinsic-width", "-1px"); +test_invalid_value("contain-intrinsic-width", "1px 1px"); +test_invalid_value("contain-intrinsic-width", "1px none"); +test_invalid_value("contain-intrinsic-width", "auto 1px auto"); +test_invalid_value("contain-intrinsic-width", "20%"); +test_invalid_value("contain-intrinsic-width", "1px auto"); + +test_invalid_value("contain-intrinsic-height", "legacy"); +test_invalid_value("contain-intrinsic-height", "-1px"); +test_invalid_value("contain-intrinsic-height", "1px 1px"); +test_invalid_value("contain-intrinsic-height", "1px none"); +test_invalid_value("contain-intrinsic-height", "auto 1px auto"); +test_invalid_value("contain-intrinsic-height", "20%"); +test_invalid_value("contain-intrinsic-height", "1px auto"); + +test_invalid_value("contain-intrinsic-inline-size", "legacy"); +test_invalid_value("contain-intrinsic-inline-size", "-1px"); +test_invalid_value("contain-intrinsic-inline-size", "1px 1px"); +test_invalid_value("contain-intrinsic-inline-size", "1px none"); +test_invalid_value("contain-intrinsic-inline-size", "auto 1px auto"); +test_invalid_value("contain-intrinsic-inline-size", "20%"); +test_invalid_value("contain-intrinsic-inline-size", "1px auto"); + +test_invalid_value("contain-intrinsic-block-size", "legacy"); +test_invalid_value("contain-intrinsic-block-size", "-1px"); +test_invalid_value("contain-intrinsic-block-size", "1px 1px"); +test_invalid_value("contain-intrinsic-block-size", "1px none"); +test_invalid_value("contain-intrinsic-block-size", "auto 1px auto"); +test_invalid_value("contain-intrinsic-block-size", "20%"); +test_invalid_value("contain-intrinsic-block-size", "1px auto"); +test_invalid_value("contain-intrinsic-block-size", "auto none"); +</script> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-valid.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-valid.html new file mode 100644 index 0000000000..8fd7e64d06 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-valid.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Intrinsic Size Test: intrinsic-size with valid values</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> +<meta name="assert" content="contain-intrinsic-size supports the full grammar '[none | <length>]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("contain-intrinsic-size", "none"); +test_valid_value("contain-intrinsic-size", "1px"); +test_valid_value("contain-intrinsic-size", "2em 3px"); +test_valid_value("contain-intrinsic-size", "5px 5px", "5px"); +test_valid_value("contain-intrinsic-size", "none none", "none"); +test_valid_value("contain-intrinsic-size", "1px none"); +test_valid_value("contain-intrinsic-size", "none 1px"); +test_valid_value("contain-intrinsic-size", "auto 1px 1px"); +test_valid_value("contain-intrinsic-size", "1px auto 1px"); +test_valid_value("contain-intrinsic-size", "auto 1px auto 1px", "auto 1px"); + +test_valid_value("contain-intrinsic-width", "none"); +test_valid_value("contain-intrinsic-width", "1px"); +test_valid_value("contain-intrinsic-width", "2em"); +test_valid_value("contain-intrinsic-width", "auto 1px"); + +test_valid_value("contain-intrinsic-height", "none"); +test_valid_value("contain-intrinsic-height", "1px"); +test_valid_value("contain-intrinsic-height", "2em"); +test_valid_value("contain-intrinsic-height", "auto 1px"); + +test_valid_value("contain-intrinsic-inline-size", "none"); +test_valid_value("contain-intrinsic-inline-size", "1px"); +test_valid_value("contain-intrinsic-inline-size", "2em"); +test_valid_value("contain-intrinsic-inline-size", "auto 1px"); + +test_valid_value("contain-intrinsic-block-size", "none"); +test_valid_value("contain-intrinsic-block-size", "1px"); +test_valid_value("contain-intrinsic-block-size", "2em"); +test_valid_value("contain-intrinsic-block-size", "auto 1px"); +</script> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/resources/dice.png b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/resources/dice.png Binary files differnew file mode 100644 index 0000000000..c82d01517c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/resources/dice.png diff --git a/testing/web-platform/tests/css/css-sizing/div-auto-margin-bottom-ref.html b/testing/web-platform/tests/css/css-sizing/div-auto-margin-bottom-ref.html new file mode 100644 index 0000000000..a61439da55 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-auto-margin-bottom-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title> Ensure bottom takes effect after element is centered </title> +<style> + div { + inset: 0; + background-color: black; + margin: auto; + position: absolute; + block-size: 200px; + inline-size: 100px; + bottom: 10px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-auto-margin-ref.html b/testing/web-platform/tests/css/css-sizing/div-auto-margin-ref.html new file mode 100644 index 0000000000..1934dd81ed --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-auto-margin-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title> Ensure element is centered by auto margin </title> +<style> + div { + inset: 0; + background-color: black; + margin: auto; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-auto-margin-top-ref.html b/testing/web-platform/tests/css/css-sizing/div-auto-margin-top-ref.html new file mode 100644 index 0000000000..ba9a1bb3fa --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-auto-margin-top-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title> Ensure top takes effect after element is centered </title> +<style> + div { + inset: 0; + background-color: black; + margin: auto; + top: 10px; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-block-size-ref.html b/testing/web-platform/tests/css/css-sizing/div-block-size-ref.html new file mode 100644 index 0000000000..1a32dab499 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-block-size-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<title> Ensure block size is same as height of inner div </title> +<style> + div { + inset: 0; + background-color: black; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin-bottom.tentative.html b/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin-bottom.tentative.html new file mode 100644 index 0000000000..4c280fc07f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin-bottom.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure bottom takes effect after element is centered </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-bottom-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + bottom: 10px; + position: absolute; + block-size: fit-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin-top.tentative.html b/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin-top.tentative.html new file mode 100644 index 0000000000..9d324e080d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin-top.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure top takes effect after element is centered </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-top-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + top: 10px; + position: absolute; + block-size: fit-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin.tentative.html b/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin.tentative.html new file mode 100644 index 0000000000..210f83ea50 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-fit-content-auto-margin.tentative.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure element is centered by auto margin </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + position: absolute; + block-size: fit-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-fit-content-block-size.tentative.html b/testing/web-platform/tests/css/css-sizing/div-fit-content-block-size.tentative.html new file mode 100644 index 0000000000..d0619ddf0c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-fit-content-block-size.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title> Ensure block size is same as height of inner div </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-block-size-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + position: absolute; + block-size: fit-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin-left.tentative.html b/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin-left.tentative.html new file mode 100644 index 0000000000..6fcefd1fea --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin-left.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title> Ensure left takes effect after element is centered for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-left-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + left: 10px; + position: absolute; + block-size: fit-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin-right.tentative.html b/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin-right.tentative.html new file mode 100644 index 0000000000..593074f147 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin-right.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title> Ensure right takes effect after element is centered for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-right-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + right: 10px; + position: absolute; + block-size: fit-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin.tentative.html b/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin.tentative.html new file mode 100644 index 0000000000..52e4ea86e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-auto-margin.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure element is centered by auto margin for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + position: absolute; + block-size: fit-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-block-size.tentative.html b/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-block-size.tentative.html new file mode 100644 index 0000000000..b42e978f01 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-fit-content-orthogonal-block-size.tentative.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure block size is same as height of inner div for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-block-size-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + position: absolute; + block-size: fit-content; + inline-size: 100px; + writing-mode: vertical-rl; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin-bottom.tentative.html b/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin-bottom.tentative.html new file mode 100644 index 0000000000..d4927643ac --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin-bottom.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure bottom takes effect after element is centered </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-bottom-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + position: absolute; + block-size: max-content; + inline-size: 100px; + bottom: 10px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin-top.tentative.html b/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin-top.tentative.html new file mode 100644 index 0000000000..7ae3f72fea --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin-top.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure top takes effect after element is centered </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-top-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + top: 10px; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin.tentative.html b/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin.tentative.html new file mode 100644 index 0000000000..c1ec4bb074 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-max-content-auto-margin.tentative.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure element is centered by auto margin </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-max-content-block-size.tentative.html b/testing/web-platform/tests/css/css-sizing/div-max-content-block-size.tentative.html new file mode 100644 index 0000000000..8ce4377a0e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-max-content-block-size.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title> Ensure block size is same as height of inner div </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-block-size-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin-left.tentative.html b/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin-left.tentative.html new file mode 100644 index 0000000000..1e8bfaebe1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin-left.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title> Ensure left takes effect after element is centered for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-left-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + left: 10px; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin-right.tentative.html b/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin-right.tentative.html new file mode 100644 index 0000000000..4b63a3a796 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin-right.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title> Ensure right takes effect after element is centered for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-right-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + right: 10px; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin.tentative.html b/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin.tentative.html new file mode 100644 index 0000000000..9ad3a03e79 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-auto-margin.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure element is centered by auto margin for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-block-size.tentative.html b/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-block-size.tentative.html new file mode 100644 index 0000000000..28f10811b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-max-content-orthogonal-block-size.tentative.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure block size is same as height of inner div for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-block-size-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin-bottom.tentative.html b/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin-bottom.tentative.html new file mode 100644 index 0000000000..0c3635dcca --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin-bottom.tentative.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure bottom takes effect after element is centered </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-bottom-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; margin: auto; + bottom: 10px; + position: absolute; + block-size: min-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin-top.tentative.html b/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin-top.tentative.html new file mode 100644 index 0000000000..ab10578de0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin-top.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure top takes effect after element is centered </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-top-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + top: 10px; + position: absolute; + block-size: min-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin.tentative.html b/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin.tentative.html new file mode 100644 index 0000000000..9e51c1c771 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-min-content-auto-margin.tentative.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure element is centered by auto margin </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-auto-margin-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + position: absolute; + block-size: min-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-min-content-block-size.tentative.html b/testing/web-platform/tests/css/css-sizing/div-min-content-block-size.tentative.html new file mode 100644 index 0000000000..23c7c224dd --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-min-content-block-size.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title> Ensure block size is same as height of inner div </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-block-size-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + position: absolute; + block-size: min-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin-left.tentative.html b/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin-left.tentative.html new file mode 100644 index 0000000000..25d7a143c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin-left.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title> Ensure left takes effect after element is centered for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-left-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + left: 10px; + position: absolute; + block-size: min-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin-right.tentative.html b/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin-right.tentative.html new file mode 100644 index 0000000000..bf7e6a9c2a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin-right.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title> Ensure right takes effect after element is centered for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-right-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + right: 10px; + position: absolute; + block-size: min-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin.tentative.html b/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin.tentative.html new file mode 100644 index 0000000000..5d6035d7db --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-auto-margin.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure element is centered by auto margin for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-auto-margin-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + position: absolute; + block-size: min-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-block-size.tentative.html b/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-block-size.tentative.html new file mode 100644 index 0000000000..9f21894238 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-min-content-orthogonal-block-size.tentative.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure block size is same as height of inner div for orthogonal writing mode </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-block-size-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + position: absolute; + block-size: min-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-left-ref.html b/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-left-ref.html new file mode 100644 index 0000000000..0fcaf535d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-left-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure left takes effect after element is centered for orthogonal writing mode </title> +<style> + div { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + left: 10px; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-ref.html b/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-ref.html new file mode 100644 index 0000000000..5ed5b30a5d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title> Ensure element is centered by auto margin for orthogonal writing mode </title> +<style> + div { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-right-ref.html b/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-right-ref.html new file mode 100644 index 0000000000..3ef0f11a42 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-orthogonal-auto-margin-right-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<title> Ensure right takes effect after element is centered for orthogonal writing mode </title> +<style> + div { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + margin: auto; + right: 10px; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-orthogonal-block-size-ref.html b/testing/web-platform/tests/css/css-sizing/div-orthogonal-block-size-ref.html new file mode 100644 index 0000000000..bc5cdeb59d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-orthogonal-block-size-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title> Ensure block size is same as height of inner div for orthogonal writing mode </title> +<style> + div { + inset: 0; + background-color: black; + writing-mode: vertical-rl; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-orthogonal-left-and-non-auto-margin-ref.html b/testing/web-platform/tests/css/css-sizing/div-orthogonal-left-and-non-auto-margin-ref.html new file mode 100644 index 0000000000..77f5e22148 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-orthogonal-left-and-non-auto-margin-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<title> Ensure left doesn't take effect if margin isn't auto </title> +<style> + div { + inset: 0; + writing-mode: vertical-rl; + background-color: black; + margin: auto; + left: 10px; + margin-right: 10px; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-orthogonal-left-and-non-auto-margin.tentative.html b/testing/web-platform/tests/css/css-sizing/div-orthogonal-left-and-non-auto-margin.tentative.html new file mode 100644 index 0000000000..1342eb5c0b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-orthogonal-left-and-non-auto-margin.tentative.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title> Ensure left doesn't take effect if margin isn't auto </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-orthogonal-left-and-non-auto-margin-ref.html"> +<style> + #outer { + inset: 0; + writing-mode: vertical-rl; + background-color: black; + margin: auto; + left: 10px; + margin-right: 10px; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-top-and-non-auto-margin-ref.html b/testing/web-platform/tests/css/css-sizing/div-top-and-non-auto-margin-ref.html new file mode 100644 index 0000000000..42b985f3c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-top-and-non-auto-margin-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title> Ensure top doesn't take effect if margin isn't auto </title> +<style> + div { + inset: 0; + background-color: black; + margin: auto; + margin-bottom: 10px; + position: absolute; + block-size: 200px; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/div-top-and-non-auto-margin.tentative.html b/testing/web-platform/tests/css/css-sizing/div-top-and-non-auto-margin.tentative.html new file mode 100644 index 0000000000..326eb28171 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/div-top-and-non-auto-margin.tentative.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<title> Ensure top doesn't take effect if margin isn't auto </title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3973"> +<link rel="match" href="div-top-and-non-auto-margin-ref.html"> +<style> + #outer { + inset: 0; + background-color: black; + margin: auto; + top: 10px; + margin-bottom: 10px; + position: absolute; + block-size: max-content; + inline-size: 100px; + border: 5px solid red; + } +</style> +<div id="outer"><div style="block-size: 200px;"></div></div> diff --git a/testing/web-platform/tests/css/css-sizing/dynamic-available-size-iframe.html b/testing/web-platform/tests/css/css-sizing/dynamic-available-size-iframe.html new file mode 100644 index 0000000000..fc265d4d93 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/dynamic-available-size-iframe.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<meta name="assert" content="Checks that an absolute positioned element is positioned correctly, when the available size of its parent changes due to document resize." /> +<link rel="help" href="https://crbug.com/928672"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<script src="/common/reftest-wait.js"></script> +<p>Test passes if there is a filled green square.</p> +<iframe id="target" height="100" width="200" src="support/dynamic-available-size-iframe.html" style="border: none;"></iframe> +<script> +onload = () => { + requestAnimationFrame(() => requestAnimationFrame(() => { + target.width = '100'; + takeScreenshot(); + })); +}; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-001.html b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-001.html new file mode 100644 index 0000000000..bc6db56a58 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic change to the inline-size of a block container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1731653"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1307853"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the dynamic change to the block container's inline-size triggers the reflow of its children"> + +<style> +#block { + inline-size: 100px; + block-size: 100px; + font: 50px/1 Ahem; + color: green; + word-break: break-all; +} + +#block > div { + /* The following inline-size and padding will give the div a border-box + inline-size of 100px, both before and after this test's dynamic + modification. */ + box-sizing: border-box; + inline-size: 100px; + padding-right: calc(100px - 50%); + background: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="block"> + <div>XXXX</div> +</div> + +<script> +/* Make sure the layout is up-to-date, which is essential to trigger the bug. */ +document.documentElement.offsetHeight; + +/* Change the block's inline-size to trigger incremental reflow. */ +document.getElementById("block").style.inlineSize = "200px"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-002.html b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-002.html new file mode 100644 index 0000000000..4d0306205e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic change to the inline-size of a block container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1731653"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test verifies that the dynamic change to the block container's inline-size triggers the reflow of its children"> + +<style> +#block { + inline-size: 100px; + block-size: 100px; + font: 50px/1 Ahem; + color: green; + word-break: break-all; +} + +#block > div { + /* The following inline-size and padding will give the div a border-box + inline-size of 100px, both before and after this test's dynamic + modification. */ + inline-size: 50%; + padding-right: calc(100px - 50%); + background: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="block"> + <div>XXXX</div> +</div> + +<script> +/* Make sure the layout is up-to-date, which is essential to trigger the bug. */ +document.documentElement.offsetHeight; + +/* Change the block's inline-size to trigger incremental reflow. */ +document.getElementById("block").style.inlineSize = "200px"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-003-ref.html b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-003-ref.html new file mode 100644 index 0000000000..c8d67a8d27 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-003-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic change to the inline-size of body</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +body { + inline-size: 200px; +} + +.abs { + position: absolute; + background: green; + inline-size: 100px; + padding-top: 100px; +} +.layout { + font: 50px/1 Ahem; + color: red; + background-color: red; + width: 100px; + padding-top: 25%; /* This resolves against body's inline-size. */ +} +</style> + +<body> + <div class="abs"></div> + <div class="layout">XX</div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-003.html b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-003.html new file mode 100644 index 0000000000..7b2d465da4 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/dynamic-change-inline-size-003.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic change to the inline-size of body</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1731653"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1729122"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="dynamic-change-inline-size-003-ref.html"> +<meta name="assert" content="This test verifies that the dynamic change to body's inline-size triggers the reflow of its children."> + +<style> +.abs { + position: absolute; + background: green; + inline-size: 100px; + padding-top: 100px; +} +.layout { + font: 50px/1 Ahem; + color: red; + background-color: red; + width: 100px; + padding-top: 25%; /* This resolves against body's inline-size. */ +} +</style> + +<body> + <!-- Test passes if there is a filled green square and no red. --> + <div class="abs"></div> + <div class="layout">XX</div> +</body> + +<script> +/* Make sure the layout is up-to-date, which is essential to trigger the bug. */ +document.documentElement.offsetHeight; + +/* Change body's inline-size to trigger incremental reflow. */ +document.body.style.inlineSize = "200px"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-contribution-001.html b/testing/web-platform/tests/css/css-sizing/fit-content-contribution-001.html new file mode 100644 index 0000000000..efe3d49f4c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-contribution-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="help" + href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<meta name="assert" + content="max-width: fit-content works when there is no definite available size. Chrome 105 treated fit-content as min-content in this scenario."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + .word { + float: left; + width: 50px; + } + +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>. +</p> + +<div id="reference-overlapped-red"></div> + +<div style="width: 100px;"> + <div style="float: left; height: 100px; background: green;"> + <div style="max-width: fit-content;"> + <div class="word"></div> + <div class="word"></div> + <div class="word"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-001.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-001.html new file mode 100644 index 0000000000..b30c3cc819 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS fit-content(): <length-percentage> between min-content and max-content</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: fit-content(100px); height: 100px; background: green;"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-002.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-002.html new file mode 100644 index 0000000000..bea4868f2b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS fit-content(): <length-percentage> less than min-content</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: fit-content(50px); height: 100px; background: green;"> + <div style="display: inline-block; width: 100px;"></div> + <div style="display: inline-block; width: 100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-003.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-003.html new file mode 100644 index 0000000000..4148865560 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS fit-content(): <length-percentage> larger than max-content</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: fit-content(200px); height: 100px; background: green; font-size: 0;"> + <div style="display: inline-block; width: 50px;"></div> + <div style="display: inline-block; width: 50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-004.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-004.html new file mode 100644 index 0000000000..bf0ff5cb74 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS fit-content(): use percentage which is between min-content and max-content</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: 200px;"> + <div style="width: fit-content(50%); height: 100px; background: green;"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-005.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-005.html new file mode 100644 index 0000000000..fc29fef980 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS fit-content(): use percentage which is less than min-content</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: 200px;"> + <div style="width: fit-content(10%); height: 100px; background: green;"> + <div style="display: inline-block; width: 100px;"></div> + <div style="display: inline-block; width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-006.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-006.html new file mode 100644 index 0000000000..bd0b658982 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-006.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS fit-content(): use percentage which is larger than max-content</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: 200px;"> + <div style="width: fit-content(100%); height: 100px; background: green; font-size: 0;"> + <div style="display: inline-block; width: 50px;"></div> + <div style="display: inline-block; width: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-007.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-007.html new file mode 100644 index 0000000000..ae311da7b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-007.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS fit-content(): <length-percentage> for min-width</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: 10px; min-width: fit-content(100px); height: 100px; background: green;"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-008.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-008.html new file mode 100644 index 0000000000..d452621b5b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-008.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS fit-content(): use percentage for min-width</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: 200px;"> + <div style="width: 10px; min-width: fit-content(50%); height: 100px; background: green;"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-009.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-009.html new file mode 100644 index 0000000000..e77850cfff --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-009.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS fit-content(): <length-percentage> for max-width</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: 200px; max-width: fit-content(100px); height: 100px; background: green;"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-010.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-010.html new file mode 100644 index 0000000000..e924a885b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-010.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS fit-content(): use percentage for max-width</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div style="width: 200px;"> + <div style="width: 200px; max-width: fit-content(50%); height: 100px; background: green;"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-011.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-011.html new file mode 100644 index 0000000000..67eac6dca1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-011.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS fit-content(): min-content contribution</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="width: min-content; height: 50px; background: green;"> + <div style="width: fit-content(100px);"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> + +<!-- Cyclic percentage intrinsic size contribution, we treat width as the + initial value (i.e. auto) for min content contribution --> +<div style="width: min-content; height: 50px; background: green;"> + <div style="width: fit-content(50%);"> + <div style="display: inline-block; width: 100px;"></div> + <div style="display: inline-block; width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-012.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-012.html new file mode 100644 index 0000000000..40d898a55a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-012.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>CSS fit-content(): min-content contribution for min-size</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="width: min-content; height: 50px; background: green;"> + <div style="width: 50px; min-width: fit-content(100px);"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> + +<!-- Cyclic percentage intrinsic size contribution, we treat min-width as 0 + for min content contribution. However, fit-content() should be clamped by + min-content size and max-content size, so the result min-width is equal to + min-content size here --> +<div style="width: min-content; height: 50px; background: green;"> + <div style="width: 50px; min-width: fit-content(50%);"> + <div style="display: inline-block; width: 100px;"></div> + <div style="display: inline-block; width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-013.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-013.html new file mode 100644 index 0000000000..3af60e8715 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-013.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>CSS fit-content(): min-content contribution for max-size</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="width: min-content; height: 50px; background: green;"> + <div style="width: 200px; max-width: fit-content(100px);"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> + +<!-- Cyclic percentage intrinsic size contribution, we treat max-width as the + initial value for min content contribution. The initial value is None and + fit-content() should be clamped by min-content size and max-content size, so + the result max-width is equal to max-content size here --> +<div style="width: min-content; height: 50px; background: green;"> + <div style="width: 200px; max-width: fit-content(50%); font-size: 0;"> + <div style="display: inline-block; width: 50px;"></div> + <div style="display: inline-block; width: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-014.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-014.html new file mode 100644 index 0000000000..641abae487 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-014.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS fit-content(): max-content contribution</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="width: max-content; height: 50px; background: green;"> + <div style="width: fit-content(100px);"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> + +<!-- Cyclic percentage intrinsic size contribution, we treat width as the + initial value (i.e. auto) for max content contribution --> +<div style="width: max-content; height: 50px; background: green;"> + <div style="width: fit-content(50%); font-size: 0;"> + <div style="display: inline-block; width: 50px;"></div> + <div style="display: inline-block; width: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-015.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-015.html new file mode 100644 index 0000000000..aaf29b9dd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-015.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>CSS fit-content(): max-content contribution for min-size</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="width: max-content; height: 50px; background: green;"> + <div style="width: 50px; min-width: fit-content(100px);"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> + +<!-- Cyclic percentage intrinsic size contribution, we treat min-width as 0 + for max content contribution. However, fit-content() should be clamped by + min-content size and max-content size, so the result min-width is equal to + min-content size here --> +<div style="width: max-content; height: 50px; background: green;"> + <div style="width: 50px; min-width: fit-content(50%);"> + <div style="display: inline-block; width: 100px;"></div> + <div style="display: inline-block; width: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-016.html b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-016.html new file mode 100644 index 0000000000..bef5a62f1f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-length-percentage-016.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>CSS fit-content(): max-content contribution for max-size</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> + +<div style="width: max-content; height: 50px; background: green;"> + <div style="width: 200px; max-width: fit-content(100px);"> + <div style="display: inline-block; width: 60px;"></div> + <div style="display: inline-block; width: 60px;"></div> + </div> +</div> + +<!-- Cyclic percentage intrinsic size contribution, we treat max-width as the + initial value for max content contribution. The initial value is None and + fit-content() should be clamped by min-content size and max-content size, so + the result max-width is equal to max-content size here --> +<div style="width: max-content; height: 50px; background: green;"> + <div style="width: 200px; max-width: fit-content(50%); font-size: 0;"> + <div style="display: inline-block; width: 50px;"></div> + <div style="display: inline-block; width: 50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/fit-content-percentage-padding.html b/testing/web-platform/tests/css/css-sizing/fit-content-percentage-padding.html new file mode 100644 index 0000000000..4ff3f786c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/fit-content-percentage-padding.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#propdef-padding-left"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-fit-content-length-percentage"> +<meta name="assert" content="The shrink-to-fit container (#stf) should be just wide enough to fit both floats beside each other. The percentage padding shouldn't be affected by intrinsic sizing; it's simply resolved from its containing block (#container), which doesn't participate in the intrinsic size calculation at all."> +<div id="container" style="width:400px; height:200px;"> + <div id="stf" style="width:fit-content; padding-left:20%;"> + <div style="float:left; width:50px; height:100px; background:cyan;"></div> + <div style="float:left; width:50px; height:100px; background:hotpink;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + var container = document.getElementById("container"); + var stf = document.getElementById("stf"); + test(()=> { + assert_equals(stf.offsetWidth, 180); + }, "Initial layout"); + + test(()=> { + container.style.width = "300px"; + assert_equals(stf.offsetWidth, 160); + }, "Shrink width"); + + test(()=> { + container.style.width = "500px"; + assert_equals(stf.offsetWidth, 200); + }, "Grow width"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/frameset-intrinsic-crash.html b/testing/web-platform/tests/css/css-sizing/frameset-intrinsic-crash.html new file mode 100644 index 0000000000..ab9c43ee44 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/frameset-intrinsic-crash.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1064432"> +<div id=target style="float: left;"></div> +<script> +document.getElementById('target').appendChild(document.createElement('frameset')); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html new file mode 100644 index 0000000000..263a0869ae --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Referece Case: Different values of block sizing properties in horizontal wm + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <meta name="flags" content="ahem"> + <style> + html, body { + margin: 0; + } + + .container { + width: 120px; + height: 200px; + border: 2px solid blue; + display: inline-block; + vertical-align: top; + } + + .container > * { + border: 2px solid lime; + padding: inherit; + display: inline-block; + + font-family: Ahem; + font-size: 10px; + line-height: 15px; + } + + .too-small { + height: 10px; + } + + .too-big { + height: 120px; + } + </style> +</head> +<body> + <div> + <div class="container"> + <div>height: min-content<br>on this box.</div> + <div>height: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-small">min-height: min-content<br>on this box.</div> + <div class="too-small">min-height: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-big">max-height: min-content<br>on this box.</div> + <div class="too-big">max-height: max-content<br>on this box.</div> + </div> + </div> + + <div> + <div class="container"> + <div>block: min-content<br>on this box.</div> + <div>block: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-small">min-block: min-content<br>on this box.</div> + <div class="too-small">min-block: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-big">max-block: min-content<br>on this box.</div> + <div class="too-big">max-block: max-content<br>on this box.</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1.html b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1.html new file mode 100644 index 0000000000..68860be223 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-1.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Test: Different values of block sizing properties with max-content and min-content in horizontal wm + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html, body { + margin: 0; + } + + .container { + width: 120px; + height: 200px; + border: 2px solid blue; + display: inline-block; + vertical-align: top; + } + + .container > * { + border: 2px solid lime; + display: inline-block; + + font-family: Ahem; + font-size: 10px; + line-height: 15px; + } + + .too-small { + height: 10px; + } + + .too-big { + height: 120px; + } + </style> +</head> +<body> + <div> + <div class="container"> + <div class="height-min-content">height: min-content<br>on this box.</div> + <div class="height-max-content">height: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-small min-height-min-content"> + min-height: min-content<br>on this box. + </div> + <div class="too-small min-height-max-content"> + min-height: max-content<br>on this box. + </div> + </div> + + <div class="container"> + <div class="too-big max-height-min-content"> + max-height: min-content<br>on this box. + </div> + <div class="too-big max-height-max-content"> + max-height: max-content<br>on this box. + </div> + </div> + </div> + + <div> + <div class="container"> + <div class="block-min-content">block: min-content<br>on this box.</div> + <div class="block-max-content">block: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-small min-block-min-content"> + min-block: min-content<br>on this box. + </div> + <div class="too-small min-block-max-content"> + min-block: max-content<br>on this box. + </div> + </div> + + <div class="container"> + <div class="too-big max-block-min-content"> + max-block: min-content<br>on this box. + </div> + <div class="too-big max-block-max-content"> + max-block: max-content<br>on this box. + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html new file mode 100644 index 0000000000..172f00d58e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Reference Case: Different values of height:auto container in horizontal wm + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <meta name="flags" content="ahem"> + <style> + html,body { + margin: 0; + } + + .outer * { + border: 2px solid lime; + } + + .container { + width: 80px; + border-color: blue; + display: inline-block; + vertical-align: top; + + font-family: Ahem; + font-size: 8px; + line-height: 13px; + } + + .too-small { + height: 10px; + } + + .too-big { + height: 100px; + } + </style> +</head> +<body> +<div class="outer"> + <div class="container"> + <div>auto<br>container: min-content.</div> + <div>auto<br>container: min-content.</div> + </div> + <div class="container"> + <div class="too-small">10px<br>container: min-content.</div> + <div class="too-small">10px<br>container: min-content.</div> + </div> + <div class="container"> + <div class="too-big">100px<br>container: min-content.</div> + <div class="too-big">100px<br>container: min-content.</div> + </div> + + <div class="container"> + <div>auto<br>container: max-content.</div> + <div>auto<br>container: max-content.</div> + </div> + <div class="container"> + <div class="too-small">10px<br>container: max-content.</div> + <div class="too-small">10px<br>container: max-content.</div> + </div> + <div class="container"> + <div class="too-big">100px<br>container: max-content.</div> + <div class="too-big">100px<br>container: max-content.</div> + </div> +</div> + +<div class="outer"> + <div class="container"> + <div>auto<br>container: auto.</div> + <div>auto<br>container: auto.</div> + </div> + + <div class="container"> + <div class="too-small">10px<br>container min-size: min-content.</div> + <div class="too-small">10px<br>container min-size: min-content.</div> + </div> + <div class="container"> + <div class="too-small">10px<br>container min-size: max-content.</div> + <div class="too-small">10px<br>container min-size: max-content.</div> + </div> + + <div class="container"> + <div class="too-big">100px<br>container max-size: min-content.</div> + <div class="too-big">100px<br>container max-size: min-content.</div> + </div> + <div class="container"> + <div class="too-big">100px<br>container max-size: max-content.</div> + <div class="too-big">100px<br>container max-size: max-content.</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html new file mode 100644 index 0000000000..8592c7d66b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Test: min-content and max-content for 'height' on a container, with various heights on children + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + + .outer * { + border: 2px solid lime; + } + + .container { + width: 80px; + border-color: blue; + display: inline-block; + vertical-align: top; + + font-family: Ahem; + font-size: 8px; + line-height: 13px; + } + + .too-small { + height: 10px; + } + + .too-big { + height: 100px; + } + </style> +</head> +<body> +<div class="outer"> + <div class="container height-min-content"> + <div>auto<br>container: min-content.</div> + <div>auto<br>container: min-content.</div> + </div> + <div class="container height-min-content"> + <div class="too-small">10px<br>container: min-content.</div> + <div class="too-small">10px<br>container: min-content.</div> + </div> + <div class="container height-min-content"> + <div class="too-big">100px<br>container: min-content.</div> + <div class="too-big">100px<br>container: min-content.</div> + </div> + + <div class="container height-max-content"> + <div>auto<br>container: max-content.</div> + <div>auto<br>container: max-content.</div> + </div> + <div class="container height-max-content"> + <div class="too-small">10px<br>container: max-content.</div> + <div class="too-small">10px<br>container: max-content.</div> + </div> + <div class="container height-max-content"> + <div class="too-big">100px<br>container: max-content.</div> + <div class="too-big">100px<br>container: max-content.</div> + </div> +</div> + +<div class="outer"> + <div class="container"> + <div>auto<br>container: auto.</div> + <div>auto<br>container: auto.</div> + </div> + + <div class="container min-height-min-content"> + <div class="too-small">10px<br>container min-size: min-content.</div> + <div class="too-small">10px<br>container min-size: min-content.</div> + </div> + <div class="container min-height-max-content"> + <div class="too-small">10px<br>container min-size: max-content.</div> + <div class="too-small">10px<br>container min-size: max-content.</div> + </div> + + <div class="container max-height-min-content"> + <div class="too-big">100px<br>container max-size: min-content.</div> + <div class="too-big">100px<br>container max-size: min-content.</div> + </div> + <div class="container max-height-max-content"> + <div class="too-big">100px<br>container max-size: max-content.</div> + <div class="too-big">100px<br>container max-size: max-content.</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html new file mode 100644 index 0000000000..f7844a0b34 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/hori-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Test: min-content and max-content for 'block-size' on a container, with various block-sizes on children + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + + .outer * { + border: 2px solid lime; + } + + .container { + width: 80px; + border-color: blue; + display: inline-block; + vertical-align: top; + + font-family: Ahem; + font-size: 8px; + line-height: 13px; + } + + .too-small { + block-size: 10px; + } + + .too-big { + block-size: 100px; + } + </style> +</head> +<body> +<div class="outer"> + <div class="container block-min-content"> + <div>auto<br>container: min-content.</div> + <div>auto<br>container: min-content.</div> + </div> + <div class="container block-min-content"> + <div class="too-small">10px<br>container: min-content.</div> + <div class="too-small">10px<br>container: min-content.</div> + </div> + <div class="container block-min-content"> + <div class="too-big">100px<br>container: min-content.</div> + <div class="too-big">100px<br>container: min-content.</div> + </div> + + <div class="container block-max-content"> + <div>auto<br>container: max-content.</div> + <div>auto<br>container: max-content.</div> + </div> + <div class="container block-max-content"> + <div class="too-small">10px<br>container: max-content.</div> + <div class="too-small">10px<br>container: max-content.</div> + </div> + <div class="container block-max-content"> + <div class="too-big">100px<br>container: max-content.</div> + <div class="too-big">100px<br>container: max-content.</div> + </div> +</div> + +<div class="outer"> + <div class="container"> + <div>auto<br>container: auto.</div> + <div>auto<br>container: auto.</div> + </div> + + <div class="container min-block-min-content"> + <div class="too-small">10px<br>container min-size: min-content.</div> + <div class="too-small">10px<br>container min-size: min-content.</div> + </div> + <div class="container min-block-max-content"> + <div class="too-small">10px<br>container min-size: max-content.</div> + <div class="too-small">10px<br>container min-size: max-content.</div> + </div> + + <div class="container max-block-min-content"> + <div class="too-big">100px<br>container max-size: min-content.</div> + <div class="too-big">100px<br>container max-size: min-content.</div> + </div> + <div class="container max-block-max-content"> + <div class="too-big">100px<br>container max-size: max-content.</div> + <div class="too-big">100px<br>container max-size: max-content.</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/image-fractional-height-with-wide-aspect-ratio.html b/testing/web-platform/tests/css/css-sizing/image-fractional-height-with-wide-aspect-ratio.html new file mode 100644 index 0000000000..4bfa65a2d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-fractional-height-with-wide-aspect-ratio.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +.target { + height: 12.5px; + background-color: red; + display: block; +} +</style> +<p>Test passes if there is a filled green square.</p> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'><rect width='96' height='12' fill='green'/></svg>" + class="target"> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'><rect width='96' height='12' fill='green'/></svg>" + class="target"> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'><rect width='96' height='12' fill='green'/></svg>" + class="target"> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'><rect width='96' height='12' fill='green'/></svg>" + class="target"> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'><rect width='96' height='12' fill='green'/></svg>" + class="target"> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'><rect width='96' height='12' fill='green'/></svg>" + class="target"> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'><rect width='96' height='12' fill='green'/></svg>" + class="target"> +<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'><rect width='96' height='12' fill='green'/></svg>" + class="target"> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-001-ref.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-001-ref.html new file mode 100644 index 0000000000..9d3a3f534e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-001-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> + img { + border: 1px solid black; + height: 40px; + width: 40px; + } +</style> +<img src="/css/support/60x60-green.png"> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-001.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-001.html new file mode 100644 index 0000000000..b7c57bb7ab --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-001.html @@ -0,0 +1,23 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Image size is not altered when it loads when min/max-size depends on the transferred intrinsic sizes, not natural sizes</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1546739"> +<link rel="match" href="image-min-max-content-intrinsic-size-change-001-ref.html"> +<style> + img { + border: 1px solid black; + height: 40px; + width: 30px; + min-width: min-content; + } +</style> +<img> +<script> + let img = document.querySelector("img"); + img.offsetWidth; // Ensure the image is laid out. + img.onload = () => document.documentElement.className = ""; + img.src = "/css/support/60x60-green.png"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-002.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-002.html new file mode 100644 index 0000000000..70f7447679 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-002.html @@ -0,0 +1,23 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Image size is not altered when it loads when min/max-size depends on the transferred intrinsic sizes, not natural sizes</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1546739"> +<link rel="match" href="image-min-max-content-intrinsic-size-change-001-ref.html"> +<style> + img { + border: 1px solid black; + height: 40px; + width: 30px; + min-width: max-content; + } +</style> +<img> +<script> + let img = document.querySelector("img"); + img.offsetWidth; // Ensure the image is laid out. + img.onload = () => document.documentElement.className = ""; + img.src = "/css/support/60x60-green.png"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-003-ref.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-003-ref.html new file mode 100644 index 0000000000..c3253f750c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-003-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> + img { + border: 1px solid black; + height: 70px; + width: 70px; + } +</style> +<img src="/css/support/60x60-green.png"> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-003.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-003.html new file mode 100644 index 0000000000..b1c87e64c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-003.html @@ -0,0 +1,23 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Image size is not altered when it loads when min/max-size depends on the transferred intrinsic sizes, not natural sizes</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1546739"> +<link rel="match" href="image-min-max-content-intrinsic-size-change-003-ref.html"> +<style> + img { + border: 1px solid black; + height: 70px; + width: 80px; + max-width: min-content; + } +</style> +<img> +<script> + let img = document.querySelector("img"); + img.offsetWidth; // Ensure the image is laid out. + img.onload = () => document.documentElement.className = ""; + img.src = "/css/support/60x60-green.png"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-004.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-004.html new file mode 100644 index 0000000000..431bfa5c47 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-004.html @@ -0,0 +1,23 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Image size is not altered when it loads when min/max-size depends on the transferred intrinsic sizes, not natural sizes</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1546739"> +<link rel="match" href="image-min-max-content-intrinsic-size-change-003-ref.html"> +<style> + img { + border: 1px solid black; + height: 70px; + width: 80px; + max-width: max-content; + } +</style> +<img> +<script> + let img = document.querySelector("img"); + img.offsetWidth; // Ensure the image is laid out. + img.onload = () => document.documentElement.className = ""; + img.src = "/css/support/60x60-green.png"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-005.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-005.html new file mode 100644 index 0000000000..a5f308ea2f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-005.html @@ -0,0 +1,24 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Image size is not altered when it loads when min/max-size depends on the transferred intrinsic sizes, not natural sizes</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1546739"> +<link rel="match" href="image-min-max-content-intrinsic-size-change-001-ref.html"> +<style> + img { + border: 1px solid black; + height: 30px; + width: 40px; + min-height: min-content; + writing-mode: vertical-lr; + } +</style> +<img> +<script> + let img = document.querySelector("img"); + img.offsetWidth; // Ensure the image is laid out. + img.onload = () => document.documentElement.className = ""; + img.src = "/css/support/60x60-green.png"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-006.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-006.html new file mode 100644 index 0000000000..68cbee7fa8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-006.html @@ -0,0 +1,24 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Image size is not altered when it loads when min/max-size depends on the transferred intrinsic sizes, not natural sizes</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1546739"> +<link rel="match" href="image-min-max-content-intrinsic-size-change-001-ref.html"> +<style> + img { + border: 1px solid black; + height: 30px; + width: 40px; + min-height: max-content; + writing-mode: vertical-lr; + } +</style> +<img> +<script> + let img = document.querySelector("img"); + img.offsetWidth; // Ensure the image is laid out. + img.onload = () => document.documentElement.className = ""; + img.src = "/css/support/60x60-green.png"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-007.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-007.html new file mode 100644 index 0000000000..c1daabfa28 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-007.html @@ -0,0 +1,24 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Image size is not altered when it loads when min/max-size depends on the transferred intrinsic sizes, not natural sizes</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1546739"> +<link rel="match" href="image-min-max-content-intrinsic-size-change-003-ref.html"> +<style> + img { + border: 1px solid black; + height: 80px; + width: 70px; + max-height: min-content; + writing-mode: vertical-lr; + } +</style> +<img> +<script> + let img = document.querySelector("img"); + img.offsetWidth; // Ensure the image is laid out. + img.onload = () => document.documentElement.className = ""; + img.src = "/css/support/60x60-green.png"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-008.html b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-008.html new file mode 100644 index 0000000000..12f7d35ac0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-min-max-content-intrinsic-size-change-008.html @@ -0,0 +1,24 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Image size is not altered when it loads when min/max-size depends on the transferred intrinsic sizes, not natural sizes</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1546739"> +<link rel="match" href="image-min-max-content-intrinsic-size-change-003-ref.html"> +<style> + img { + border: 1px solid black; + height: 80px; + width: 70px; + max-height: max-content; + writing-mode: vertical-lr; + } +</style> +<img> +<script> + let img = document.querySelector("img"); + img.offsetWidth; // Ensure the image is laid out. + img.onload = () => document.documentElement.className = ""; + img.src = "/css/support/60x60-green.png"; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/image-percentage-max-height-in-anonymous-block.html b/testing/web-platform/tests/css/css-sizing/image-percentage-max-height-in-anonymous-block.html new file mode 100644 index 0000000000..5b1713975e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/image-percentage-max-height-in-anonymous-block.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#max-size-properties"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:red;"> + <div></div> + <!-- The image is a 1x1 transparent one. --> + <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="max-width:100px; height:1000px; max-height:100%; background:green;"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/inheritance-001.html b/testing/web-platform/tests/css/css-sizing/inheritance-001.html new file mode 100644 index 0000000000..2516288e48 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/inheritance-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Intrinsic & Extrinsic Sizing properties</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#property-index"> +<meta name="assert" content="Properties do not inherit."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<style> + #container { + display: grid; + } +</style> +<script> +assert_not_inherited('box-sizing', 'content-box', 'border-box'); +assert_not_inherited('max-height', 'none', '10px'); +assert_not_inherited('max-width', 'none', '10px'); +assert_not_inherited('min-height', 'auto', '10px'); +assert_not_inherited('min-width', 'auto', '10px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/inheritance-002.html b/testing/web-platform/tests/css/css-sizing/inheritance-002.html new file mode 100644 index 0000000000..2af768b2c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/inheritance-002.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Intrinsic & Extrinsic Sizing properties</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#property-index"> +<meta name="assert" content="Properties do not inherit."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +<style> + #target { + position: absolute; + } +</style> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +// Without position absolute, the initial value +// 'auto' gives the size of the parent element. +assert_not_inherited('height', '0px', '10px'); +assert_not_inherited('width', '0px', '10px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/inline-intrinsic-size-calc-ref.html b/testing/web-platform/tests/css/css-sizing/inline-intrinsic-size-calc-ref.html new file mode 100644 index 0000000000..6b9a38a1bc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/inline-intrinsic-size-calc-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<title>Calc gets resolved with 0 percent basis for intrinsic size computation</title> +<style> + div { + background-color: green; + width: max-content; + } + span { + margin-left: 30px; + padding-left: 50px; + } +</style> +<div> + <span>ABCD</span> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/inline-intrinsic-size-calc.html b/testing/web-platform/tests/css/css-sizing/inline-intrinsic-size-calc.html new file mode 100644 index 0000000000..1e47bd9b04 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/inline-intrinsic-size-calc.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>Calc gets resolved with 0 percent basis for intrinsic size computation</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="inline-intrinsic-size-calc-ref.html"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1733952"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#cyclic-percentage-contribution"> +<style> + div { + background-color: green; + width: max-content; + } + span { + margin-left: calc(0% + 30px); + padding-left: calc(0% + 50px); + } +</style> +<div> + <span>ABCD</span> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-001-ref.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-001-ref.html new file mode 100644 index 0000000000..295decdf89 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-001-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<title>Reference</title> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + color: blue; + font: 20px/1 Ahem; + } + .zero { + width: 0; + } + .infinite { + width: 400px; /* close enough */ + } + + /* visualize size contribution */ + .container > div { + float: left; + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + } + + /* controls for min-width */ + /* content = 100% = 80px = 4ch + border */ + /* choose sizes that are larger than content to see if how they take effect */ + .control { + width: 60px; + } + .raw-percent, + .calc-percent { + width: 160px; + margin-right: -100px; + } + .no-percent { + width: 160px; + } +</style> + +<!-- calculating min-content widths --> +<div class='zero container'> + <div><div class="control">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="raw-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="calc-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="no-percent">ppp pp</div></div> +</div> + +<!-- calculating max-content widths --> +<div class='infinite container'> + <div><div class="control">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="raw-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="calc-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="no-percent">p p</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-001.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-001.html new file mode 100644 index 0000000000..64f227073d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<title>Percentages of min-width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="intrinsic-percent-non-replaced-001-ref.html"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + color: blue; + font: 20px/1 Ahem; + } + .zero { + width: 0; + } + .infinite { + width: 400px; /* close enough */ + } + + /* visualize size contribution */ + .container > div { + float: left; + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + } + + /* test min-width */ + /* content = 100% = 80px = 4ch + border */ + /* choose sizes that are larger than content to see if how they take effect */ + .raw-percent { + min-width: 200%; + } + .calc-percent { + min-width: calc(160px + 0%); + } + .no-percent { + min-width: 160px; + } +</style> + +<!-- calculating min-content widths --> +<div class='zero container'> + <div><div class="control">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="raw-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="calc-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="no-percent">ppp pp</div></div> +</div> + +<!-- calculating max-content widths --> +<div class='infinite container'> + <div><div class="control">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="raw-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="calc-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="no-percent">p p</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-002-ref.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-002-ref.html new file mode 100644 index 0000000000..4997199c4d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-002-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<title>Reference</title> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + color: blue; + font: 20px/1 Ahem; + } + .zero { + width: 0; + } + .infinite { + width: 400px; /* close enough */ + } + + /* visualize size contribution */ + .container > div { + float: left; /* shrinkwrap */ + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + } + + /* controls for width, max-width */ + /* content = 100% = 80px = 4ch + border */ + /* choose sizes that are larger than content to see if how they take effect */ + .control { + width: 60px; + } + .raw-percent, + .calc-percent { + width: 40px; + margin-right: 20px; + } + .no-percent { + width: 40px; + } +</style> + +<!-- calculating min-content widths --> +<div class='zero container'> + <div><div class="control">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="raw-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="calc-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="no-percent">ppp pp</div></div> +</div> + +<!-- calculating max-content widths --> +<div class='infinite container'> + <div><div class="control">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="raw-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="calc-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="no-percent">p p</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-002.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-002.html new file mode 100644 index 0000000000..748aa5f8f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-002.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<title>Percentages of max-width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + color: blue; + font: 20px/1 Ahem; + } + .zero { + width: 0; + } + .infinite { + width: 400px; /* close enough */ + } + + /* visualize size contribution */ + .container > div { + float: left; /* shrinkwrap */ + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + } + + /* test max-width */ + /* content = 100% = 80px = 4ch + border */ + /* choose sizes that are smaller than content to see if how they take effect */ + .raw-percent { + max-width: 50%; + } + .calc-percent { + max-width: calc(40px + 0%); + } + .no-percent { + max-width: 40px; + } +</style> + +<!-- calculating min-content widths --> +<div class='zero container'> + <div><div class="control">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="raw-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="calc-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="no-percent">ppp pp</div></div> +</div> + +<!-- calculating max-content widths --> +<div class='infinite container'> + <div><div class="control">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="raw-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="calc-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="no-percent">p p</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-003.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-003.html new file mode 100644 index 0000000000..1dd1a2ef5d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-003.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<title>Percentages of width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="intrinsic-percent-non-replaced-002-ref.html"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + color: blue; + font: 20px/1 Ahem; + } + .zero { + width: 0; + } + .infinite { + width: 400px; /* close enough */ + } + + /* visualize size contribution */ + .container > div { + float: left; + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + } + + /* test width */ + /* content = 100% = 80px = 4ch + border */ + /* choose sizes that are different than content to see if how they take effect */ + .raw-percent { + width: 50%; + } + .calc-percent { + width: calc(40px + 0%); + } + .no-percent { + width: 40px; + } +</style> + +<!-- calculating min-content widths --> +<div class='zero container'> + <div><div class="control">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="raw-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="calc-percent">ppp pp</div></div> +</div> +<div class='zero container'> + <div><div class="no-percent">ppp pp</div></div> +</div> + +<!-- calculating max-content widths --> +<div class='infinite container'> + <div><div class="control">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="raw-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="calc-percent">p p</div></div> +</div> +<div class='infinite container'> + <div><div class="no-percent">p p</div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004-ref.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004-ref.html new file mode 100644 index 0000000000..aa735cffdb --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>Reference</title> + +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + width: 0; + } + + span { + display: inline-block; + width: 20px; + height: 20px; + background-color: blue; + } + + /* visualize size contribution */ + .container > div { + float: left; + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + writing-mode: vertical-rl; + width: 40px; + height: 20px; + } + + /* controls for min-width */ + /* content = 100% = 80px = 4ch + border */ + /* choose sizes that are larger than content to see if how they take effect */ + .container > div > .raw-percent { + width: 120px; + } + .container > div > .calc-percent, + .container > div > .no-percent { + width: 160px; + } +</style> + +<!-- calculating min-content widths --> +<div class='container'> + <div><div class="control"><span></span></div></div> +</div> +<div class='container'> + <div style='width: 60px;'><div class="raw-percent"><span></span></div></div> +</div> +<div class='container'> + <div style='width: 60px;'><div class="calc-percent"><span></span></div></div> +</div> +<div class='container'> + <div><div class="no-percent"><span></span></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004.html new file mode 100644 index 0000000000..6fc061abff --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<title>Percentages of width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="intrinsic-percent-non-replaced-004-ref.html"> + +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + width: 0; + } + + span { + display: inline-block; + width: 20px; + height: 20px; + background-color: blue; + } + + /* visualize size contribution */ + .container > div { + float: left; + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + writing-mode: vertical-rl; + width: 40px; + height: 20px; + } + + /* test width */ + /* content = 100% = 60px = 40px + border */ + /* choose sizes that are different than content to see if how they take effect */ + .raw-percent { + min-width: 200%; + } + .calc-percent { + min-width: calc(160px + 0%); + } + .no-percent { + min-width: 160px; + } +</style> + +<!-- calculating min-content widths --> +<div class='container'> + <div><div class="control"><span></span></div></div> +</div> +<div class='container'> + <div><div class="raw-percent"><span></span></div></div> +</div> +<div class='container'> + <div><div class="calc-percent"><span></span></div></div> +</div> +<div class='container'> + <div><div class="no-percent"><span></span></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005-ref.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005-ref.html new file mode 100644 index 0000000000..38f480c0ac --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>Reference</title> + +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + width: 0; + } + + span { + display: inline-block; + width: 20px; + height: 20px; + background-color: blue; + } + + /* visualize size contribution */ + .container > div { + float: left; + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + writing-mode: vertical-rl; + width: 80px; + height: 20px; + } + + /* test width */ + /* content = 100% = 100px = 80px + border */ + /* choose sizes that are different than content to see if how they take effect */ + .container > div > .raw-percent { + width: 50px; + } + .container > div > .calc-percent, + .container > div > .no-percent { + width: 40px; + } +</style> + +<!-- calculating min-content widths --> +<div class='container'> + <div><div class="control"><span></span></div></div> +</div> +<div class='container'> + <div style='width: 100px;'><div class="raw-percent"><span></span></div></div> +</div> +<div class='container'> + <div style='width: 100px;'><div class="calc-percent"><span></span></div></div> +</div> +<div class='container'> + <div><div class="no-percent"><span></span></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005.html new file mode 100644 index 0000000000..f105d94204 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<title>Percentages of width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> +<link rel="match" href="intrinsic-percent-non-replaced-005-ref.html"> + +<style> + /* establish context */ + .container { + clear: both; + padding: 10px; + width: 0; + } + + span { + display: inline-block; + width: 20px; + height: 20px; + background-color: blue; + } + + /* visualize size contribution */ + .container > div { + float: left; + border: solid orange 20px; + border-style: none solid; + } + .container > div > div { + border-right: solid 20px aqua; + writing-mode: vertical-rl; + width: 80px; + height: 20px; + } + + /* test width */ + /* content = 100% = 100px = 80px + border */ + /* choose sizes that are different than content to see if how they take effect */ + .raw-percent { + max-width: 50%; + } + .calc-percent { + max-width: calc(40px + 0%); + } + .no-percent { + max-width: 40px; + } +</style> + +<!-- calculating min-content widths --> +<div class='container'> + <div><div class="control"><span></span></div></div> +</div> +<div class='container'> + <div><div class="raw-percent"><span></span></div></div> +</div> +<div class='container'> + <div><div class="calc-percent"><span></span></div></div> +</div> +<div class='container'> + <div><div class="no-percent"><span></span></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-001.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-001.html new file mode 100644 index 0000000000..ebb93a225a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, converts a percent height into an intrinsic width." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#float { float: left; height: 100px; background: green; } +canvas { height: 100%; } +</style> +<p>Test passes if there is a filled green square.</p> +<div id=float> + <canvas width=10 height=10></canvas> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-002.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-002.html new file mode 100644 index 0000000000..05051e63d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-002.html @@ -0,0 +1,14 @@ +<!-- quirks mode --> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, converts a percent height into an intrinsic width." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#float { float: left; height: 100px; background: green; } +canvas { height: 100%; } +</style> +<p style="margin-top: 1em;">Test passes if there is a filled green square.</p> +<div id=float> + <div> + <canvas width=10 height=10></canvas> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-003.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-003.html new file mode 100644 index 0000000000..0f130b82db --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-003.html @@ -0,0 +1,17 @@ +<!-- quirks mode --> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, converts a percent height into an intrinsic width." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#container { height: 200px; } +#float { float: left; height: 50%; background: green; } +canvas { height: 100%; } +</style> +<p style="margin-top: 1em;">Test passes if there is a filled green square.</p> +<div id=container> + <div id=float> + <div> + <canvas width=10 height=10></canvas> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-004.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-004.html new file mode 100644 index 0000000000..1c4002b0f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-004.html @@ -0,0 +1,17 @@ +<!-- quirks mode --> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, converts a percent height into an intrinsic width." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#container { display: flex; height: 200px; } +#float { float: left; height: 50%; background: green; } +canvas { height: 100%; } +</style> +<p style="margin-top: 1em;">Test passes if there is a filled green square.</p> +<div id=container> + <div id=float> + <div> + <canvas width=10 height=10></canvas> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-005.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-005.html new file mode 100644 index 0000000000..84e945c833 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, converts a percent height into an intrinsic width." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#container { position: relative; height: 100px; } +#abs { position: absolute; top: 0; bottom: 0; background: green; } +canvas { height: 100%; } +</style> +<p>Test passes if there is a filled green square.</p> +<div id=container> + <div id=abs> + <canvas width=10 height=10></canvas> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-006.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-006.html new file mode 100644 index 0000000000..bce0a18be6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-006.html @@ -0,0 +1,17 @@ +<!-- quirks mode --> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, converts a percent height into an intrinsic width." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#container { height: 100px; } +#float { float: left; background: green; } +canvas { height: 100%; } +</style> +<p style="margin-top: 1em;">Test passes if there is a filled green square.</p> +<div id=container> + <div id=float> + <div> + <canvas width=10 height=10></canvas> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-007.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-007.html new file mode 100644 index 0000000000..f862bb9dc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-007.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, converts a percent height into an intrinsic width." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#container { position: relative; height: 200px; } +#abs { position: absolute; top: 0; bottom: 100px; background: green; } +canvas { height: 100%; } +</style> +<p>Test passes if there is a filled green square.</p> +<div id=container> + <div id=abs> + <canvas width=10 height=10></canvas> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-008.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-008.html new file mode 100644 index 0000000000..d0099530c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-008.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, converts a percent height into an intrinsic width." /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#container { position: relative; width: 200px; height: 200px; } +#abs { writing-mode: vertical-lr; position: absolute; left: 0; right: 100px; background: green; } +canvas { width: 100%; } +</style> +<p>Test passes if there is a filled green square.</p> +<div id=container> + <div id=abs> + <canvas width=10 height=10></canvas> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-009-ref.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-009-ref.html new file mode 100644 index 0000000000..df854d75fc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-009-ref.html @@ -0,0 +1,32 @@ +<!doctype html> +<title>CSS test reference</title> +<style> +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; +} + +body { + padding: 20px; + position: relative; +} + +.parent { + border: 3px solid green; + position: absolute; + height: 60vh; +} + +.parent img { + height: calc(60vh - 6px); +} +</style> +<div class="parent"> + <img src="/images/blue96x96.png"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-009.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-009.html new file mode 100644 index 0000000000..03407dc2b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-009.html @@ -0,0 +1,34 @@ +<!doctype html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1677353"> +<link rel="match" href="intrinsic-percent-replaced-009-ref.html"> +<style> +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; +} + +body { + padding: 20px; + position: relative; +} + +.parent { + border: 3px solid green; + position: absolute; + height: 60%; +} + +.parent img { + height: 100%; +} +</style> +<div class="parent"> + <img src="/images/blue96x96.png"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-010-ref.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-010-ref.html new file mode 100644 index 0000000000..761f18c3f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-010-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Test Reference</title> +<div style="display: inline-block"> + <img style="height: 100px; max-width: 100%;" src="/images/green-100x50.png"> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-010.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-010.html new file mode 100644 index 0000000000..c0a8186f86 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-010.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Percentage size abspos box in a containing block that has padding</title> +<link rel=help href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1691374"> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=match href="intrinsic-percent-replaced-010-ref.html"> +<div style="position: relative; padding-top: 100px; height: 0;"> + <div style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;"> + <div style="display: inline-block; height: 100%;"> + <img + style="height: 100%; max-width: 100%;" + src="/images/green-100x50.png"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-011-ref.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-011-ref.html new file mode 100644 index 0000000000..29a0fe8013 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-011-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>CSS Test Reference</title> +<div style="writing-mode: vertical-lr"> + <div style="display: inline-block"> + <img style="width: 100px; max-height: 100%;" src="/images/green-100x50.png"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-011.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-011.html new file mode 100644 index 0000000000..4c0a11fd9a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-011.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Percentage size abspos box in a containing block that has padding</title> +<link rel=help href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1691374"> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=match href="intrinsic-percent-replaced-011-ref.html"> +<style> + :root { writing-mode: vertical-lr; } +</style> +<div style="position: relative; padding-left: 100px; width: 0;"> + <div style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;"> + <div style="display: inline-block; width: 100%;"> + <img + style="width: 100%; max-height: 100%;" + src="/images/green-100x50.png"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-001.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-001.html new file mode 100644 index 0000000000..1128ffa175 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-001.html @@ -0,0 +1,14 @@ +<!-- quirks mode --> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p style="margin-top: 1em;">Test passes if there is a filled green square.</p> +<div id="target" style="float: left; background: green;"> + <div> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-002.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-002.html new file mode 100644 index 0000000000..f062b8a94c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="float: left; background: green;"> + <span> + <div style="height: 100%;"> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> + </span> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-003.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-003.html new file mode 100644 index 0000000000..ef8832a405 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-003.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="float: left; background: green;"> + <div style="height: 100%;"> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-004.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-004.html new file mode 100644 index 0000000000..b0c452b151 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-004.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="float: left; background: green;"> + <div style="width: fit-content; height: 100%;"> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-005.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-005.html new file mode 100644 index 0000000000..87a7a9b93b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-005.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div style="position: relative; width: 100px; height: 100px;"> + <div id="target" style="position: absolute; top:0; background: green;"> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.bottom = '0px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-006.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-006.html new file mode 100644 index 0000000000..8ccd3a0bed --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-006.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="float: left; background: green;"> + <div style="width: 100%; height: 100%;"> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-007.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-007.html new file mode 100644 index 0000000000..72d3b23dca --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-007.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div style="position: relative; width: 100px; height: 200px;"> + <div id="target" style="position: absolute; top:0; bottom: 0; background: green;"> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.bottom = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-008.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-008.html new file mode 100644 index 0000000000..9a3361a5e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-008.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div style="position: relative; width: 200px; height: 200px;"> + <div id="target" style="writing-mode: vertical-lr; position: absolute; left: 0; right: 0; background: green;"> + <canvas width="1" height="1" style="width: 100%;"></canvas> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.right = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-009.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-009.html new file mode 100644 index 0000000000..0c7a411a72 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-009.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="float: left; background: green; line-height: 0;"> + <span style="display: inline-block; height: 100%;"> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-010.html b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-010.html new file mode 100644 index 0000000000..04c154e8fc --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-replaced-dynamic-010.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that a dynamic change in the height of an element calculates the intrinsic min/max size correctly when a replaced element is present."/> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="float: left; background: green; color: transparent;"> + <span> + <div style="float: left; height: 100%;"> + <canvas width="1" height="1" style="height: 100%;"></canvas> + </div> + </span> +</div> +<script> + document.body.offsetTop; + document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-sizing/intrinsic-size-fallback-replaced.html b/testing/web-platform/tests/css/css-sizing/intrinsic-size-fallback-replaced.html new file mode 100644 index 0000000000..a3325b0aea --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/intrinsic-size-fallback-replaced.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<meta charset="utf-8"> +<title>CSS Sizing Test: Testing intrinsic size fallback 300x150 for some replaced elements.</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<meta name="assert" + content="This test verifies that the intrinsic size fallback is 300px width and 150px height for replaced elements with no intrinsic size and no intrinsic ratio, regardless of the writing-mode."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> + .test { + border: 0; + padding: 0; + background-color: blue; + } + + .vertical { + writing-mode: vertical-rl; + } +</style> + +<body onload="checkLayout('.test')"> + <!-- horizontal writing-mode --> + <iframe class="test" data-expected-width="300" data-expected-height="150"></iframe> + <video class="test" data-expected-width="300" data-expected-height="150"></video> + <svg class="test" data-expected-bounding-client-rect-width="300" + data-expected-bounding-client-rect-height="150"></svg> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" class="test" data-expected-width="300" + data-expected-height="150"> + + <!-- vertical writing-mode --> + <iframe class="test vertical" data-expected-width="300" data-expected-height="150"></iframe> + <video class="test vertical" data-expected-width="300" data-expected-height="150"></video> + <svg class="test vertical" data-expected-bounding-client-rect-width="300" + data-expected-bounding-client-rect-height="150"></svg> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" class="test vertical" + data-expected-width="300" data-expected-height="150"> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-sizing/max-content-input-001-ref.html b/testing/web-platform/tests/css/css-sizing/max-content-input-001-ref.html new file mode 100644 index 0000000000..c01e46550a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/max-content-input-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Reference: max-content sizes of INPUT and TEXTAREA</title> + +<style> + input, textarea { font: 20px monospace; white-space: pre; } +</style> + +<p><input value="sample text"> + +<p><textarea class="h" rows=7 cols=12>sample text 1 sample text 1 +sample text 2 sample text 2 +sample text 3 sample text 3 +sample text 4 sample text 4 +sample text 5 sample text 5 +sample text 6 sample text 6 +sample text 7 sample text 7</textarea> + +<p><input value="sample text" style="width: 11ch"> + +<p><textarea class="h" rows=3 cols=27>sample text 1 sample text 1 +sample text 2 sample text 2 +sample text 3 sample text 3</textarea> diff --git a/testing/web-platform/tests/css/css-sizing/max-content-input-001.html b/testing/web-platform/tests/css/css-sizing/max-content-input-001.html new file mode 100644 index 0000000000..aabbea0157 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/max-content-input-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Test: max-content sizes of INPUT and TEXTAREA</title> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="max-content-input-001-ref.html"> +<style> + input, textarea { font: 20px monospace; white-space: pre; } +</style> + +<p><input style="height: max-content" value="sample text"> + +<p><textarea style="height: max-content" rows=3 cols=12>sample text 1 sample text 1 +sample text 2 sample text 2 +sample text 3 sample text 3 +sample text 4 sample text 4 +sample text 5 sample text 5 +sample text 6 sample text 6 +sample text 7 sample text 7</textarea> + +<p><input value="sample text" style="width: max-content"> + +<p><textarea class="h" rows=3 cols=12 style="width: max-content">sample text 1 sample text 1 +sample text 2 sample text 2 +sample text 3 sample text 3</textarea> diff --git a/testing/web-platform/tests/css/css-sizing/min-content-min-width-000.html b/testing/web-platform/tests/css/css-sizing/min-content-min-width-000.html new file mode 100644 index 0000000000..9dff1b9734 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/min-content-min-width-000.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>min-width: min-content with fixed-width children</title> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution"> +<link rel="author" title="Ojan Vafai" href="mailto:ojan@chromium.org"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> + +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<style> +/* Reduce the heights if you want to add more variants. Don't go less than 2px per stripe. */ + +.screen { + width: 100px; + height: 50px; + background: red; +} + +.container { + min-width: min-content; + width: 50px; + height: 25px; + background: url(../support/1x1-red.png) repeat-x green; +} +.child { + width: 100px; + height: 10px; + background: green; + color: transparent; +} + +.inline-block .child { + display: inline-block; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="screen inline-block"> + <div class=container> + <div class=child>x</div> + </div> + <div class=container> + <div class=child>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div> + </div> +</div> + +<div class="screen block"> + <div class=container> + <div class=child>x</div> + </div> + <div class=container> + <div class=child>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/min-content-negative-margin-crash.html b/testing/web-platform/tests/css/css-sizing/min-content-negative-margin-crash.html new file mode 100644 index 0000000000..7a4dff81fa --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/min-content-negative-margin-crash.html @@ -0,0 +1,11 @@ +<!quirks-mode> +<link rel="help" href="https://crbug.com/1004060"> +<style> +html, body { + width: min-content; + overflow: scroll; +} +</style> +<body style="margin-right: -1px;"> + <div style="margin: 0 10000000000;"></div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/min-max-content-orthogonal-flow-crash-001.html b/testing/web-platform/tests/css/css-sizing/min-max-content-orthogonal-flow-crash-001.html new file mode 100644 index 0000000000..d2617f8aa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/min-max-content-orthogonal-flow-crash-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Test: Check computing min-/max-content does not cause crash</title> +<link rel="help" href="https://crbug.com/976859"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-values"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { + width: fit-content; +} +#target { + display: block; + writing-mode: vertical-lr; + columns: 2; +} +.after #target { + float: left; +} +</style> +<body> + <div id="target"></div> +<script> +test(() => { + const body = document.body; + body.offsetTop; + body.classList.add("after"); +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/min-width-max-width-precedence.html b/testing/web-platform/tests/css/css-sizing/min-width-max-width-precedence.html new file mode 100644 index 0000000000..43d575cdc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/min-width-max-width-precedence.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Test: check precedence between min-width and max-width</title> +<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> +<meta name="assert" content="Test that the used value of 'width' is resolved properly." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.tooltip { + height: 68px; + position: relative; + max-width: 200px; + min-width: 260px; + background-color: red; +} + +#outer { + background-color: blue; + position: absolute; + height: 136px; +} +</style> + +<div id="outer"> + <div id="inner" class="tooltip" role="tooltip"></div> +</div> +<script> +test(() => { + assert_equals(getComputedStyle(document.querySelector("#outer")).width, '260px'); +}, "When used value is resolved, min-width should win over max-width"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/ortho-writing-mode-001.html b/testing/web-platform/tests/css/css-sizing/ortho-writing-mode-001.html new file mode 100644 index 0000000000..ca34be7322 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/ortho-writing-mode-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes" title="first paragraph"> +<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#orthogonal-auto"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The intrinsic size of an orthogonal child is its shrink to fit size after layout" /> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div style="width:min-content; background:red;"> + <div style="writing-mode:vertical-rl; background:green;"> + <div style="margin-right:50%; width:50px; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/orthogonal-writing-mode-float-in-inline.html b/testing/web-platform/tests/css/css-sizing/orthogonal-writing-mode-float-in-inline.html new file mode 100644 index 0000000000..fa95069dbf --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/orthogonal-writing-mode-float-in-inline.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Shrink-to-fit float inside inline inside a shrink-to-fit-container</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<meta name="assert" content="This tests that intrinsic size calculation realizes that the four words are going to fit on the same line in final layout"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="4.1. Intrinsic Sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="float:left; height:100px; background:red;"> + <span> + <div style="float:left; writing-mode:vertical-rl; height:100%; line-height:100px; background:green;"> + + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-computed.html b/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-computed.html new file mode 100644 index 0000000000..468b9cbe3e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-computed.html @@ -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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-invalid.html b/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-invalid.html new file mode 100644 index 0000000000..02d57797ea --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-invalid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-valid.html b/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-valid.html new file mode 100644 index 0000000000..8f0b8099cf --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/box-sizing-valid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/height-invalid.html b/testing/web-platform/tests/css/css-sizing/parsing/height-invalid.html new file mode 100644 index 0000000000..14dd0b9b71 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/height-invalid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/height-valid.html b/testing/web-platform/tests/css/css-sizing/parsing/height-valid.html new file mode 100644 index 0000000000..cd54020d72 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/height-valid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/max-height-computed.html b/testing/web-platform/tests/css/css-sizing/parsing/max-height-computed.html new file mode 100644 index 0000000000..c99b28a7b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/max-height-computed.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/max-height-invalid.html b/testing/web-platform/tests/css/css-sizing/parsing/max-height-invalid.html new file mode 100644 index 0000000000..3798bb31c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/max-height-invalid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/max-height-valid.html b/testing/web-platform/tests/css/css-sizing/parsing/max-height-valid.html new file mode 100644 index 0000000000..5ece99de92 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/max-height-valid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/max-width-computed.html b/testing/web-platform/tests/css/css-sizing/parsing/max-width-computed.html new file mode 100644 index 0000000000..be92bcdd7f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/max-width-computed.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/max-width-invalid.html b/testing/web-platform/tests/css/css-sizing/parsing/max-width-invalid.html new file mode 100644 index 0000000000..86e8528338 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/max-width-invalid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/max-width-valid.html b/testing/web-platform/tests/css/css-sizing/parsing/max-width-valid.html new file mode 100644 index 0000000000..a7ac008e00 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/max-width-valid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/min-height-computed.html b/testing/web-platform/tests/css/css-sizing/parsing/min-height-computed.html new file mode 100644 index 0000000000..442da9d777 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/min-height-computed.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/min-height-invalid.html b/testing/web-platform/tests/css/css-sizing/parsing/min-height-invalid.html new file mode 100644 index 0000000000..8df96e22d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/min-height-invalid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/min-height-valid.html b/testing/web-platform/tests/css/css-sizing/parsing/min-height-valid.html new file mode 100644 index 0000000000..8450a000ce --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/min-height-valid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/min-width-computed.html b/testing/web-platform/tests/css/css-sizing/parsing/min-width-computed.html new file mode 100644 index 0000000000..74b2aedecf --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/min-width-computed.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/min-width-invalid.html b/testing/web-platform/tests/css/css-sizing/parsing/min-width-invalid.html new file mode 100644 index 0000000000..443ccc3107 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/min-width-invalid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/min-width-valid.html b/testing/web-platform/tests/css/css-sizing/parsing/min-width-valid.html new file mode 100644 index 0000000000..5fff5d97b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/min-width-valid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/width-invalid.html b/testing/web-platform/tests/css/css-sizing/parsing/width-invalid.html new file mode 100644 index 0000000000..6c56d28160 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/width-invalid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/parsing/width-valid.html b/testing/web-platform/tests/css/css-sizing/parsing/width-valid.html new file mode 100644 index 0000000000..268a89273b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/parsing/width-valid.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="/css/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> diff --git a/testing/web-platform/tests/css/css-sizing/percentage-height-in-flexbox.html b/testing/web-platform/tests/css/css-sizing/percentage-height-in-flexbox.html new file mode 100644 index 0000000000..a882efd7d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/percentage-height-in-flexbox.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>Percentage height in flexbox: css-sizing-3</title> +<link rel="author" title="mailto:atotic@google.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#percentage-sizing"> +<link rel="help" href="https://crbug.com/907911"> +<meta name="assert" content="Percentage height resolves correctly inside flexbox."> +<style> +#outer { + width: 100px; + height: 100px; + background: red; +} +#container { + display: inline-flex; + height: 50px; + background: green; +} +#target { + height:100%; + display:block; +} +</style> +<script> +setup({explicit_done: true}); +function doTest() { + test(() => { + let target = document.querySelector("#target"); + assert_equals(target.offsetWidth, target.offsetHeight); + assert_equals(target.offsetWidth, target.parentNode.offsetWidth); + assert_equals(target.offsetHeight, target.parentNode.offsetHeight); + }, '#target offsetSize matches #container offsetSize' ); + test(() => { + document.querySelector("#container").style.height = "100px"; + let target = document.querySelector("#target"); + assert_equals(target.offsetWidth, target.offsetHeight); + assert_equals(target.offsetWidth, target.parentNode.offsetWidth); + assert_equals(target.offsetHeight, target.parentNode.offsetHeight); + }, '#target offsetSize matches #container offsetSize after resize' ); + done(); +} +</script> +<body onload="doTest()"> +<div id="outer"> + <div id="container"> + <img id="target" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/percentage-height-replaced-content-in-auto-cb.html b/testing/web-platform/tests/css/css-sizing/percentage-height-replaced-content-in-auto-cb.html new file mode 100644 index 0000000000..c63c490c37 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/percentage-height-replaced-content-in-auto-cb.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#preferred-size-properties"> +<p>Test passes if there is a green square below.</p> +<body onload="checkLayout('img')"> + <div> + <img id="img" data-expected-height="100" style="width: 100px; height: 100%"> + </div> + <script> + img.src = "/css/support/60x60-green.png?" + Math.random(); + img.offsetTop; + </script> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/percentage-min-width.html b/testing/web-platform/tests/css/css-sizing/percentage-min-width.html new file mode 100644 index 0000000000..11c34eafc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/percentage-min-width.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="container" data-expected-width="100" style="width:fit-content; min-width:100px; height:100px; background:red;"> + <div data-expected-width="100" style="width:fit-content; min-width:100%; height:100px; background:green;"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1-ref.html b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1-ref.html new file mode 100644 index 0000000000..3bacd9e4b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1-ref.html @@ -0,0 +1,152 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: INPUT type=range percent intrinsic inline-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { margin: 2px; } + +input.i { + min-width: 0; + background: lime; +} + +input.mi { + min-width: 0; + max-width: 100%; + width: max-content; + background: lime; +} + +.n { + -webkit-appearance: none; +} + +div { + display: inline-block; + border:1px solid; +} + +.grid { + display: inline-grid; + grid: auto / min-content; + place-items: start; +} + +.outerFlex { + display: flex; + width: 100px; + border: 1px solid black; +} +.innerFlex { + display: grid; + border: 1px solid pink; +} +.innerFlex > input { + min-width: 0; + justify-self: stretch; + background: yellow; + -moz-appearance: none; + -webkit-appearance: none; +} + +</style></head><body> + +<div style="width:30px"><div style="width:28px"> + <input type="range" class="i" style="width:14px; margin-right:0"> +</div></div> + +<div style="width:200px"><div style=""> + <input type="range" class="i" style="max-width:50%"> +</div></div> + +<div class="grid" style="grid-template-columns:30px"> + <input type="range" class="i" style="width:15px"> +</div> + +<div class="grid" style="grid-template-columns:30px"> + <input type="range" class="i" style="width:15px"> +</div> + +<div class="grid" style="grid-template-columns:30px"> + <input type="range" class="i min-auto" style="width:15px"> +</div> + +<div style="width:30px"><div style="width:28px;"> + <input type="range" class="i n" style="width:14px; margin-right:0"> +</div></div> + +<div class="grid" style="grid-template-columns:30px"> + <input type="range" class="i n" style="width:15px"> +</div> + +<div class="grid" style="grid-template-columns:30px"> + <input type="range" class="i n" style="width:15px"> +</div> + +<div class="grid" style="grid-template-columns:30px"> + <input type="range" class="i n min-auto" style="width:15px"> +</div> + +<br> +<br> + +<div style="width:30px"><div> + <input type="range" class="mi"> +</div></div> + +<div class="grid"> + <input type="range" class="mi"> +</div> + +<div class="grid" style="grid-template-columns:minmax(min-content,30px)"> + <input type="range" class="mi"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="mi"> +</div> + +<div style="width:30px"><div> + <input type="range" class="mi n"> +</div></div> + +<div style="width:30px"><div style="width:max-content"> + <input type="range" class="mi n" style="width:50%"> +</div></div> + +<div class="grid"> + <input type="range" class="mi n"> +</div> + +<div class="grid" style="grid-template-columns:minmax(min-content,30px)"> + <input type="range" class="mi n"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="mi n"> +</div> + +<div class="grid" style="width:30px; grid-template-columns:15px"> + <input type="range" class="mi n min-auto"> +</div> + +<br> +<br> + +<div class="outerFlex"> + <div class="innerFlex"> + <input type="range"> + </div> + abc +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1.html b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1.html new file mode 100644 index 0000000000..cae1c96eb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1.html @@ -0,0 +1,159 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: INPUT type=range percent intrinsic inline-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero"> + <link rel="match" href="range-percent-intrinsic-size-1-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { margin: 2px; } + +input.i { + width: 50%; + min-width: min-content; + background: lime; +} + +input.mi { + max-width: 50%; + min-width: min-content; + background: lime; +} + +input.i.min-auto, input.mi.min-auto { + min-width: auto; +} + +.n { + -webkit-appearance: none; +} + +div { + display: inline-block; + border:1px solid; +} + +.grid { + display: inline-grid; + grid: auto / min-content; + place-items: start; +} + +.outerFlex { + display: flex; + width: 100px; + border: 1px solid black; +} +.innerFlex { + display: flex; + border: 1px solid pink; +} +.innerFlex > input { + width: 50%; + flex: 1; + background: yellow; + -moz-appearance: none; + -webkit-appearance: none; +} + +</style></head><body> + +<div style="width:30px"><div> + <input type="range" class="i"> +</div></div> + +<div style="width:200px"><div> + <input type="range" class="i"> +</div></div> + +<div class="grid" style="grid-template-columns:minmax(min-content,30px)"> + <input type="range" class="i"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="i"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="i min-auto"> +</div> + +<div style="width:30px"><div> + <input type="range" class="i n"> +</div></div> + +<div class="grid" style="grid-template-columns:minmax(min-content,30px)"> + <input type="range" class="i n"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="i n"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="i n min-auto"> +</div> + +<br> +<br> + +<div style="width:30px"><div> + <input type="range" class="mi"> +</div></div> + +<div class="grid"> + <input type="range" class="mi"> +</div> + +<div class="grid" style="grid-template-columns:minmax(min-content,30px)"> + <input type="range" class="mi"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="mi"> +</div> + +<div style="width:30px"><div> + <input type="range" class="mi n"> +</div></div> + +<div style="width:30px"><div> + <input type="range" class="mi n min-auto"> +</div></div> + +<div class="grid"> + <input type="range" class="mi n"> +</div> + +<div class="grid" style="grid-template-columns:minmax(min-content,30px)"> + <input type="range" class="mi n"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="mi n"> +</div> + +<div class="grid" style="grid-template-columns:minmax(auto,30px)"> + <input type="range" class="mi n min-auto"> +</div> + +<br> +<br> + +<div class="outerFlex"> + <div class="innerFlex"> + <input type="range"> + </div> + abc +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2-ref.html b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2-ref.html new file mode 100644 index 0000000000..d98c822016 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2-ref.html @@ -0,0 +1,141 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: INPUT type=range percent intrinsic block-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { margin: 2px; } + +input.b { + min-height: 0; + background: lime; +} + +input.mb { + min-height: 0; + max-height: 100%; + background: lime; +} + +.n { + -webkit-appearance: none; +} + +div { + display: inline-block; + border:1px solid; +} + +.grid { + display: inline-grid; + grid: auto / min-content; + place-items: start; +} +input[orient="vertical"] { + -webkit-appearance: slider-vertical; + -webkit-appearance: range; + appearance: auto; +} + +</style></head><body> + +<div style="height:30px"><div> + <input type="range" class="b" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div style="height:30px"><div> + <input type="range" class="b n" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<br> +<br> + +<div style="height:30px"><div> + <input type="range" class="mb" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div style="height:30px"><div> + <input type="range" class="mb n" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2.html b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2.html new file mode 100644 index 0000000000..afade475b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2.html @@ -0,0 +1,144 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: INPUT type=range percent intrinsic block-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero"> + <link rel="match" href="range-percent-intrinsic-size-2-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { margin: 2px; } + +input.b { + height: 50%; + min-height: min-content; + background: lime; +} + +input.mb { + max-height: 50%; + min-height: min-content; + background: lime; +} + +input.b.min-auto, input.mb.min-auto { + min-height: auto; +} + +.n { + -webkit-appearance: none; +} + +div { + display: inline-block; + border:1px solid; +} + +.grid { + display: inline-grid; + grid: auto / min-content; + place-items: start; +} +input[orient="vertical"] { + -webkit-appearance: slider-vertical; + -webkit-appearance: range; + appearance: auto; +} + +</style></head><body> + +<div style="height:30px"><div> + <input type="range" class="b" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="b" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="b min-auto" orient="vertical"> +</div> + +<div style="height:30px"><div> + <input type="range" class="b n" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="b n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="b n min-auto" orient="vertical"> +</div> + + +<br> +<br> + +<div style="height:30px"><div> + <input type="range" class="mb" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="mb" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="mb" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="mb" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="mb min-auto" orient="vertical"> +</div> + + +<div style="height:30px"><div> + <input type="range" class="mb n" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="mb n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="mb n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="mb n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="mb n min-auto" orient="vertical"> +</div> + + +</body></html> diff --git a/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2a-ref.html b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2a-ref.html new file mode 100644 index 0000000000..11afa34a65 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2a-ref.html @@ -0,0 +1,83 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: INPUT type=range percent intrinsic block-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { margin: 2px; } + +input.b { + min-height: 0; + background: lime; +} + +input.mb { + min-height: 0; + max-height: 100%; + background: lime; +} + +div { + display: inline-block; + border:1px solid; +} + +.grid { + display: inline-grid; + grid: auto / min-content; + place-items: start; +} + +</style></head><body> + +<div style="height:30px"><div> + <input type="range" class="b" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<br> +<br> + +<div style="height:30px"><div> + <input type="range" class="mb" orient="vertical"> +</div></div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2a.html b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2a.html new file mode 100644 index 0000000000..9675a0c953 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-2a.html @@ -0,0 +1,88 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: INPUT type=range percent intrinsic block-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero"> + <link rel="match" href="range-percent-intrinsic-size-2a-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { margin: 2px; } + +input.b { + height: 50%; + min-height: min-content; + background: lime; +} + +input.mb { + max-height: 50%; + min-height: min-content; + background: lime; +} + +input.b.min-auto, input.mb.min-auto { + min-height: auto; +} + +div { + display: inline-block; + border:1px solid; +} + +.grid { + display: inline-grid; + grid: auto / min-content; + place-items: start; +} + +</style></head><body> + +<div style="height:30px"><div> + <input type="range" class="b" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="b" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="b min-auto" orient="vertical"> +</div> + +<br> +<br> + +<div style="height:30px"><div> + <input type="range" class="mb" orient="vertical"> +</div></div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="mb" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="mb" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="mb min-auto" orient="vertical"> +</div> + +</body></html> diff --git a/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-intrinsic-size-001.html b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-intrinsic-size-001.html new file mode 100644 index 0000000000..8c1f213dec --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-intrinsic-size-001.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta name="assert" + content="Checks that a replaced element, with an aspect ratio, applies min/max block lengths for intrinsic sizing when width:max-content is specified."> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<img src="aspect-ratio/support/1x1-green.png" style="min-height: 100px; width: + max-content;"></img> diff --git a/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-intrinsic-size-002.html b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-intrinsic-size-002.html new file mode 100644 index 0000000000..daf6f36022 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-intrinsic-size-002.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta name="assert" + content="Checks that a replaced element, with an aspect ratio, applies min/max block lengths for intrinsic sizing when it's a float."> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<img src="aspect-ratio/support/1x1-green.png" style="min-height: 100px; float: left;"></img> diff --git a/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-001.html b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-001.html new file mode 100644 index 0000000000..0653c8284a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-001.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, applies min/max block lengths for stretch-fit sizing."> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 50px;"> + <svg viewBox="0 0 2 1" style="background: green; max-width: 100px; min-height: 100px;"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-002.html b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-002.html new file mode 100644 index 0000000000..2be6700047 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, applies min/max block lengths for stretch-fit sizing."> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 50px;"> + <svg viewBox="0 0 1 1" style="background: green; min-height: 100px;"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-003.html b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-003.html new file mode 100644 index 0000000000..06dac275ca --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/replaced-aspect-ratio-stretch-fit-003.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta name="assert" content="Checks that a replaced element, with an aspect ratio, doesn't apply min/max inline lengths for max-content sizing."> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px;"> + <svg viewBox="0 0 1 1" style="background: green; min-width: max-content; max-width: 50px;"></svg> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio-2.html b/testing/web-platform/tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio-2.html new file mode 100644 index 0000000000..cc04b44c26 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio-2.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1239395"> +<meta name="assert" content="The height of a replaced element can depend on the default natural width 300." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id=log></div> +<!-- 915977 = 299013.12 * (919 / 300) --> +<canvas height="919" style="width:299013.12px" data-expected-height="915977"></canvas> + +<script> +checkLayout('canvas'); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio.html b/testing/web-platform/tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio.html new file mode 100644 index 0000000000..d97c3f133e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1052370" > +<meta name="assert" content="When determining the size of a replaced element, if it has an aspect ratio of 1/1 then the final height should be exactly equal to its width." /> +<script src="../../resources/check-layout.js"></script> +<style> +canvas { + float: left; + background: green; +} +</style> +<div style="position: relative; width: 254px; zoom: 0.8;"> + <canvas style="width: 30%;" width="1" height="1"></canvas> + <canvas style="width: 30%;" width="708" height="708"></canvas> + <canvas id="target" style="width: 60%;" width="2" height="1" data-offset-x="0"></canvas> +</div> +<script> +checkLayout('#target'); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/replaced-max-size-saturation.html b/testing/web-platform/tests/css/css-sizing/replaced-max-size-saturation.html new file mode 100644 index 0000000000..16765fba78 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/replaced-max-size-saturation.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1243158"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This test checks that saturation doesn't occur when comparing constrained sizes."> +<p>Test passes if there is a filled green square.</p> +<canvas width=8000 height=8000 style="max-width: 120px; max-height: 100px; background: green;"></canvas> diff --git a/testing/web-platform/tests/css/css-sizing/slice-intrinsic-size-ref.html b/testing/web-platform/tests/css/css-sizing/slice-intrinsic-size-ref.html new file mode 100644 index 0000000000..ca4887af7a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/slice-intrinsic-size-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<head> + <title>CSS Reference: min/max-content size on box-decoration-break:slice inline box</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: pre; +} +.max > div { + width: max-content; +} +.min > div { + width: min-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div><span>aaa</span><span>aaa</span></div> +<div><span>aaa</span>aa<span>aaa</span></div> +<div><span>aaa</span> <span>aaa</span></div> +<div><span>aaa </span><span>aaa</span></div> +<div><span>aaa</span><span> aaa</span></div> +<div><span>aaa</span> aa<span>aaa</span></div> +<div><span>aaa </span>aa<span>aaa</span></div> +<div><span>aaa</span>aa<span> aaa</span></div> +<div><span>aaa</span> aa <span>aaa</span></div> +<div><span>aaa</span>aa <span>aaa</span></div> +<div><span>aaa</span>aa</div> +</f> + +<f class="min"> +<div><span>aaa</span><span>aaa</span></div> +<div><span>aaa</span>aa<span>aaa</span></div> +<div><span>aaa</span><br><span>aaa</span></div> +<div><span>aaa</span><br><span>aaa</span></div> +<div><span>aaa</span><span><br>aaa</span></div> +<div><span>aaa</span><br>aa<span>aaa</span></div> +<div><span>aaa</span><br>aa<span>aaa</span></div> +<div><span>aaa</span>aa<span><br>aaa</span></div> +<div><span>aaa</span><br>aa<br><span>aaa</span></div> +<div><span>aaa</span>aa<br><span>aaa</span></div> +<div><span>aaa</span>aa</div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/slice-intrinsic-size.html b/testing/web-platform/tests/css/css-sizing/slice-intrinsic-size.html new file mode 100644 index 0000000000..05ce6e4630 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/slice-intrinsic-size.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<head> + <title>CSS Test: min/max-content size on box-decoration-break:slice inline box</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"> + <link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1552357"> + <link rel="match" href="slice-intrinsic-size-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; +} +.max > div { + width: max-content; +} +.min > div { + width: min-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; + /* for clarity: */ + -webkit-box-decoration-break: slice; + box-decoration-break: slice; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div> + <span>aaa</span><span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span> <span>aaa</span> +</div> +<div> + <span>aaa </span><span>aaa</span> +</div> +<div> + <span>aaa</span><span> aaa</span> +</div> +<div> + <span>aaa</span> aa<span>aaa</span> +</div> +<div> + <span>aaa </span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span> aaa</span> +</div> +<div> + <span>aaa</span> aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa </div> +</f> + +<f class="min"> +<div> + <span>aaa</span><span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span> <span>aaa</span> +</div> +<div> + <span>aaa </span><span>aaa</span> +</div> +<div> + <span>aaa</span><span> aaa</span> +</div> +<div> + <span>aaa</span> aa<span>aaa</span> +</div> +<div> + <span>aaa </span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span> aaa</span> +</div> +<div> + <span>aaa</span> aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa </div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-bidi-ref.html b/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-bidi-ref.html new file mode 100644 index 0000000000..d6d91eac33 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-bidi-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<head> + <title>CSS Reference: min/max-content size on box-decoration-break:slice inline box with bidi text and white-space:nowrap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: pre; +} +.max > div { + width: max-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; +} + +f { margin-right: 30px; float: left; } +.l { margin-right:0; border-right-width:0; padding-right:0 } +.r { margin-left:0; border-left-width:0; padding-left:0 } +</style> +<body> +<f class="max"> +<div><span>‮a‭bc</span><span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc </span><span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span><span> d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc </span>aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa<span> d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> aa <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa</div> +</f> + +<f class="max"> +<div><span>‮a‭bc</span><span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc </span><span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span><span> d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc </span>aa<span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa<span> d‮e‭f</span> +</div> +<div><span>‮a‭bc</span> aa <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa <span>d‮e‭f</span> +</div> +<div><span>‮a‭bc</span>aa</div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-bidi.html b/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-bidi.html new file mode 100644 index 0000000000..4e45cf147b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-bidi.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<head> + <title>CSS Test: min/max-content size on box-decoration-break:slice inline box with bidi text and white-space:nowrap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"> + <link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556709"> + <link rel="match" href="slice-nowrap-intrinsic-size-bidi-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: nowrap; +} +.max > div { + width: max-content; +} +.min > div { + width: min-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div> + <span>‮a‭bc</span><span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc </span><span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span><span> d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc </span>aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa<span> d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> aa <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa </div> +</f> + +<f class="min"> +<div> + <span>‮a‭bc</span><span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc </span><span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span><span> d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc </span>aa<span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa<span> d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span> aa <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa <span>d‮e‭f</span> +</div> +<div> + <span>‮a‭bc</span>aa </div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-ref.html b/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-ref.html new file mode 100644 index 0000000000..40b0c862ae --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<head> + <title>CSS Reference: min/max-content size on box-decoration-break:slice inline box w. white-space:nowrap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: pre; +} +.max > div { + width: max-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div><span>aaa</span><span>aaa</span></div> +<div><span>aaa</span>aa<span>aaa</span></div> +<div><span>aaa</span> <span>aaa</span></div> +<div><span>aaa </span><span>aaa</span></div> +<div><span>aaa</span><span> aaa</span></div> +<div><span>aaa</span> aa<span>aaa</span></div> +<div><span>aaa </span>aa<span>aaa</span></div> +<div><span>aaa</span>aa<span> aaa</span></div> +<div><span>aaa</span> aa <span>aaa</span></div> +<div><span>aaa</span>aa <span>aaa</span></div> +<div><span>aaa</span>aa</div> +</f> + +<f class="max"> +<div><span>aaa</span><span>aaa</span></div> +<div><span>aaa</span>aa<span>aaa</span></div> +<div><span>aaa</span> <span>aaa</span></div> +<div><span>aaa </span><span>aaa</span></div> +<div><span>aaa</span><span> aaa</span></div> +<div><span>aaa</span> aa<span>aaa</span></div> +<div><span>aaa </span>aa<span>aaa</span></div> +<div><span>aaa</span>aa<span> aaa</span></div> +<div><span>aaa</span> aa <span>aaa</span></div> +<div><span>aaa</span>aa <span>aaa</span></div> +<div><span>aaa</span>aa</div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size.html b/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size.html new file mode 100644 index 0000000000..6ec41d099e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/slice-nowrap-intrinsic-size.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<head> + <title>CSS Test: min/max-content size on box-decoration-break:slice inline box w. white-space:nowrap</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content"> + <link rel="help" href="https://drafts.csswg.org/css-break-3/#break-decoration"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556709"> + <link rel="match" href="slice-nowrap-intrinsic-size-ref.html"> +<style> +html,body { + color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; +} + +div { + border: 5px solid blue; + white-space: nowrap; +} +.max > div { + width: max-content; +} +.min > div { + width: min-content; +} + +span { + border: 2px solid gray; + padding: 0 10px 0 6px; + border-width: 0 8px 0 5px; + margin: 0 4px 0 3px; + background: yellow; + /* for clarity: */ + -webkit-box-decoration-break: slice; + box-decoration-break: slice; +} + +f { margin-right: 30px; float: left; } +</style> +<body> +<f class="max"> +<div> + <span>aaa</span><span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span> <span>aaa</span> +</div> +<div> + <span>aaa </span><span>aaa</span> +</div> +<div> + <span>aaa</span><span> aaa</span> +</div> +<div> + <span>aaa</span> aa<span>aaa</span> +</div> +<div> + <span>aaa </span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span> aaa</span> +</div> +<div> + <span>aaa</span> aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa </div> +</f> + +<f class="min"> +<div> + <span>aaa</span><span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span> <span>aaa</span> +</div> +<div> + <span>aaa </span><span>aaa</span> +</div> +<div> + <span>aaa</span><span> aaa</span> +</div> +<div> + <span>aaa</span> aa<span>aaa</span> +</div> +<div> + <span>aaa </span>aa<span>aaa</span> +</div> +<div> + <span>aaa</span>aa<span> aaa</span> +</div> +<div> + <span>aaa</span> aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa <span>aaa</span> +</div> +<div> + <span>aaa</span>aa </div> +</f> diff --git a/testing/web-platform/tests/css/css-sizing/support/dynamic-available-size-iframe.html b/testing/web-platform/tests/css/css-sizing/support/dynamic-available-size-iframe.html new file mode 100644 index 0000000000..8b61c87638 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/dynamic-available-size-iframe.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<style> +body { margin: 0; } +.parent { + position: relative; + display: flex; + width: 100%; + height: 100px; + background: red; +} + +.content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + width: 100px; + height: 100px; + background: green; +} + +svg { + width: 50px; + height: 50px; +} +</style> +<div class="parent"> + <div class="content"> + <svg xmlns="http://www.w3.org/2000/svg"></svg> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/support/min-content-max-content.css b/testing/web-platform/tests/css/css-sizing/support/min-content-max-content.css new file mode 100644 index 0000000000..60947153b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/min-content-max-content.css @@ -0,0 +1,107 @@ +/* + * All classes here intentionally declare height/width/block-size + * twice. Just reveals if keyword is supported. + * + * According to the spec, for the sizing properties, + * height/min-height/max-height, and width/min-width/max-width, + * if specified for the inline axis, use the min-content/max-content inline + * size; otherwise behaves as the property’s initial value. + * + * The 'block-size' property (and its max-/min- properties) is just an alias + * for height (or width) and accepts the same values. Since it's not + * inline-axis, by definition, it always treats the 'min-content' and + * 'max-content' values as the initial value. + * + * https://drafts.csswg.org/css-sizing/#sizing-values + * + */ + +.height-min-content { + height: 0px; + height: min-content; +} + +.height-max-content { + height: 0px; + height: max-content; +} + +.min-height-min-content { + min-height: 600px; + min-height: min-content; +} + +.min-height-max-content { + min-height: 600px; + min-height: max-content; +} + +.max-height-min-content { + max-height: 0px; + max-height: min-content; +} + +.max-height-max-content { + max-height: 0px; + max-height: max-content; +} + +.width-min-content { + width: 0px; + width: min-content; +} + +.width-max-content { + width: 0px; + width: max-content; +} + +.min-width-min-content { + min-width: 600px; + min-width: min-content; +} + +.min-width-max-content { + min-width: 600px; + min-width: max-content; +} + +.max-width-min-content { + max-width: 0px; + max-width: min-content; +} + +.max-width-max-content { + max-width: 0px; + max-width: max-content; +} + +.block-min-content { + block-size: 0px; + block-size: min-content; +} + +.block-max-content { + block-size: 0px; + block-size: max-content; +} + +.min-block-min-content { + min-block-size: 600px; + min-block-size: min-content; +} + +.min-block-max-content { + min-block-size: 600px; + min-block-size: max-content; +} + +.max-block-min-content { + max-block-size: 0px; + max-block-size: min-content; +} + +.max-block-max-content { + max-block-size: 0px; + max-block-size: max-content; +} diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-1.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-1.png Binary files differnew file mode 100644 index 0000000000..d6946724d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-1.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-10.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-10.png Binary files differnew file mode 100644 index 0000000000..bfdca3e6f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-10.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-11.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-11.png Binary files differnew file mode 100644 index 0000000000..38ee90dda0 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-11.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-12.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-12.png Binary files differnew file mode 100644 index 0000000000..87433d4d7b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-12.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-13.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-13.png Binary files differnew file mode 100644 index 0000000000..c07d66e788 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-13.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-14.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-14.png Binary files differnew file mode 100644 index 0000000000..e89dbe9758 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-14.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-15.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-15.png Binary files differnew file mode 100644 index 0000000000..717ea111b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-15.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-16.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-16.png Binary files differnew file mode 100644 index 0000000000..0a49bbf1c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-16.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-17.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-17.png Binary files differnew file mode 100644 index 0000000000..a2ee273d79 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-17.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-18.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-18.png Binary files differnew file mode 100644 index 0000000000..d18f453417 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-18.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-19.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-19.png Binary files differnew file mode 100644 index 0000000000..8900f36c41 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-19.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-2.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-2.png Binary files differnew file mode 100644 index 0000000000..58338097fe --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-2.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-3.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-3.png Binary files differnew file mode 100644 index 0000000000..e5e7d6e8a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-3.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-4.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-4.png Binary files differnew file mode 100644 index 0000000000..c099ae4271 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-4.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-5.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-5.png Binary files differnew file mode 100644 index 0000000000..9d9d8105ff --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-5.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-6.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-6.png Binary files differnew file mode 100644 index 0000000000..781f894a5e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-6.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-7.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-7.png Binary files differnew file mode 100644 index 0000000000..3f91a11f8e --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-7.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-8.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-8.png Binary files differnew file mode 100644 index 0000000000..69951ec257 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-8.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-9.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-9.png Binary files differnew file mode 100644 index 0000000000..3ac586daa5 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max-9.png diff --git a/testing/web-platform/tests/css/css-sizing/support/replaced-min-max.png b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max.png Binary files differnew file mode 100644 index 0000000000..3ef233005a --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/support/replaced-min-max.png diff --git a/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-001.html b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-001.html new file mode 100644 index 0000000000..c0ba59819b --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.flexbox { + display: flex; + width: 600px; + border: 2px solid black; +} +svg { + background: teal; + flex: none; +} +</style> + +<body onload="checkLayout('svg')"> + No intrinsic attributes: + <div class="flexbox"> + <svg data-expected-client-width="300" data-expected-client-height="150"></svg> + </div> + + viewBox and height: + <div class="flexbox"> + <svg height="40" viewBox="0 0 4 1" + data-expected-client-width="160" data-expected-client-height="40"></svg> + </div> + + viewBox and width: + <div class="flexbox"> + <svg width="40" viewBox="0 0 4 1" + data-expected-client-width="40" data-expected-client-height="10"></svg> + </div> + + viewBox, width, height: + <div class="flexbox"> + <svg width="40" height="40" viewBox="0 0 4 1" + data-expected-client-width="40" data-expected-client-height="40"></svg> + </div> + + Just viewBox: + <div class="flexbox"> + <svg viewBox="0 0 4 1" + data-expected-client-width="600" data-expected-client-height="150"></svg> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-002.html b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-002.html new file mode 100644 index 0000000000..19ec3df87c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-002.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.block { + display: block; + width: 600px; + border: 2px solid black; + line-height: 0; +} +svg { + background: teal; +} +</style> + +<body onload="checkLayout('svg')"> + No intrinsic attributes: + <div class="block"> + <svg data-expected-client-width="300" data-expected-client-height="150"></svg> + </div> + + viewBox and height: + <div class="block"> + <svg height="40" viewBox="0 0 4 1" + data-expected-client-width="160" data-expected-client-height="40"></svg> + </div> + + viewBox and width: + <div class="block"> + <svg width="40" viewBox="0 0 4 1" + data-expected-client-width="40" data-expected-client-height="10"></svg> + </div> + + viewBox, width, height: + <div class="block"> + <svg width="40" height="40" viewBox="0 0 4 1" + data-expected-client-width="40" data-expected-client-height="40"></svg> + </div> + + Just viewBox: + <div class="block"> + <svg viewBox="0 0 4 1" + data-expected-client-width="600" data-expected-client-height="150"></svg> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-003.html b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-003.html new file mode 100644 index 0000000000..cf9515308d --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-003.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.block { + display: block; + width: 600px; + border: 2px solid black; + line-height: 0; +} +svg { + background: teal; + width: max-content; +} +</style> + +<body onload="checkLayout('svg')"> + No intrinsic attributes: + <div class="block"> + <svg data-expected-client-width="300" data-expected-client-height="150"></svg> + </div> + + viewBox and height: + <div class="block"> + <svg height="40" viewBox="0 0 4 1" + data-expected-client-width="160" data-expected-client-height="40"></svg> + </div> + + viewBox and width: + <div class="block"> + <svg width="40" viewBox="0 0 4 1" + data-expected-client-width="40" data-expected-client-height="10"></svg> + </div> + + viewBox, width, height: + <div class="block"> + <svg width="40" height="40" viewBox="0 0 4 1" + data-expected-client-width="40" data-expected-client-height="40"></svg> + </div> + + Just viewBox: + <div class="block"> + <svg viewBox="0 0 4 1" + data-expected-client-width="600" data-expected-client-height="150"></svg> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-004.html b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-004.html new file mode 100644 index 0000000000..7db9495515 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-004.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.block { + display: block; + width: max-content; + border: 2px solid black; + line-height: 0; +} +svg { + background: teal; +} +</style> + +<body onload="checkLayout('svg')"> + No intrinsic attributes: + <div class="block"> + <svg data-expected-client-width="300" data-expected-client-height="150"></svg> + </div> + + viewBox and height: + <div class="block"> + <svg height="40" viewBox="0 0 4 1" + data-expected-client-width="160" data-expected-client-height="40"></svg> + </div> + + viewBox and width: + <div class="block"> + <svg width="40" viewBox="0 0 4 1" + data-expected-client-width="40" data-expected-client-height="10"></svg> + </div> + + viewBox, width, height: + <div class="block"> + <svg width="40" height="40" viewBox="0 0 4 1" + data-expected-client-width="40" data-expected-client-height="40"></svg> + </div> + + Just viewBox: + <div class="block"> + <!-- Google Chrome 107 and Safari 16.0 both render this SVG as size 0x0. --> + <svg viewBox="0 0 4 1" + data-expected-client-width="0" data-expected-client-height="0"></svg> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-005-ref.html b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-005-ref.html new file mode 100644 index 0000000000..1d64836f88 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-005-ref.html @@ -0,0 +1,9 @@ +<!doctype html> + +<title>CSS Reference: CSS-specified vs. attribute-specified percentages in SVG intrinsic sizing</title> + +<div style="width: max-content; height: 50px"> + <svg width="100%" height="100%" style="display: block"> + <rect width="200" height="200" fill="green"/> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-005.html b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-005.html new file mode 100644 index 0000000000..68be3f2e11 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-005.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> + +<title>CSS Test: CSS-specified vs. attribute-specified percentages in SVG intrinsic sizing</title> + +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1790167"> +<link rel="match" href="svg-intrinsic-size-005-ref.html"> + +<div style="width: max-content; height: 50px"> + <svg style="width: 100%; height: 100%; display: block"> + <rect width="200" height="200" fill="green"/> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-006-ref.html b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-006-ref.html new file mode 100644 index 0000000000..4e164672e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-006-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference: Test SVG intrinsic sizing with and without preferred aspect-ratio</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1801581"> + +<style> +div { + width: 300px; + height: 30px; + background: green; + line-height: 0; + border: 5px solid black; + margin: 5px; +} +</style> + +<!-- Chrome 110 and Safari 16.4 render these two divs with zero width. --> +<div style="width: 0; height: 0"></div> +<div style="width: 0; height: 0"></div> + +<!-- Chrome 110 and Safari 16.4 render the following divs with 300px width. --> +<div style="width: 300px; height: 150px"></div> +<div></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-006.html b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-006.html new file mode 100644 index 0000000000..b136c0198c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/svg-intrinsic-size-006.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Test SVG intrinsic sizing with and without preferred aspect-ratio</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1801581"> +<link rel="match" href="svg-intrinsic-size-006-ref.html"> + +<style> +div { + width: max-content; + background: green; + line-height: 0; + border: 5px solid black; + margin: 5px; +} +svg { + vertical-align: top; +} +</style> + +<!-- Chrome 110 and Safari 16.4 render these two divs with zero width. --> +<div><svg viewBox="0 0 1 1"></svg></div> +<div><svg style="aspect-ratio: 1/1;"></svg></div> + +<!-- Chrome 110 and Safari 16.4 render the following divs with 300px width. --> +<div><svg></svg></div> +<div><svg style="width: 10%" viewBox="0 0 1 1"></svg></div> +<div><svg width="10%" viewBox="0 0 1 1"></svg></div> +<div><svg style="width: 10%; aspect-ratio: 1/1"></svg></div> +<div><svg width="10%" style="aspect-ratio: 1/1"></svg></div> diff --git a/testing/web-platform/tests/css/css-sizing/table-child-percentage-height-with-border-box-expected.html b/testing/web-platform/tests/css/css-sizing/table-child-percentage-height-with-border-box-expected.html new file mode 100644 index 0000000000..b9d2418b18 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/table-child-percentage-height-with-border-box-expected.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test if percentage height of table's child element with box-sizing: border-box is calculated correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#box-sizing"> +<style> + html { + height: 100%; + width: 100%; + } + body { + box-sizing: border-box; + margin: 0 auto; + width: 100%; + height: 100%; + } + .content { + box-sizing: border-box; + width: 100%; + height: 100%; + background-color: red; + } + .wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + background-color: green; + padding-top: 100px; + } +</style> +<body> + <div class="content"> + <div class="wrapper"> + wrapped content (height: 100%) + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/table-child-percentage-height-with-border-box.html b/testing/web-platform/tests/css/css-sizing/table-child-percentage-height-with-border-box.html new file mode 100644 index 0000000000..7700b00dc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/table-child-percentage-height-with-border-box.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test if percentage height of table's child element with box-sizing: border-box is calculated correctly</title> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#box-sizing"> +<link rel="match" href="table-child-percentage-height-with-border-box-expected.html"> +<style> + html { + height: 100%; + width: 100%; + } + body { + box-sizing: border-box; + display: table; + margin: 0 auto; + width: 100%; + height: 100%; + } + .content { + box-sizing: border-box; + display: table-row; + width: 100%; + height: 100%; + background-color: red; + } + .wrapper { + box-sizing: border-box; + width: 100%; + height: 100%; + background-color: green; + padding-top: 100px; + } +</style> +<body> + <div class="content"> + <div class="wrapper"> + wrapped content (height: 100%) + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-sizing/table-percentage-max-width-beside-float.html b/testing/web-platform/tests/css/css-sizing/table-percentage-max-width-beside-float.html new file mode 100644 index 0000000000..be82ac0da6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/table-percentage-max-width-beside-float.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#available"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#percentage-sizing"> +<p>There should be a green square below, and no red.</p> +<div id="container" style="width:100px; background:red;"> + <div style="float:right; width:50px; height:100px; background:green;"></div> + <div style="display:table; max-width:50%; height:100px; background:green;" data-expected-width="50"> + <div style="float:left; width:20px; height:10px;"></div> + <div style="float:left; width:20px; height:10px;"></div> + <div style="float:left; width:20px; height:10px;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/table-percentage-min-width-below-float.html b/testing/web-platform/tests/css/css-sizing/table-percentage-min-width-below-float.html new file mode 100644 index 0000000000..400a87dd17 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/table-percentage-min-width-below-float.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#available"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#percentage-sizing"> +<p>There should be a blue square below.</p> +<div id="container" style="width:100px;"> + <div style="float:right; width:50px; height:10px;"></div> + <div style="display:table; width:10px; min-width:100%; height:100px; background:blue;" data-expected-width="100"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/table-percentage-min-width-beside-float.html b/testing/web-platform/tests/css/css-sizing/table-percentage-min-width-beside-float.html new file mode 100644 index 0000000000..d763c92701 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/table-percentage-min-width-beside-float.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#available"> +<link rel="help" href="https://drafts.csswg.org/css-sizing/#percentage-sizing"> +<p>There should be a green square below, and no red.</p> +<div id="container" style="width:100px; background:red;"> + <div style="float:right; width:50px; height:100px; background:green;"></div> + <div style="display:table; width:10px; min-width:50%; height:100px; background:green;" data-expected-width="50"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/css-sizing/textarea-large-padding-crash.html b/testing/web-platform/tests/css/css-sizing/textarea-large-padding-crash.html new file mode 100644 index 0000000000..b156c55b97 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/textarea-large-padding-crash.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289408"> +<textarea style="padding:12345967890px;"></textarea> diff --git a/testing/web-platform/tests/css/css-sizing/thin-element-render-ref.html b/testing/web-platform/tests/css/css-sizing/thin-element-render-ref.html new file mode 100644 index 0000000000..0d5851d554 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/thin-element-render-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Reference: Thin elements should paint even at small size</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<html> + <head> + <style> + .disappearing-border { + height:1px; + width:100%; + border-top:1px solid black; + } + + .disappearing-box { + height:1px; + width:100%; + background-color: black; + } + + body { + margin: 0px; + padding: 0px; + box-sizing: border-box; + } + </style> +</head> +<body> + <div class="disappearing-border"></div> + <div style="height:6.5px;"></div> + <div class="disappearing-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-sizing/thin-element-render.html b/testing/web-platform/tests/css/css-sizing/thin-element-render.html new file mode 100644 index 0000000000..fa587360a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/thin-element-render.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>Thin elements should still paint even at small size.</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords"> +<link rel="match" href="thin-element-render-ref.html"> +<html> + <head> + <style> + .disappearing-border { + height:0.25px; + width:100%; + border-top: 0.25px solid black; + } + + .disappearing-box { + height:0.25px; + width:100%; + background-color: black; + } + + body { + margin: 0px; + padding: 0px; + box-sizing: border-box; + } + </style> +</head> +<body> + <div class="disappearing-border"></div> + <div style="height:8px;"></div> + <div class="disappearing-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html new file mode 100644 index 0000000000..0a5de8da14 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Reference Case: Different values of block sizing properties in vertical wm + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <meta name="flags" content="ahem"> + <style> + html,body { + margin: 0; + } + + .container { + width: 200px; + height: 120px; + border-color: blue; + border: 2px solid blue; + writing-mode: vertical-lr; + } + + .container > * { + border: 2px solid lime; + font-size: 15px; + + font-family: Ahem; + font-size: 10px; + line-height: 15px; + } + + .too-small { + width: 10px; + } + + .too-big { + width: 120px; + } + </style> +</head> +<body> + <div style="display: inline-block;"> + <div class="container"> + <div>width: min-content<br>on this box.</div> + <div>width: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-small">min-width: min-content<br>on this box.</div> + <div class="too-small">min-width: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-big">max-width: min-content<br>on this box.</div> + <div class="too-big">max-width: max-content<br>on this box.</div> + </div> + </div> + + <div style="display: inline-block;"> + <div class="container"> + <div>block: min-content<br>on this box.</div> + <div>block: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-small">min-block: min-content<br>on this box.</div> + <div class="too-small">min-block: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-big">max-block: min-content<br>on this box.</div> + <div class="too-big">max-block: max-content<br>on this box.</div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1.html b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1.html new file mode 100644 index 0000000000..15fdaa9dac --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-1.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Test: Different values of block sizing properties with max-content and min-content in vertical wm + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + + .container { + width: 200px; + height: 120px; + border: 2px solid blue; + writing-mode: vertical-lr; + } + + .container > * { + border: 2px solid lime; + font-size: 15px; + + font-family: Ahem; + font-size: 10px; + line-height: 15px; + } + + .too-small { + width: 10px; + } + + .too-big { + width: 120px; + } + </style> +</head> +<body> + <div style="display: inline-block;"> + <div class="container"> + <div class="width-min-content">width: min-content<br>on this box.</div> + <div class="width-max-content">width: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-small min-width-min-content"> + min-width: min-content<br>on this box. + </div> + <div class="too-small min-width-max-content"> + min-width: max-content<br>on this box. + </div> + </div> + + <div class="container"> + <div class="too-big max-width-min-content"> + max-width: min-content<br>on this box. + </div> + + <div class="too-big max-width-max-content"> + max-width: max-content<br>on this box. + </div> + </div> + </div> + + <div style="display: inline-block;"> + <div class="container"> + <div class="block-min-content">block: min-content<br>on this box.</div> + <div class="block-max-content">block: max-content<br>on this box.</div> + </div> + + <div class="container"> + <div class="too-small min-block-min-content"> + min-block: min-content<br>on this box. + </div> + <div class="too-small min-block-max-content"> + min-block: max-content<br>on this box. + </div> + </div> + + <div class="container"> + <div class="too-big max-block-min-content"> + max-block: min-content<br>on this box. + </div> + + <div class="too-big max-block-max-content"> + max-block: max-content<br>on this box. + </div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html new file mode 100644 index 0000000000..5a170d5c4c --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Reference Case: Different values of width:auto container in vertical wm + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <meta name="flags" content="ahem"> + <style> + html,body { + margin: 0; + } + + .outer { + writing-mode: vertical-lr; + display: inline-block; + } + + .outer * { + border: 2px solid lime; + display: inline-block; + } + + .container { + height: 80px; + border-color: blue; + vertical-align: bottom; + + font-family: Ahem; + font-size: 8px; + line-height: 13px; + } + + .too-small { + width: 10px; + } + + .too-big { + width: 100px; + } + </style> +</head> +<body> +<div class="outer"> + <div class="container"> + <div>auto<br>container: min-content.</div> + <div>auto<br>container: min-content.</div> + </div> + <div class="container"> + <div class="too-small">10px<br>container: min-content.</div> + <div class="too-small">10px<br>container: min-content.</div> + </div> + <div class="container"> + <div class="too-big">150px<br>container: min-content.</div> + <div class="too-big">150px<br>container: min-content.</div> + </div> + + <div class="container"> + <div>auto<br>container: max-content.</div> + <div>auto<br>container: max-content.</div> + </div> + <div class="container"> + <div class="too-small">10px<br>container: max-content.</div> + <div class="too-small">10px<br>container: max-content.</div> + </div> + <div class="container"> + <div class="too-big">100px<br>container: max-content.</div> + <div class="too-big">100px<br>container: max-content.</div> + </div> +</div> + +<div class="outer"> + <div class="container"> + <div>auto<br>container: auto.</div> + <div>auto<br>container: auto.</div> + </div> + + <div class="container"> + <div class="too-small">10px<br>container min-size: min-content.</div> + <div class="too-small">10px<br>container min-size: min-content.</div> + </div> + + <div class="container"> + <div class="too-small">10px<br>container min-size: max-content.</div> + <div class="too-small">10px<br>container min-size: max-content.</div> + </div> + + <div class="container"> + <div class="too-big">100px<br>container max-size: min-content.</div> + <div class="too-big">100px<br>container max-size: min-content.</div> + </div> + + <div class="container"> + <div class="too-big">100px<br>container max-size: max-content.</div> + <div class="too-big">100px<br>container max-size: max-content.</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html new file mode 100644 index 0000000000..8b863db404 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2a.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Test: min-content and max-content for 'width' on a container, with various widths on children + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + + .outer { + writing-mode: vertical-lr; + display: inline-block; + } + + .outer * { + border: 2px solid lime; + display: inline-block; + } + + .container { + height: 80px; + border-color: blue; + vertical-align: bottom; + + font-family: Ahem; + font-size: 8px; + line-height: 13px; + } + + .too-small { + width: 10px; + } + + .too-big { + width: 100px; + } + </style> +</head> +<body> +<div class="outer"> + <div class="container width-min-content"> + <div>auto<br>container: min-content.</div> + <div>auto<br>container: min-content.</div> + </div> + <div class="container width-min-content"> + <div class="too-small">10px<br>container: min-content.</div> + <div class="too-small">10px<br>container: min-content.</div> + </div> + <div class="container width-min-content"> + <div class="too-big">100px<br>container: min-content.</div> + <div class="too-big">100px<br>container: min-content.</div> + </div> + + <div class="container width-max-content"> + <div>auto<br>container: max-content.</div> + <div>auto<br>container: max-content.</div> + </div> + <div class="container width-max-content"> + <div class="too-small">10px<br>container: max-content.</div> + <div class="too-small">10px<br>container: max-content.</div> + </div> + <div class="container width-max-content"> + <div class="too-big">100px<br>container: max-content.</div> + <div class="too-big">100px<br>container: max-content.</div> + </div> +</div> + +<div class="outer"> + <div class="container"> + <div>auto<br>container: auto.</div> + <div>auto<br>container: auto.</div> + </div> + + <div class="container min-width-min-content"> + <div class="too-small">10px<br>container min-size: min-content.</div> + <div class="too-small">10px<br>container min-size: min-content.</div> + </div> + + <div class="container min-width-max-content"> + <div class="too-small">10px<br>container min-size: max-content.</div> + <div class="too-small">10px<br>container min-size: max-content.</div> + </div> + + <div class="container max-width-min-content"> + <div class="too-big">100px<br>container max-size: min-content.</div> + <div class="too-big">100px<br>container max-size: min-content.</div> + </div> + + <div class="container max-width-max-content"> + <div class="too-big">100px<br>container max-size: max-content.</div> + <div class="too-big">100px<br>container max-size: max-content.</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html new file mode 100644 index 0000000000..55223533a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/vert-block-size-small-or-larger-than-container-with-min-or-max-content-2b.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Test: min-content and max-content for 'block-size' on a container, with various block-sizes on children + </title> + <meta charset="utf-8"> + <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> + <link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html"> + <meta name="flags" content="ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> + <style> + html,body { + margin: 0; + } + + .outer { + writing-mode: vertical-lr; + display: inline-block; + } + + .outer * { + border: 2px solid lime; + display: inline-block; + } + + .container { + height: 80px; + border-color: blue; + vertical-align: bottom; + + font-family: Ahem; + font-size: 8px; + line-height: 13px; + } + + .too-small { + block-size: 10px; + } + + .too-big { + block-size: 100px; + } + </style> +</head> +<body> +<div class="outer"> + <div class="container block-min-content"> + <div>auto<br>container: min-content.</div> + <div>auto<br>container: min-content.</div> + </div> + <div class="container block-min-content"> + <div class="too-small">10px<br>container: min-content.</div> + <div class="too-small">10px<br>container: min-content.</div> + </div> + <div class="container block-min-content"> + <div class="too-big">100px<br>container: min-content.</div> + <div class="too-big">100px<br>container: min-content.</div> + </div> + + <div class="container block-max-content"> + <div>auto<br>container: max-content.</div> + <div>auto<br>container: max-content.</div> + </div> + <div class="container block-max-content"> + <div class="too-small">10px<br>container: max-content.</div> + <div class="too-small">10px<br>container: max-content.</div> + </div> + <div class="container block-max-content"> + <div class="too-big">100px<br>container: max-content.</div> + <div class="too-big">100px<br>container: max-content.</div> + </div> +</div> + +<div class="outer"> + <div class="container"> + <div>auto<br>container: auto.</div> + <div>auto<br>container: auto.</div> + </div> + + <div class="container min-block-min-content"> + <div class="too-small">10px<br>container min-size: min-content.</div> + <div class="too-small">10px<br>container min-size: min-content.</div> + </div> + + <div class="container min-block-max-content"> + <div class="too-small">10px<br>container min-size: max-content.</div> + <div class="too-small">10px<br>container min-size: max-content.</div> + </div> + + <div class="container max-block-min-content"> + <div class="too-big">100px<br>container max-size: min-content.</div> + <div class="too-big">100px<br>container max-size: min-content.</div> + </div> + + <div class="container max-block-max-content"> + <div class="too-big">100px<br>container max-size: max-content.</div> + <div class="too-big">100px<br>container max-size: max-content.</div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-sizing/whitespace-and-break.html b/testing/web-platform/tests/css/css-sizing/whitespace-and-break.html new file mode 100644 index 0000000000..f3ea376447 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/whitespace-and-break.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Collapsable whitespace and break after inline-block</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="4.1. Intrinsic Sizes"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:fit-content; background:red;"> + <div style="display:inline-block; vertical-align:top; width:100px; height:100px; background:green;"></div> + <br> +</div> |
