diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-sizing/aspect-ratio')
258 files changed, 3988 insertions, 0 deletions
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-051-crash.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-051-crash.html new file mode 100644 index 0000000000..763d1cf51f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-051-crash.html @@ -0,0 +1,6 @@ +<!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=1409822"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="aspect-ratio:2/1; height:5px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-052.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-052.html new file mode 100644 index 0000000000..3d36835cd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-052.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-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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="width:345px;"> + <div style="aspect-ratio:1/16; height:400px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-053.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-053.html new file mode 100644 index 0000000000..ce1411e027 --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-053.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="aspect-ratio:1/16; width:fit-content; height:400px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-054.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-054.html new file mode 100644 index 0000000000..c80f91f5cb --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-054.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/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="columns:4; column-fill:auto; gap:0; width:100px; height:100px; background:red;"> + <div style="aspect-ratio:1/16; width:25px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-055.html b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-055.html new file mode 100644 index 0000000000..19af2a39ab --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-055.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-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:100px; background:red;"> + <div style="columns:4; gap:0;"> + <div style="aspect-ratio:1/16; width:25px; background:green;"></div> + </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..171d23543f --- /dev/null +++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-003.html @@ -0,0 +1,15 @@ +<!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.webm" 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;"> + |
