From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../css/css-sizing/aspect-ratio/abspos-001.html    |   9 ++
 .../css/css-sizing/aspect-ratio/abspos-002.html    |   9 ++
 .../css/css-sizing/aspect-ratio/abspos-003.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-004.html    |  15 ++++
 .../css/css-sizing/aspect-ratio/abspos-005.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-006.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-007.html    |  13 +++
 .../css/css-sizing/aspect-ratio/abspos-008.html    |  25 ++++++
 .../css/css-sizing/aspect-ratio/abspos-009.html    |  12 +++
 .../css/css-sizing/aspect-ratio/abspos-010.html    |   9 ++
 .../css/css-sizing/aspect-ratio/abspos-011.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-012.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-013.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-014.html    |  14 +++
 .../css/css-sizing/aspect-ratio/abspos-015.html    |  15 ++++
 .../css/css-sizing/aspect-ratio/abspos-016.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-017.html    |  10 +++
 .../css/css-sizing/aspect-ratio/abspos-018.html    |  10 +++
 .../css/css-sizing/aspect-ratio/abspos-019.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-020.html    |  11 +++
 .../css/css-sizing/aspect-ratio/abspos-021.html    |   7 ++
 .../css-sizing/aspect-ratio/auto-margins-001.html  |  11 +++
 .../aspect-ratio/block-aspect-ratio-001.html       |   9 ++
 .../aspect-ratio/block-aspect-ratio-002.html       |   9 ++
 .../aspect-ratio/block-aspect-ratio-003.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-004.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-005.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-006.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-007.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-008.html       |  13 +++
 .../aspect-ratio/block-aspect-ratio-009.html       |  11 +++
 .../aspect-ratio/block-aspect-ratio-010.html       |  13 +++
 .../aspect-ratio/block-aspect-ratio-011.html       |  13 +++
 .../aspect-ratio/block-aspect-ratio-012.html       |  13 +++
 .../aspect-ratio/block-aspect-ratio-013.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-014.html       |  11 +++
 .../aspect-ratio/block-aspect-ratio-015.html       |  11 +++
 .../aspect-ratio/block-aspect-ratio-016.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-017.html       |  11 +++
 .../aspect-ratio/block-aspect-ratio-018.html       |  13 +++
 .../aspect-ratio/block-aspect-ratio-019.html       |  11 +++
 .../aspect-ratio/block-aspect-ratio-020.html       |  25 ++++++
 .../aspect-ratio/block-aspect-ratio-021.html       |  14 +++
 .../aspect-ratio/block-aspect-ratio-022.html       |  17 ++++
 .../aspect-ratio/block-aspect-ratio-023.html       |  17 ++++
 .../aspect-ratio/block-aspect-ratio-024.html       |  20 +++++
 .../aspect-ratio/block-aspect-ratio-025.html       |  13 +++
 .../aspect-ratio/block-aspect-ratio-026.html       |  25 ++++++
 .../aspect-ratio/block-aspect-ratio-027.html       |  25 ++++++
 .../aspect-ratio/block-aspect-ratio-028.html       |  20 +++++
 .../aspect-ratio/block-aspect-ratio-029-crash.html |   6 ++
 .../aspect-ratio/block-aspect-ratio-030.html       |  11 +++
 .../aspect-ratio/block-aspect-ratio-031.html       |  14 +++
 .../aspect-ratio/block-aspect-ratio-032.html       |  14 +++
 .../aspect-ratio/block-aspect-ratio-033.html       |  11 +++
 .../aspect-ratio/block-aspect-ratio-034.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-035.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-036.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-037.html       |   5 ++
 .../aspect-ratio/block-aspect-ratio-038.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-039.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-040.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-041.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-042.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-043.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-044.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-045.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-046.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-047.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-048.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-049.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-050.html       |  12 +++
 .../aspect-ratio/block-aspect-ratio-051-crash.html |   6 ++
 .../aspect-ratio/block-aspect-ratio-052.html       |  10 +++
 .../aspect-ratio/block-aspect-ratio-053.html       |   8 ++
 .../aspect-ratio/block-aspect-ratio-054.html       |   8 ++
 .../aspect-ratio/block-aspect-ratio-055.html       |  10 +++
 ...ck-aspect-ratio-with-margin-collapsing-001.html |  15 ++++
 ...ck-aspect-ratio-with-margin-collapsing-002.html |  14 +++
 .../aspect-ratio/fieldset-element-001-ref.html     |  29 +++++++
 .../aspect-ratio/fieldset-element-001.html         |  34 ++++++++
 .../aspect-ratio/flex-aspect-ratio-001.html        |  12 +++
 .../aspect-ratio/flex-aspect-ratio-002.html        |  18 ++++
 .../aspect-ratio/flex-aspect-ratio-003.html        |  12 +++
 .../aspect-ratio/flex-aspect-ratio-004.html        |  17 ++++
 .../aspect-ratio/flex-aspect-ratio-005.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-006.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-007.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-008.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-009.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-010.html        |  14 +++
 .../aspect-ratio/flex-aspect-ratio-011.html        |  12 +++
 .../aspect-ratio/flex-aspect-ratio-012.html        |  12 +++
 .../aspect-ratio/flex-aspect-ratio-013.html        |  12 +++
 .../aspect-ratio/flex-aspect-ratio-014.html        |  12 +++
 .../aspect-ratio/flex-aspect-ratio-015.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-016.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-017.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-018.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-019.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-020.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-021.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-022.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-023.html        |  12 +++
 .../aspect-ratio/flex-aspect-ratio-024.html        |  12 +++
 .../aspect-ratio/flex-aspect-ratio-025.html        |  88 +++++++++++++++++++
 .../aspect-ratio/flex-aspect-ratio-026.html        |  94 +++++++++++++++++++++
 .../aspect-ratio/flex-aspect-ratio-027.html        |  20 +++++
 .../aspect-ratio/flex-aspect-ratio-028.html        |  24 ++++++
 .../aspect-ratio/flex-aspect-ratio-029.html        |  22 +++++
 .../aspect-ratio/flex-aspect-ratio-030.html        |  21 +++++
 .../aspect-ratio/flex-aspect-ratio-031.html        |  11 +++
 .../aspect-ratio/flex-aspect-ratio-032.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-033.html        |  13 +++
 .../aspect-ratio/flex-aspect-ratio-034.html        |  16 ++++
 .../aspect-ratio/flex-aspect-ratio-035.html        |  17 ++++
 .../aspect-ratio/flex-aspect-ratio-036.html        |  16 ++++
 .../aspect-ratio/flex-aspect-ratio-037.html        |  27 ++++++
 .../aspect-ratio/flex-aspect-ratio-038.html        |  48 +++++++++++
 .../aspect-ratio/flex-aspect-ratio-039.html        |  18 ++++
 .../aspect-ratio/flex-aspect-ratio-040.html        |  24 ++++++
 .../aspect-ratio/flex-aspect-ratio-041.html        |  26 ++++++
 .../aspect-ratio/flex-aspect-ratio-042.html        |  14 +++
 .../aspect-ratio/floats-aspect-ratio-001-ref.html  |   9 ++
 .../aspect-ratio/floats-aspect-ratio-001.html      |  13 +++
 .../aspect-ratio/fractional-aspect-ratio.html      |   9 ++
 .../aspect-ratio/grid-aspect-ratio-001.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-002.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-003.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-004.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-005.html        |  23 +++++
 .../aspect-ratio/grid-aspect-ratio-006.html        |  23 +++++
 .../aspect-ratio/grid-aspect-ratio-007.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-008.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-009.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-010.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-011.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-012.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-014.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-015.html        |  22 +++++
 .../aspect-ratio/grid-aspect-ratio-016.html        |  24 ++++++
 .../aspect-ratio/grid-aspect-ratio-017.html        |  28 ++++++
 .../aspect-ratio/grid-aspect-ratio-018.html        |  25 ++++++
 .../aspect-ratio/grid-aspect-ratio-019.html        |  25 ++++++
 .../aspect-ratio/grid-aspect-ratio-020.html        |  23 +++++
 .../aspect-ratio/grid-aspect-ratio-021.html        |  23 +++++
 .../aspect-ratio/grid-aspect-ratio-022.html        |  25 ++++++
 .../aspect-ratio/grid-aspect-ratio-023.html        |  27 ++++++
 .../aspect-ratio/grid-aspect-ratio-024.html        |  26 ++++++
 .../aspect-ratio/grid-aspect-ratio-025.html        |  23 +++++
 .../aspect-ratio/grid-aspect-ratio-026.html        |  23 +++++
 .../aspect-ratio/grid-aspect-ratio-027.html        |  25 ++++++
 .../aspect-ratio/grid-aspect-ratio-028.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-029.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-030.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-031.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-032.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-033.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-034.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-035.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-036.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-037.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-038.html        |   9 ++
 .../aspect-ratio/grid-aspect-ratio-039.html        |  26 ++++++
 .../aspect-ratio/grid-aspect-ratio-040.html        |  30 +++++++
 .../aspect-ratio/intrinsic-size-001.html           |  13 +++
 .../aspect-ratio/intrinsic-size-002.html           |  13 +++
 .../aspect-ratio/intrinsic-size-003.html           |  13 +++
 .../aspect-ratio/intrinsic-size-004.html           |  12 +++
 .../aspect-ratio/intrinsic-size-005.html           |  13 +++
 .../aspect-ratio/intrinsic-size-006.html           |  13 +++
 .../aspect-ratio/intrinsic-size-007.html           |  16 ++++
 .../aspect-ratio/intrinsic-size-008.html           |  18 ++++
 .../aspect-ratio/intrinsic-size-009.html           |  13 +++
 .../aspect-ratio/intrinsic-size-010.html           |  43 ++++++++++
 .../aspect-ratio/intrinsic-size-011.html           |  19 +++++
 .../aspect-ratio/intrinsic-size-012.html           |  23 +++++
 .../aspect-ratio/intrinsic-size-013.html           |  23 +++++
 .../aspect-ratio/intrinsic-size-014.html           |  12 +++
 .../aspect-ratio/intrinsic-size-015.html           |  12 +++
 .../aspect-ratio/intrinsic-size-016.html           |  17 ++++
 .../aspect-ratio/large-aspect-ratio-crash.html     |   4 +
 .../parsing/aspect-ratio-computed.html             |  27 ++++++
 .../aspect-ratio/parsing/aspect-ratio-invalid.html |  22 +++++
 .../aspect-ratio/parsing/aspect-ratio-valid.html   |  25 ++++++
 .../aspect-ratio/percentage-resolution-001.html    |  11 +++
 .../aspect-ratio/percentage-resolution-002.html    |  11 +++
 .../aspect-ratio/percentage-resolution-003.html    |  11 +++
 .../aspect-ratio/percentage-resolution-004.html    |  12 +++
 .../aspect-ratio/percentage-resolution-005.html    |  10 +++
 .../css-sizing/aspect-ratio/quirks-mode-001.html   |  15 ++++
 .../css-sizing/aspect-ratio/quirks-mode-002.html   |  15 ++++
 .../css-sizing/aspect-ratio/quirks-mode-003.html   |  15 ++++
 .../reference/ref-filled-green-100x20-rect.html    |   4 +
 .../reference/ref-square-with-scrollbar.html       |   8 ++
 .../ref-square-with-vertical-scrollbar.html        |   8 ++
 .../aspect-ratio/replaced-element-001.html         |  10 +++
 .../aspect-ratio/replaced-element-002.html         |  10 +++
 .../aspect-ratio/replaced-element-003.html         |  15 ++++
 .../aspect-ratio/replaced-element-004.html         |  10 +++
 .../aspect-ratio/replaced-element-005.html         |  10 +++
 .../aspect-ratio/replaced-element-006.html         |  10 +++
 .../aspect-ratio/replaced-element-007.html         |   9 ++
 .../aspect-ratio/replaced-element-008.html         |  10 +++
 .../aspect-ratio/replaced-element-009.html         |  10 +++
 .../aspect-ratio/replaced-element-010.html         |  11 +++
 .../aspect-ratio/replaced-element-011.html         |  10 +++
 .../aspect-ratio/replaced-element-012.html         |  13 +++
 .../aspect-ratio/replaced-element-013.html         |  12 +++
 .../aspect-ratio/replaced-element-014.html         |  12 +++
 .../aspect-ratio/replaced-element-015.html         |   9 ++
 .../aspect-ratio/replaced-element-016.html         |   9 ++
 .../aspect-ratio/replaced-element-017.html         |  18 ++++
 .../aspect-ratio/replaced-element-018.html         |   9 ++
 .../aspect-ratio/replaced-element-019.html         |   7 ++
 .../aspect-ratio/replaced-element-020.html         |  10 +++
 .../aspect-ratio/replaced-element-021.html         |  10 +++
 .../aspect-ratio/replaced-element-022.html         |  30 +++++++
 .../aspect-ratio/replaced-element-023.html         |  30 +++++++
 .../aspect-ratio/replaced-element-024.html         |  28 ++++++
 .../aspect-ratio/replaced-element-025.html         |  21 +++++
 .../aspect-ratio/replaced-element-026.html         |  28 ++++++
 .../aspect-ratio/replaced-element-027.html         |  22 +++++
 .../aspect-ratio/replaced-element-028.html         |  20 +++++
 .../aspect-ratio/replaced-element-029.html         |  10 +++
 .../aspect-ratio/replaced-element-030.html         |  10 +++
 .../aspect-ratio/replaced-element-031.html         |  37 ++++++++
 .../aspect-ratio/replaced-element-032.html         |  38 +++++++++
 .../aspect-ratio/replaced-element-033.html         |  31 +++++++
 .../aspect-ratio/replaced-element-034.html         |  20 +++++
 .../aspect-ratio/replaced-element-035-ref.html     |   6 ++
 .../aspect-ratio/replaced-element-035.html         |  10 +++
 .../aspect-ratio/replaced-element-036.html         |  40 +++++++++
 .../aspect-ratio/replaced-element-037-ref.html     |  10 +++
 .../aspect-ratio/replaced-element-037.html         |  14 +++
 .../aspect-ratio/replaced-element-039.html         |  11 +++
 .../aspect-ratio/replaced-element-040.html         |  11 +++
 .../aspect-ratio/replaced-element-041.html         |  25 ++++++
 .../replaced-element-dynamic-aspect-ratio.html     |  18 ++++
 .../aspect-ratio/select-element-001-ref.html       |  19 +++++
 .../aspect-ratio/select-element-001.html           |  26 ++++++
 .../aspect-ratio/small-aspect-ratio-crash.html     |   5 ++
 .../aspect-ratio/support/100x100-green.png         | Bin 0 -> 91 bytes
 .../css-sizing/aspect-ratio/support/1x1-green.png  | Bin 0 -> 135 bytes
 .../aspect-ratio/support/200x200-green.png         | Bin 0 -> 275 bytes
 .../aspect-ratio/support/20x50-green.png           | Bin 0 -> 84 bytes
 .../css-sizing/aspect-ratio/support/2x2-green.ogv  | Bin 0 -> 7660 bytes
 .../css-sizing/aspect-ratio/table-element-001.html |  26 ++++++
 .../aspect-ratio/zero-or-infinity-001.html         |  11 +++
 .../aspect-ratio/zero-or-infinity-002.html         |  12 +++
 .../aspect-ratio/zero-or-infinity-003.html         |  11 +++
 .../aspect-ratio/zero-or-infinity-004.html         |  12 +++
 .../aspect-ratio/zero-or-infinity-005.html         |  12 +++
 .../aspect-ratio/zero-or-infinity-006.html         |  11 +++
 .../aspect-ratio/zero-or-infinity-007.html         |  11 +++
 .../aspect-ratio/zero-or-infinity-008.html         |  11 +++
 .../aspect-ratio/zero-or-infinity-009.html         |  11 +++
 .../aspect-ratio/zero-or-infinity-010.html         |  11 +++
 258 files changed, 3988 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-004.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-005.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-006.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-007.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-008.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-009.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-010.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-011.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-012.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-013.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-014.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-015.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-016.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-017.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-018.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-019.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-020.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/abspos-021.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/auto-margins-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-004.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-005.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-006.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-007.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-008.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-009.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-010.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-011.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-012.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-013.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-014.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-015.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-016.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-017.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-018.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-019.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-020.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-021.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-022.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-023.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-024.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-025.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-026.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-027.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-028.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-029-crash.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-030.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-031.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-032.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-033.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-034.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-035.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-036.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-037.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-038.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-039.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-040.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-041.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-042.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-043.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-044.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-045.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-046.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-047.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-048.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-049.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-050.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-051-crash.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-052.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-053.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-054.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-055.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/block-aspect-ratio-with-margin-collapsing-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/fieldset-element-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/fieldset-element-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-004.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-005.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-006.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-007.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-008.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-009.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-010.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-011.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-012.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-013.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-014.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-015.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-016.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-017.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-018.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-019.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-020.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-021.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-022.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-023.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-024.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-025.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-026.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-027.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-028.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-029.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-030.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-031.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-032.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-033.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-034.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-035.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-036.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-037.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-038.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-039.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-040.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-041.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/flex-aspect-ratio-042.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/floats-aspect-ratio-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/floats-aspect-ratio-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/fractional-aspect-ratio.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-004.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-005.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-006.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-007.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-008.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-009.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-010.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-011.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-012.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-014.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-015.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-016.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-017.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-018.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-019.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-020.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-021.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-022.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-023.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-024.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-025.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-026.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-027.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-028.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-029.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-030.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-031.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-032.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-033.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-034.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-035.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-036.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-037.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-038.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-039.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/grid-aspect-ratio-040.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-004.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-005.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-006.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-007.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-008.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-009.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-010.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-011.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-012.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-013.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-014.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-015.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/intrinsic-size-016.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/large-aspect-ratio-crash.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-computed.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/parsing/aspect-ratio-valid.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-004.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/percentage-resolution-005.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/quirks-mode-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-filled-green-100x20-rect.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-scrollbar.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/reference/ref-square-with-vertical-scrollbar.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-004.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-005.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-006.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-007.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-008.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-009.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-010.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-011.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-012.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-013.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-014.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-015.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-016.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-017.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-018.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-019.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-020.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-021.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-022.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-023.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-024.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-025.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-026.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-027.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-028.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-029.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-030.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-031.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-032.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-033.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-034.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035-ref.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-035.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-036.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-037-ref.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-037.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-039.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-040.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-041.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/replaced-element-dynamic-aspect-ratio.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/select-element-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/select-element-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/small-aspect-ratio-crash.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/support/100x100-green.png
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/support/1x1-green.png
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/support/200x200-green.png
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/support/20x50-green.png
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.ogv
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/table-element-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-001.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-002.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-003.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-004.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-005.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-006.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-007.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-008.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-009.html
 create mode 100644 testing/web-platform/tests/css/css-sizing/aspect-ratio/zero-or-infinity-010.html

(limited to 'testing/web-platform/tests/css/css-sizing/aspect-ratio')

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
new file mode 100644
index 0000000000..25b76c3c6f
Binary files /dev/null and b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/100x100-green.png differ
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
new file mode 100644
index 0000000000..b98ca0ba0a
Binary files /dev/null and b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/1x1-green.png differ
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
new file mode 100644
index 0000000000..1dcc392a6e
Binary files /dev/null and b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/200x200-green.png differ
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
new file mode 100644
index 0000000000..f7f6e67fee
Binary files /dev/null and b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/20x50-green.png differ
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
new file mode 100644
index 0000000000..29903c0a81
Binary files /dev/null and b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.ogv differ
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;">
+
-- 
cgit v1.2.3