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>
---
 .../alignment/grid-align-baseline-001.html         |  69 +++
 .../alignment/grid-align-baseline-002.html         |  69 +++
 .../alignment/grid-align-baseline-003.html         |  50 ++
 .../alignment/grid-align-baseline-004.html         |  31 ++
 .../alignment/grid-align-baseline-005.html         |   8 +
 .../grid-align-baseline-fieldset-001.html          |  48 ++
 .../grid-align-baseline-fieldset-002.html          |  49 ++
 .../grid-align-baseline-fieldset-003.html          |  49 ++
 .../alignment/grid-align-baseline-flex-001.html    | 261 ++++++++++
 .../alignment/grid-align-baseline-flex-002.html    | 262 ++++++++++
 .../alignment/grid-align-baseline-flex-003.html    | 130 +++++
 .../alignment/grid-align-baseline-flex-004.html    | 131 +++++
 .../alignment/grid-align-baseline-grid-001.html    | 112 ++++
 .../alignment/grid-align-baseline-grid-002.html    | 113 +++++
 .../alignment/grid-align-baseline-grid-003.html    | 113 +++++
 ...id-align-baseline-line-clamp-001.tentative.html | 129 +++++
 ...id-align-baseline-line-clamp-002.tentative.html | 130 +++++
 ...id-align-baseline-line-clamp-003.tentative.html | 130 +++++
 .../grid-align-baseline-multicol-001.html          | 143 ++++++
 .../grid-align-baseline-multicol-002.html          | 145 ++++++
 .../grid-align-baseline-multicol-003.html          | 145 ++++++
 .../grid-align-baseline-overflow-001.html          |  91 ++++
 .../grid-align-baseline-overflow-002.html          |  92 ++++
 .../grid-align-baseline-overflow-003.html          |  92 ++++
 .../alignment/grid-align-baseline-table-001.html   |  97 ++++
 .../alignment/grid-align-baseline-table-002.html   |  66 +++
 .../alignment/grid-align-baseline-table-003.html   |  66 +++
 .../alignment/grid-align-baseline-vertical.html    | 129 +++++
 .../css-grid/alignment/grid-align-baseline.html    | 116 +++++
 ...rid-align-content-distribution-vertical-lr.html | 343 +++++++++++++
 ...rid-align-content-distribution-vertical-rl.html | 343 +++++++++++++
 .../alignment/grid-align-content-distribution.html | 338 +++++++++++++
 .../alignment/grid-align-content-vertical-lr.html  | 101 ++++
 .../alignment/grid-align-content-vertical-rl.html  | 101 ++++
 .../css/css-grid/alignment/grid-align-content.html | 177 +++++++
 ...-justify-margin-border-padding-vertical-lr.html | 243 +++++++++
 ...-justify-margin-border-padding-vertical-rl.html | 244 +++++++++
 .../grid-align-justify-margin-border-padding.html  | 242 +++++++++
 .../alignment/grid-align-justify-overflow.html     | 133 +++++
 ...lign-justify-stretch-with-orthogonal-flows.html | 127 +++++
 .../alignment/grid-align-justify-stretch.html      | 196 +++++++
 .../grid-align-stretching-replaced-items.html      |  81 +++
 .../tests/css/css-grid/alignment/grid-align.html   | 225 +++++++++
 .../grid-alignment-implies-size-change-001.html    |  44 ++
 .../grid-alignment-implies-size-change-002.html    |  44 ++
 .../grid-alignment-implies-size-change-003.html    |  44 ++
 .../grid-alignment-implies-size-change-004.html    |  44 ++
 .../grid-alignment-implies-size-change-005.html    |  44 ++
 .../grid-alignment-implies-size-change-006.html    |  44 ++
 .../grid-alignment-implies-size-change-007.html    |  44 ++
 .../grid-alignment-implies-size-change-008.html    |  44 ++
 .../grid-alignment-implies-size-change-009.html    |  44 ++
 .../grid-alignment-implies-size-change-010.html    |  44 ++
 .../grid-alignment-implies-size-change-011.html    |  54 ++
 .../grid-alignment-implies-size-change-012.html    |  54 ++
 .../grid-alignment-implies-size-change-013.html    |  54 ++
 .../grid-alignment-implies-size-change-014.html    |  54 ++
 .../grid-alignment-implies-size-change-015.html    |  44 ++
 .../grid-alignment-implies-size-change-016.html    |  44 ++
 .../grid-alignment-implies-size-change-017.html    |  54 ++
 .../grid-alignment-implies-size-change-018.html    |  54 ++
 .../grid-alignment-implies-size-change-019.html    |  44 ++
 .../grid-alignment-implies-size-change-020.html    |  44 ++
 .../grid-alignment-implies-size-change-021.html    |  44 ++
 .../grid-alignment-implies-size-change-022.html    |  44 ++
 .../grid-alignment-implies-size-change-023.html    |  44 ++
 .../grid-alignment-implies-size-change-024.html    |  44 ++
 .../grid-alignment-implies-size-change-025.html    |  44 ++
 .../grid-alignment-implies-size-change-026.html    |  44 ++
 .../grid-alignment-implies-size-change-027.html    |  44 ++
 .../grid-alignment-implies-size-change-028.html    |  45 ++
 .../grid-alignment-implies-size-change-029.html    |  54 ++
 .../grid-alignment-implies-size-change-030.html    |  54 ++
 .../grid-alignment-implies-size-change-031.html    |  54 ++
 .../grid-alignment-implies-size-change-032.html    |  44 ++
 .../grid-alignment-implies-size-change-033.html    |  44 ++
 .../grid-alignment-implies-size-change-034.html    |  44 ++
 .../grid-alignment-implies-size-change-035.html    |  54 ++
 .../grid-alignment-implies-size-change-036.html    |  54 ++
 .../grid-alignment-style-changes-001.html          |  62 +++
 .../grid-alignment-style-changes-002.html          |  63 +++
 .../grid-alignment-style-changes-003.html          |  64 +++
 .../grid-alignment-style-changes-004.html          |  65 +++
 .../grid-alignment-style-changes-005.html          |  66 +++
 .../grid-alignment-style-changes-006.html          |  67 +++
 .../grid-alignment-style-changes-007.html          |  68 +++
 .../grid-alignment-style-changes-008.html          |  69 +++
 .../css/css-grid/alignment/grid-baseline-001.html  | 218 ++++++++
 .../css/css-grid/alignment/grid-baseline-002.html  |  68 +++
 .../css/css-grid/alignment/grid-baseline-003.html  |  40 ++
 .../css/css-grid/alignment/grid-baseline-004.html  | 222 ++++++++
 .../alignment/grid-baseline-align-001.html         | 140 +++++
 .../alignment/grid-baseline-align-cycles-001.html  | 128 +++++
 .../alignment/grid-baseline-justify-001.html       | 142 ++++++
 ...grid-block-axis-alignment-auto-margins-001.html |  51 ++
 ...grid-block-axis-alignment-auto-margins-002.html |  50 ++
 ...grid-block-axis-alignment-auto-margins-003.html |  51 ++
 ...grid-block-axis-alignment-auto-margins-004.html |  51 ++
 ...grid-block-axis-alignment-auto-margins-005.html |  49 ++
 ...grid-block-axis-alignment-auto-margins-006.html |  49 ++
 ...grid-block-axis-alignment-auto-margins-007.html |  50 ++
 ...grid-block-axis-alignment-auto-margins-008.html |  35 ++
 ...column-axis-alignment-positioned-items-001.html |  89 ++++
 ...column-axis-alignment-positioned-items-002.html |  89 ++++
 ...column-axis-alignment-positioned-items-003.html |  89 ++++
 ...column-axis-alignment-positioned-items-004.html |  89 ++++
 ...column-axis-alignment-positioned-items-005.html |  89 ++++
 ...column-axis-alignment-positioned-items-006.html |  89 ++++
 ...column-axis-alignment-positioned-items-007.html |  89 ++++
 ...column-axis-alignment-positioned-items-008.html |  89 ++++
 ...column-axis-alignment-positioned-items-009.html |  89 ++++
 ...column-axis-alignment-positioned-items-010.html |  90 ++++
 ...column-axis-alignment-positioned-items-011.html |  90 ++++
 ...column-axis-alignment-positioned-items-012.html |  93 ++++
 ...column-axis-alignment-positioned-items-013.html |  93 ++++
 ...column-axis-alignment-positioned-items-014.html |  93 ++++
 ...column-axis-alignment-positioned-items-015.html |  93 ++++
 ...column-axis-alignment-positioned-items-016.html |  93 ++++
 ...column-axis-alignment-positioned-items-017.html |  89 ++++
 ...axis-alignment-sticky-positioned-items-001.html |  75 +++
 ...axis-alignment-sticky-positioned-items-002.html |  75 +++
 ...-column-axis-self-baseline-synthesized-001.html |  71 +++
 ...-column-axis-self-baseline-synthesized-002.html |  64 +++
 ...-column-axis-self-baseline-synthesized-003.html |  68 +++
 ...-column-axis-self-baseline-synthesized-004.html |  64 +++
 ...-column-axis-self-baseline-synthesized-005.html |  51 ++
 ...grid-container-auto-margins-scrollbars-001.html |  30 ++
 .../alignment/grid-container-baseline-001.html     | 154 ++++++
 ...d-content-alignment-and-self-alignment-001.html | 379 ++++++++++++++
 ...d-content-alignment-and-self-alignment-002.html | 561 +++++++++++++++++++++
 ...id-content-alignment-auto-sized-tracks-001.html | 167 ++++++
 .../grid-content-alignment-overflow-001.html       | 235 +++++++++
 .../grid-content-alignment-overflow-002.html       | 240 +++++++++
 .../grid-content-alignment-second-pass-001.html    |  69 +++
 .../grid-content-alignment-second-pass-002.html    |  69 +++
 .../grid-content-alignment-with-abspos-001.html    |  54 ++
 .../grid-content-alignment-with-span-001.html      | 143 ++++++
 ...ontent-alignment-with-span-vertical-lr-001.html | 143 ++++++
 ...ontent-alignment-with-span-vertical-rl-001.html | 145 ++++++
 .../alignment/grid-content-distribution-001.html   |  44 ++
 .../alignment/grid-content-distribution-002.html   |  44 ++
 .../alignment/grid-content-distribution-003.html   |  44 ++
 .../alignment/grid-content-distribution-004.html   |  44 ++
 .../alignment/grid-content-distribution-005.html   |  42 ++
 .../alignment/grid-content-distribution-006.html   |  46 ++
 .../alignment/grid-content-distribution-007.html   |  48 ++
 .../alignment/grid-content-distribution-008.html   |  50 ++
 .../alignment/grid-content-distribution-009.html   |  52 ++
 .../alignment/grid-content-distribution-010.html   |  54 ++
 .../alignment/grid-content-distribution-011.html   |  46 ++
 .../alignment/grid-content-distribution-012.html   |  48 ++
 .../alignment/grid-content-distribution-013.html   |  50 ++
 .../alignment/grid-content-distribution-014.html   |  52 ++
 .../alignment/grid-content-distribution-015.html   |  54 ++
 .../alignment/grid-content-distribution-016.html   |  46 ++
 .../alignment/grid-content-distribution-017.html   |  48 ++
 .../alignment/grid-content-distribution-018.html   |  49 ++
 .../alignment/grid-content-distribution-019.html   |  52 ++
 .../alignment/grid-content-distribution-020.html   |  54 ++
 .../alignment/grid-content-distribution-021.html   |  46 ++
 .../alignment/grid-content-distribution-022.html   |  48 ++
 .../alignment/grid-content-distribution-023.html   |  50 ++
 .../alignment/grid-content-distribution-024.html   |  52 ++
 .../alignment/grid-content-distribution-025.html   |  54 ++
 .../alignment/grid-content-distribution-026.html   |   8 +
 .../alignment/grid-content-distribution-027.html   |   8 +
 .../alignment/grid-content-distribution-028.html   |   8 +
 .../alignment/grid-content-distribution-029.html   |   9 +
 ...ent-distribution-with-collapsed-tracks-001.html |  44 ++
 ...ent-distribution-with-collapsed-tracks-002.html |  44 ++
 ...ent-distribution-with-collapsed-tracks-003.html |  44 ++
 ...ent-distribution-with-collapsed-tracks-004.html |  44 ++
 ...ent-distribution-with-collapsed-tracks-005.html |  46 ++
 ...ent-distribution-with-collapsed-tracks-006.html |  48 ++
 ...ent-distribution-with-collapsed-tracks-007.html |  50 ++
 ...ent-distribution-with-collapsed-tracks-008.html |  52 ++
 ...ent-distribution-with-collapsed-tracks-009.html |  54 ++
 ...ent-distribution-with-collapsed-tracks-010.html |  46 ++
 ...ent-distribution-with-collapsed-tracks-011.html |  48 ++
 ...ent-distribution-with-collapsed-tracks-012.html |  50 ++
 ...ent-distribution-with-collapsed-tracks-013.html |  52 ++
 ...ent-distribution-with-collapsed-tracks-014.html |  54 ++
 ...ent-distribution-with-collapsed-tracks-015.html |  46 ++
 ...ent-distribution-with-collapsed-tracks-016.html |  48 ++
 ...ent-distribution-with-collapsed-tracks-017.html |  50 ++
 ...ent-distribution-with-collapsed-tracks-018.html |  52 ++
 ...ent-distribution-with-collapsed-tracks-019.html |  54 ++
 ...ent-distribution-with-collapsed-tracks-020.html |  46 ++
 ...ent-distribution-with-collapsed-tracks-021.html |  48 ++
 ...ent-distribution-with-collapsed-tracks-022.html |  50 ++
 ...ent-distribution-with-collapsed-tracks-023.html |  52 ++
 ...ent-distribution-with-collapsed-tracks-024.html |  54 ++
 .../grid-fit-content-tracks-dont-stretch-001.html  | 212 ++++++++
 .../css/css-grid/alignment/grid-gutters-001.html   |  29 ++
 .../css/css-grid/alignment/grid-gutters-002.html   |  30 ++
 .../css/css-grid/alignment/grid-gutters-003.html   |  29 ++
 .../css/css-grid/alignment/grid-gutters-004.html   |  30 ++
 .../css/css-grid/alignment/grid-gutters-005.html   |  30 ++
 .../css/css-grid/alignment/grid-gutters-006.html   |  31 ++
 .../css/css-grid/alignment/grid-gutters-007.html   |  30 ++
 .../css/css-grid/alignment/grid-gutters-008.html   |  31 ++
 .../css/css-grid/alignment/grid-gutters-009.html   |  36 ++
 .../css/css-grid/alignment/grid-gutters-010.html   |  36 ++
 .../css/css-grid/alignment/grid-gutters-011.html   |  30 ++
 .../css/css-grid/alignment/grid-gutters-012.html   |  31 ++
 .../css/css-grid/alignment/grid-gutters-013.html   |  36 ++
 .../css-grid/alignment/grid-gutters-014-ref.html   |  38 ++
 .../css/css-grid/alignment/grid-gutters-014.html   |  54 ++
 .../css-grid/alignment/grid-gutters-015-ref.html   |  22 +
 .../css/css-grid/alignment/grid-gutters-015.html   |  23 +
 .../css-grid/alignment/grid-gutters-016-ref.html   |  22 +
 .../css/css-grid/alignment/grid-gutters-016.html   |  25 +
 .../alignment/grid-gutters-and-alignment.html      | 366 ++++++++++++++
 ...rid-inline-axis-alignment-auto-margins-001.html |  52 ++
 ...rid-inline-axis-alignment-auto-margins-002.html |  50 ++
 ...rid-inline-axis-alignment-auto-margins-003.html |  51 ++
 ...rid-inline-axis-alignment-auto-margins-004.html |  51 ++
 ...rid-inline-axis-alignment-auto-margins-005.html |  51 ++
 ...rid-inline-axis-alignment-auto-margins-006.html |  50 ++
 ...rid-inline-axis-alignment-auto-margins-007.html |  50 ++
 ...rid-inline-axis-alignment-auto-margins-008.html |  36 ++
 .../css-grid/alignment/grid-inline-baseline.html   |  12 +
 ...lignment-with-orthogonal-flows-vertical-lr.html |  88 ++++
 ...lignment-with-orthogonal-flows-vertical-rl.html |  89 ++++
 .../grid-item-alignment-with-orthogonal-flows.html | 128 +++++
 .../grid-item-aspect-ratio-justify-self-001.html   | 139 +++++
 .../grid-item-aspect-ratio-justify-self-002.html   | 140 +++++
 .../grid-item-aspect-ratio-stretch-1-ref.html      |  51 ++
 .../grid-item-aspect-ratio-stretch-1.html          |  52 ++
 .../grid-item-aspect-ratio-stretch-2-ref.html      |  51 ++
 .../grid-item-aspect-ratio-stretch-2.html          |  53 ++
 .../grid-item-aspect-ratio-stretch-3-ref.html      |  52 ++
 .../grid-item-aspect-ratio-stretch-3.html          |  53 ++
 .../grid-item-aspect-ratio-stretch-4-ref.html      |  52 ++
 .../grid-item-aspect-ratio-stretch-4.html          |  53 ++
 .../alignment/grid-item-auto-margins-001.html      |  23 +
 .../alignment/grid-item-auto-margins-002.html      |  23 +
 ...id-item-auto-margins-alignment-vertical-lr.html | 127 +++++
 ...id-item-auto-margins-alignment-vertical-rl.html | 127 +++++
 .../grid-item-auto-margins-alignment.html          | 125 +++++
 .../grid-item-content-baseline-001-ref.html        | 110 ++++
 .../alignment/grid-item-content-baseline-001.html  | 110 ++++
 .../grid-item-content-baseline-002-ref.html        | 109 ++++
 .../alignment/grid-item-content-baseline-002.html  | 112 ++++
 .../grid-item-content-baseline-003-ref.html        | 110 ++++
 .../alignment/grid-item-content-baseline-003.html  | 110 ++++
 .../grid-item-content-baseline-004-ref.html        | 110 ++++
 .../alignment/grid-item-content-baseline-004.html  | 110 ++++
 .../grid-item-mixed-baseline-001-ref.html          | 110 ++++
 .../alignment/grid-item-mixed-baseline-001.html    | 112 ++++
 .../grid-item-mixed-baseline-002-ref.html          | 114 +++++
 .../alignment/grid-item-mixed-baseline-002.html    | 114 +++++
 .../grid-item-mixed-baseline-003-ref.html          | 114 +++++
 .../alignment/grid-item-mixed-baseline-003.html    | 116 +++++
 .../grid-item-mixed-baseline-004-ref.html          |  98 ++++
 .../alignment/grid-item-mixed-baseline-004.html    |  82 +++
 .../grid-item-no-aspect-ratio-stretch-1-ref.html   |  39 ++
 .../grid-item-no-aspect-ratio-stretch-1.html       |  45 ++
 .../grid-item-no-aspect-ratio-stretch-2-ref.html   |  53 ++
 .../grid-item-no-aspect-ratio-stretch-2.html       |  50 ++
 .../grid-item-no-aspect-ratio-stretch-3-ref.html   |  53 ++
 .../grid-item-no-aspect-ratio-stretch-3.html       |  50 ++
 .../grid-item-no-aspect-ratio-stretch-4-ref.html   |  53 ++
 .../grid-item-no-aspect-ratio-stretch-4.html       |  51 ++
 .../grid-item-no-aspect-ratio-stretch-5-ref.html   |  53 ++
 .../grid-item-no-aspect-ratio-stretch-5.html       |  51 ++
 .../grid-item-no-aspect-ratio-stretch-6-ref.html   |  53 ++
 .../grid-item-no-aspect-ratio-stretch-6.html       |  50 ++
 .../alignment/grid-item-self-baseline-001-ref.html |  92 ++++
 .../alignment/grid-item-self-baseline-001.html     |  95 ++++
 .../alignment/grid-justify-baseline-001-ref.html   |   5 +
 .../alignment/grid-justify-baseline-001.html       |   7 +
 .../alignment/grid-justify-baseline-002.html       |  67 +++
 .../alignment/grid-justify-baseline-003.html       |  51 ++
 .../alignment/grid-justify-baseline-004.html       |  51 ++
 .../alignment/grid-justify-baseline-005.html       |  26 +
 .../css-grid/alignment/grid-place-content-001.html | 139 +++++
 ...id-row-axis-alignment-positioned-items-001.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-002.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-003.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-004.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-005.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-006.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-007.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-008.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-009.html |  89 ++++
 ...id-row-axis-alignment-positioned-items-010.html |  90 ++++
 ...id-row-axis-alignment-positioned-items-011.html |  90 ++++
 ...id-row-axis-alignment-positioned-items-012.html |  93 ++++
 ...id-row-axis-alignment-positioned-items-013.html |  93 ++++
 ...id-row-axis-alignment-positioned-items-014.html |  93 ++++
 ...id-row-axis-alignment-positioned-items-015.html |  93 ++++
 ...id-row-axis-alignment-positioned-items-016.html |  93 ++++
 ...id-row-axis-alignment-positioned-items-017.html |  89 ++++
 ...axis-alignment-sticky-positioned-items-001.html |  75 +++
 ...axis-alignment-sticky-positioned-items-002.html |  75 +++
 ...rid-row-axis-self-baseline-synthesized-001.html |  73 +++
 ...rid-row-axis-self-baseline-synthesized-002.html |  76 +++
 ...rid-row-axis-self-baseline-synthesized-003.html |  76 +++
 ...rid-row-axis-self-baseline-synthesized-004.html |  78 +++
 ...rid-row-axis-self-baseline-synthesized-005.html |  55 ++
 ...-self-alignment-baseline-with-grid-001-ref.html |  68 +++
 ...grid-self-alignment-baseline-with-grid-001.html |  69 +++
 ...grid-self-alignment-baseline-with-grid-002.html |  69 +++
 ...grid-self-alignment-baseline-with-grid-003.html |  69 +++
 ...grid-self-alignment-baseline-with-grid-004.html |  69 +++
 ...-alignment-non-static-positioned-items-001.html |  96 ++++
 ...-alignment-non-static-positioned-items-002.html |  98 ++++
 ...-alignment-non-static-positioned-items-003.html | 102 ++++
 ...-alignment-non-static-positioned-items-004.html |  98 ++++
 ...-alignment-non-static-positioned-items-005.html | 104 ++++
 ...-alignment-non-static-positioned-items-006.html | 112 ++++
 ...-alignment-non-static-positioned-items-007.html |  97 ++++
 ...-alignment-non-static-positioned-items-008.html |  99 ++++
 ...-alignment-non-static-positioned-items-009.html | 103 ++++
 ...-alignment-non-static-positioned-items-010.html |  99 ++++
 ...-alignment-non-static-positioned-items-011.html | 105 ++++
 ...-alignment-non-static-positioned-items-012.html | 110 ++++
 ...ioned-items-with-margin-border-padding-001.html |  94 ++++
 ...ioned-items-with-margin-border-padding-002.html |  98 ++++
 ...ioned-items-with-margin-border-padding-003.html |  94 ++++
 ...ioned-items-with-margin-border-padding-004.html | 100 ++++
 ...ioned-items-with-margin-border-padding-005.html | 108 ++++
 ...ioned-items-with-margin-border-padding-006.html |  96 ++++
 ...ioned-items-with-margin-border-padding-007.html | 100 ++++
 ...ioned-items-with-margin-border-padding-008.html |  96 ++++
 ...ioned-items-with-margin-border-padding-009.html | 102 ++++
 ...ioned-items-with-margin-border-padding-010.html | 110 ++++
 ...ioned-items-with-margin-border-padding-011.html |  96 ++++
 ...ioned-items-with-margin-border-padding-012.html |  98 ++++
 ...ioned-items-with-margin-border-padding-013.html | 102 ++++
 ...ioned-items-with-margin-border-padding-014.html |  98 ++++
 ...ioned-items-with-margin-border-padding-015.html | 104 ++++
 ...ioned-items-with-margin-border-padding-016.html | 112 ++++
 .../alignment/grid-self-alignment-stretch-001.html |  62 +++
 .../alignment/grid-self-alignment-stretch-002.html |  66 +++
 .../alignment/grid-self-alignment-stretch-003.html |  67 +++
 .../alignment/grid-self-alignment-stretch-004.html |  66 +++
 .../alignment/grid-self-alignment-stretch-005.html |  63 +++
 .../alignment/grid-self-alignment-stretch-006.html |  67 +++
 .../alignment/grid-self-alignment-stretch-007.html |  68 +++
 .../alignment/grid-self-alignment-stretch-008.html |  67 +++
 .../alignment/grid-self-alignment-stretch-009.html |  62 +++
 .../alignment/grid-self-alignment-stretch-010.html |  66 +++
 .../alignment/grid-self-alignment-stretch-011.html |  67 +++
 .../alignment/grid-self-alignment-stretch-012.html |  66 +++
 .../alignment/grid-self-alignment-stretch-013.html |  63 +++
 .../alignment/grid-self-alignment-stretch-014.html |  67 +++
 .../alignment/grid-self-alignment-stretch-015.html |  68 +++
 .../alignment/grid-self-alignment-stretch-016.html |  66 +++
 ...rid-self-alignment-stretch-input-range-ref.html |  61 +++
 .../grid-self-alignment-stretch-input-range.html   |  58 +++
 ...rid-self-alignment-stretch-vertical-lr-001.html |  63 +++
 ...rid-self-alignment-stretch-vertical-lr-002.html |  67 +++
 ...rid-self-alignment-stretch-vertical-lr-003.html |  68 +++
 ...rid-self-alignment-stretch-vertical-lr-004.html |  67 +++
 ...rid-self-alignment-stretch-vertical-lr-005.html |  64 +++
 ...rid-self-alignment-stretch-vertical-lr-006.html |  68 +++
 ...rid-self-alignment-stretch-vertical-lr-007.html |  69 +++
 ...rid-self-alignment-stretch-vertical-lr-008.html |  68 +++
 ...rid-self-alignment-stretch-vertical-lr-009.html |  63 +++
 ...rid-self-alignment-stretch-vertical-lr-010.html |  67 +++
 ...rid-self-alignment-stretch-vertical-lr-011.html |  68 +++
 ...rid-self-alignment-stretch-vertical-lr-012.html |  67 +++
 ...rid-self-alignment-stretch-vertical-lr-013.html |  64 +++
 ...rid-self-alignment-stretch-vertical-lr-014.html |  68 +++
 ...rid-self-alignment-stretch-vertical-lr-015.html |  69 +++
 ...rid-self-alignment-stretch-vertical-lr-016.html |  67 +++
 ...rid-self-alignment-stretch-vertical-rl-001.html |  63 +++
 ...rid-self-alignment-stretch-vertical-rl-002.html |  67 +++
 ...rid-self-alignment-stretch-vertical-rl-003.html |  68 +++
 ...rid-self-alignment-stretch-vertical-rl-004.html |  67 +++
 ...rid-self-alignment-stretch-vertical-rl-005.html |  64 +++
 ...rid-self-alignment-stretch-vertical-rl-006.html |  68 +++
 ...rid-self-alignment-stretch-vertical-rl-007.html |  69 +++
 ...rid-self-alignment-stretch-vertical-rl-008.html |  68 +++
 ...rid-self-alignment-stretch-vertical-rl-009.html |  63 +++
 ...rid-self-alignment-stretch-vertical-rl-010.html |  67 +++
 ...rid-self-alignment-stretch-vertical-rl-011.html |  68 +++
 ...rid-self-alignment-stretch-vertical-rl-012.html |  67 +++
 ...rid-self-alignment-stretch-vertical-rl-013.html |  64 +++
 ...rid-self-alignment-stretch-vertical-rl-014.html |  68 +++
 ...rid-self-alignment-stretch-vertical-rl-015.html |  69 +++
 ...rid-self-alignment-stretch-vertical-rl-016.html |  68 +++
 .../css-grid/alignment/grid-self-alignment.html    | 249 +++++++++
 ...ot-applied-if-sizing-cyclic-dependency-001.html | 166 ++++++
 ...ot-applied-if-sizing-cyclic-dependency-002.html | 238 +++++++++
 ...ot-applied-if-sizing-cyclic-dependency-003.html |  93 ++++
 .../references/grid-baseline-001-ref.html          | 205 ++++++++
 .../references/grid-baseline-002-ref.html          |  70 +++
 .../references/grid-baseline-003-ref.html          |  41 ++
 .../references/grid-baseline-align-001-ref.html    | 129 +++++
 .../grid-baseline-align-cycles-001-ref.html        | 115 +++++
 .../references/grid-baseline-justify-001-ref.html  | 130 +++++
 .../replaced-alignment-with-aspect-ratio-001.html  |   8 +
 .../replaced-alignment-with-aspect-ratio-002.html  |   8 +
 ...-alignment-with-aspect-ratio-003.tentative.html |   8 +
 .../replaced-alignment-with-aspect-ratio-004.html  |  10 +
 .../replaced-alignment-with-aspect-ratio-005.html  |  10 +
 .../replaced-alignment-with-aspect-ratio-006.html  |  10 +
 .../replaced-alignment-with-aspect-ratio-007.html  |  10 +
 .../replaced-alignment-with-aspect-ratio-008.html  |  10 +
 .../replaced-alignment-with-aspect-ratio-009.html  |  10 +
 .../self-baseline/grid-self-baseline-001-ref.html  |  54 ++
 .../self-baseline/grid-self-baseline-001.html      |  50 ++
 .../grid-self-baseline-002-b-ref.html              |  55 ++
 .../self-baseline/grid-self-baseline-002-b.html    |  46 ++
 .../self-baseline/grid-self-baseline-002-ref.html  |  70 +++
 .../self-baseline/grid-self-baseline-002.html      |  45 ++
 .../self-baseline/grid-self-baseline-003-ref.html  |  58 +++
 .../self-baseline/grid-self-baseline-003.html      |  55 ++
 .../self-baseline/grid-self-baseline-004-ref.html  |  58 +++
 .../self-baseline/grid-self-baseline-004.html      |  54 ++
 .../self-baseline/grid-self-baseline-005-ref.html  |  54 ++
 .../self-baseline/grid-self-baseline-005.html      |  50 ++
 .../self-baseline/grid-self-baseline-006-ref.html  |  52 ++
 .../self-baseline/grid-self-baseline-006.html      |  48 ++
 .../self-baseline/grid-self-baseline-007-ref.html  |  58 +++
 .../self-baseline/grid-self-baseline-007.html      |  53 ++
 .../self-baseline/grid-self-baseline-008-ref.html  |  12 +
 .../self-baseline/grid-self-baseline-008.html      |  39 ++
 ...d-self-baseline-changes-grid-area-size-001.html |  56 ++
 ...d-self-baseline-changes-grid-area-size-002.html |  57 +++
 ...d-self-baseline-changes-grid-area-size-003.html |  58 +++
 ...d-self-baseline-changes-grid-area-size-004.html |  55 ++
 ...d-self-baseline-changes-grid-area-size-005.html |  56 ++
 ...d-self-baseline-changes-grid-area-size-006.html |  55 ++
 ...d-self-baseline-changes-grid-area-size-007.html |  59 +++
 ...d-self-baseline-changes-grid-area-size-008.html |  62 +++
 ...d-self-baseline-changes-grid-area-size-009.html |  60 +++
 ...d-self-baseline-changes-grid-area-size-010.html |  58 +++
 ...d-self-baseline-changes-grid-area-size-011.html |  60 +++
 ...d-self-baseline-changes-grid-area-size-012.html |  58 +++
 .../grid-self-baseline-horiz-001-ref.html          |  31 ++
 .../grid-self-baseline-horiz-001.html              |  52 ++
 .../grid-self-baseline-horiz-002-ref.html          |  39 ++
 .../grid-self-baseline-horiz-002.html              |  69 +++
 .../grid-self-baseline-horiz-003-ref.html          |  37 ++
 .../grid-self-baseline-horiz-003.html              |  67 +++
 .../grid-self-baseline-horiz-004-ref.html          |  35 ++
 .../grid-self-baseline-horiz-004.html              |  55 ++
 .../grid-self-baseline-horiz-005-ref.html          |  39 ++
 .../grid-self-baseline-horiz-005.html              |  66 +++
 .../grid-self-baseline-horiz-006-ref.html          |  35 ++
 .../grid-self-baseline-horiz-006.html              |  66 +++
 .../grid-self-baseline-horiz-007-ref.html          |  49 ++
 .../grid-self-baseline-horiz-007.html              |  55 ++
 .../grid-self-baseline-vertical-lr-001-ref.html    |  31 ++
 .../grid-self-baseline-vertical-lr-001.html        |  52 ++
 .../grid-self-baseline-vertical-lr-002-ref.html    |  34 ++
 .../grid-self-baseline-vertical-lr-002.html        |  54 ++
 .../grid-self-baseline-vertical-lr-003-ref.html    |  34 ++
 .../grid-self-baseline-vertical-lr-003.html        |  55 ++
 .../grid-self-baseline-vertical-lr-004-ref.html    |  33 ++
 .../grid-self-baseline-vertical-lr-004.html        |  54 ++
 .../grid-self-baseline-vertical-lr-005-ref.html    |  35 ++
 .../grid-self-baseline-vertical-lr-005.html        |  54 ++
 .../grid-self-baseline-vertical-lr-006-ref.html    |  33 ++
 .../grid-self-baseline-vertical-lr-006.html        |  54 ++
 .../grid-self-baseline-vertical-lr-007-ref.html    |  48 ++
 .../grid-self-baseline-vertical-lr-007.html        |  54 ++
 .../grid-self-baseline-vertical-rl-001-ref.html    |  31 ++
 .../grid-self-baseline-vertical-rl-001.html        |  52 ++
 .../grid-self-baseline-vertical-rl-002-ref.html    |  34 ++
 .../grid-self-baseline-vertical-rl-002.html        |  54 ++
 .../grid-self-baseline-vertical-rl-003-ref.html    |  34 ++
 .../grid-self-baseline-vertical-rl-003.html        |  55 ++
 .../grid-self-baseline-vertical-rl-004-ref.html    |  33 ++
 .../grid-self-baseline-vertical-rl-004.html        |  54 ++
 .../grid-self-baseline-vertical-rl-005-ref.html    |  34 ++
 .../grid-self-baseline-vertical-rl-005.html        |  54 ++
 .../grid-self-baseline-vertical-rl-006-ref.html    |  33 ++
 .../grid-self-baseline-vertical-rl-006.html        |  54 ++
 .../grid-self-baseline-vertical-rl-007-ref.html    |  48 ++
 .../grid-self-baseline-vertical-rl-007.html        |  54 ++
 .../css-grid/alignment/support/100x100-green.png   | Bin 0 -> 91 bytes
 .../css/css-grid/alignment/support/25x50-green.png | Bin 0 -> 99 bytes
 .../css/css-grid/alignment/support/50x50-green.png | Bin 0 -> 205 bytes
 .../css/css-grid/alignment/support/style-change.js |  14 +
 479 files changed, 35822 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-align.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-029.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png
 create mode 100644 testing/web-platform/tests/css/css-grid/alignment/support/style-change.js

(limited to 'testing/web-platform/tests/css/css-grid/alignment')

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html
new file mode 100644
index 0000000000..a03ce153b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<style>
+#target {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html
new file mode 100644
index 0000000000..2b4d71756d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<style>
+#target {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html
new file mode 100644
index 0000000000..2e0c5f29f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<style>
+#target {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: 120px;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+  writing-mode: vertical-lr;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="40"><span></span><br><span></span></div>
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="70"><span></span><br><span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html
new file mode 100644
index 0000000000..233c88a01f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<style>
+#target {
+  display: grid;
+  grid-template: 50px 50px 50px / 50px 50px;
+  grid-auto-flow: column;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div style="grid-area: 3 / 1; margin-bottom: 10px;" data-offset-y="100"><span></span><br><span></span></div>
+  <div style="grid-area: 1 / 2 / 4 / 2;" data-offset-y="100"><span></span><br><span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html
new file mode 100644
index 0000000000..c217a3b6de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="match" href="../../reference/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-grid; grid-template: auto / 50px 50px; align-items: baseline; background: red;">
+  <canvas style="background: green; width: 100%; height: 100%;"></canvas>
+  <div style="height: 100px; background: green;"><br></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html
new file mode 100644
index 0000000000..207fabb166
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: grid;
+  width: min-content;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <fieldset data-offset-y="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="40"><span></span></div>
+  <fieldset data-offset-y="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html
new file mode 100644
index 0000000000..dbbca16150
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  width: min-content;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <fieldset data-offset-x="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="15"><span></span></div>
+  <fieldset data-offset-x="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html
new file mode 100644
index 0000000000..38fc5b5eb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  width: min-content;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <fieldset data-offset-x="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <fieldset data-offset-x="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html
new file mode 100644
index 0000000000..d00472474b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="50"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap-reverse -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="40"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="60"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html
new file mode 100644
index 0000000000..b6df9d7d73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-inline: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="20"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="33"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="38"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="20"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap-reverse -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="75"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="63"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="60"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="43"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html
new file mode 100644
index 0000000000..7fdc921b27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+  gap: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html
new file mode 100644
index 0000000000..447f008e0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+  gap: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html
new file mode 100644
index 0000000000..d59e70601a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="100"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="90"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html
new file mode 100644
index 0000000000..686587bc94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="48"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="90"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="33"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="115"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="53"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html
new file mode 100644
index 0000000000..f561e13cfa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-lr;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="93"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="108"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="88"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html
new file mode 100644
index 0000000000..27e48bc7cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html
new file mode 100644
index 0000000000..a51c43f406
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html
new file mode 100644
index 0000000000..689c952dbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html
new file mode 100644
index 0000000000..d7d6faabb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="100"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="140"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="140"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html
new file mode 100644
index 0000000000..d237f4c2e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 200px;
+  position: relative;
+  line-height: 0;
+  margin: 40px;
+  padding: 10px;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="140"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="145"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html
new file mode 100644
index 0000000000..52b2403f88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 200px;
+  position: relative;
+  line-height: 0;
+  margin: 40px;
+  padding: 10px;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="95"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="135"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="140"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html
new file mode 100644
index 0000000000..66f9eb1bcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="30">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="50">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="110"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="90"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html
new file mode 100644
index 0000000000..b74dbf750b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="70"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="60"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="100"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="120"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="40">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html
new file mode 100644
index 0000000000..569dd1ae37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-lr;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="50"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="40">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="120"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="100"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html
new file mode 100644
index 0000000000..ad1d778c57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  justify-items: start;
+  position: relative;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <table data-offset-y="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="95"><span></span></div>
+  <table data-offset-y="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <table data-offset-y="0">
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <table data-offset-y="0">
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html
new file mode 100644
index 0000000000..cabb32c40a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="115"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html
new file mode 100644
index 0000000000..5c2e56b649
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="95"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html
new file mode 100644
index 0000000000..aff424be77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid align baseline vertical</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<meta name="assert" content="This test checks that baseline alignment works correctly for align-self properties in vertical-rl and -lr writing modes">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    height: 600px;
+    grid-auto-columns: 1fr;
+    margin-bottom: 20px;
+    position: relative;
+    text-orientation: sideways;
+    font: 20px/1 Ahem;
+}
+
+.grid :nth-child(1) { background-color: brown; }
+.grid :nth-child(2) { background-color: green; }
+.grid :nth-child(3) { background-color: red; }
+.grid :nth-child(4) { background-color: yellow; }
+.grid :nth-child(5) { background-color: purple; }
+.grid :nth-child(6) { background-color: orange; }
+.grid :nth-child(7) { background-color: lime; }
+.grid :nth-child(8) { background-color: lightblue; }
+.grid :nth-child(9) { background-color: darkred; }
+.grid :nth-child(10) { background-color: gold; }
+.grid :nth-child(11) { background-color: salmon; }
+
+.firstRowThirdColumn {
+    grid-row: 1;
+    grid-column: 3;
+}
+.firstRowFourthColumn {
+    grid-row: 1;
+    grid-column: 4;
+}
+.firstRowFifthColumn {
+    grid-row: 1;
+    grid-column: 5;
+}
+.grid > div {
+    min-width: 0px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript"> setup({ explicit_done: true }); </script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<div class="grid" style="writing-mode: vertical-rl">
+    <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn alignSelfBaseline" style="width: 20px;"></div>
+    <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 10px;"></div>
+    <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 0;"></div>
+    <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="writing-mode: vertical-rl">
+  <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline2" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="writing-mode: vertical-rl">
+  <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="writing-mode: vertical-lr">
+  <div id="baseline6" data-offset-x="13" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline7" data-offset-x="13" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="writing-mode: vertical-lr">
+  <div id="baseline8" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline9" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div id="log"></div>
+
+</body>
+
+<script>
+
+  function runTests() {
+    var baseline1 = document.getElementById("baseline1");
+    var baseline2 = document.getElementById("baseline2");
+    var baseline3 = document.getElementById("baseline3");
+    var baseline4 = document.getElementById("baseline4");
+    var baseline5 = document.getElementById("baseline5");
+    var baseline6 = document.getElementById("baseline6");
+    var baseline7 = document.getElementById("baseline7");
+    var baseline8 = document.getElementById("baseline8");
+    var baseline9 = document.getElementById("baseline9");
+
+    checkLayout('.grid', false);
+
+    test(() => {assert_equals(baseline1.offsetLeft, baseline2.offsetLeft, "baseline1 and baseline2 should have the same baseline;")}, "Additional Check 1");
+    test(() => {assert_greater_than(baseline3.offsetLeft + baseline3.offsetWidth, 75, "baseline3 should be above the center align-itemsed item;")}, "Additional Check 2");
+    test(() => {assert_equals(baseline4.offsetLeft + baseline4.offsetWidth, baseline5.offsetLeft + baseline5.offsetWidth, "baseline4 and baseline5 should be right aligned with each other;")}, "Additional Check 3");
+    test(() => {assert_less_than(baseline4.offsetLeft + baseline4.offsetWidth, 100, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4");
+    test(() => {assert_equals(baseline6.offsetLeft, baseline7.offsetLeft, "baseline6 and baseline7 should have the same baseline;")}, "Additional Check 5");
+    test(() => {assert_equals(baseline8.offsetLeft, baseline9.offsetLeft, "baseline8 and baseline9 should be left aligned with each other;")}, "Additional Check 6");
+
+    done();
+  };
+
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html
new file mode 100644
index 0000000000..175811718f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid align baseline</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<meta name="assert" content="This test checks that baseline alignment works correctly for align-items and align-self properties">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    width: 600px;
+    grid-auto-columns: 1fr;
+    position: relative;
+    margin-bottom: 20px;
+    font: 20px/1 Ahem;
+}
+
+.grid :nth-child(1) { background-color: blue; }
+.grid :nth-child(2) { background-color: green; }
+.grid :nth-child(3) { background-color: red; }
+.grid :nth-child(4) { background-color: yellow; }
+.grid :nth-child(5) { background-color: purple; }
+.grid :nth-child(6) { background-color: orange; }
+.grid :nth-child(7) { background-color: lime; }
+.grid :nth-child(8) { background-color: lightblue; }
+.grid :nth-child(9) { background-color: darkred; }
+.grid :nth-child(10) { background-color: gold; }
+.grid :nth-child(11) { background-color: salmon; }
+
+.firstRowThirdColumn {
+    grid-row: 1;
+    grid-column: 3;
+}
+.firstRowFourthColumn {
+    grid-row: 1;
+    grid-column: 4;
+}
+.firstRowFifthColumn {
+    grid-row: 1;
+    grid-column: 5;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript"> setup({ explicit_done: true }); </script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<div class="grid alignItemsBaseline">
+    <div style="margin: 40px 0px;" class="firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+    <div style="margin: auto 0px 0px;" class="firstRowSecondColumn" data-offset-x="200" data-offset-y="80" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+    <div style="margin: 20px 0px;" class="firstRowThirdColumn" data-offset-x="400" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+</div>
+
+<div class="grid">
+    <div data-expected-height="20" data-offset-y="20" class="firstRowFirstColumn alignSelfBaseline" style="height: 20px;"></div>
+    <div data-expected-height="10" data-offset-y="30" class="firstRowSecondColumn alignSelfBaseline" style="height: 10px; margin: 30px 0 10px;"></div>
+    <div data-expected-height="10" data-offset-y="30" class="firstRowThirdColumn alignSelfBaseline" style="height: 10px; margin: 20px 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
+</div>
+
+<div class="grid">
+    <div data-expected-height="20" data-offset-y="70" class="firstRowFirstColumn alignSelfLastBaseline" style="height: 20px;"></div>
+    <div data-expected-height="10" data-offset-y="80" class="firstRowSecondColumn alignSelfLastBaseline" style="height: 10px; margin: 30px 0 10px;"></div>
+    <div data-expected-height="10" data-offset-y="80" class="firstRowThirdColumn alignSelfLastBaseline" style="height: 10px; margin: 20px 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
+</div>
+
+<div class="grid">
+    <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+    <div id="baseline2" data-offset-y="0" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px;"></div>
+    <div data-expected-height="50" data-offset-y="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
+    <div id="baseline3" data-expected-height="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFifthColumn" style="height: 100px;"></div>
+</div>
+
+<div class="grid">
+    <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+    <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="height: 50px;"></div>
+    <div data-expected-height="50" data-offset-y="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
+</div>
+
+<div id="log"></div>
+
+</body>
+
+<script>
+
+    function runTests() {
+      var baseline1 = document.getElementById("baseline1");
+      var baseline2 = document.getElementById("baseline2");
+      var baseline3 = document.getElementById("baseline3");
+      var baseline4 = document.getElementById("baseline4");
+      var baseline5 = document.getElementById("baseline5");
+
+      checkLayout('.grid', false);
+
+      test(() => {assert_equals(baseline1.offsetTop + baseline1.offsetHeight, baseline2.offsetTop + baseline2.offsetHeight, "baseline1 and baseline2 should have the same baseline;")},
+                  "Additional Check 1");
+      test(() => {assert_less_than(baseline3.offsetTop, 25, "baseline3 should be above the center align-selfed item;")}, "Additional Check 2");
+      test(() => {assert_equals(baseline4.offsetTop, baseline5.offsetTop, "baseline4 and baseline5 should be top aligned with each other;")}, "Additional Check 3");
+      test(() => {assert_greater_than(baseline4.offsetTop, 0, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4");
+
+      done();
+    };
+
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
new file mode 100644
index 0000000000..98d4e3c661
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
@@ -0,0 +1,343 @@
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: aligned content distribution for vertical lr</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-lr writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid-auto-columns: 20px;
+    grid-auto-rows: 40px;
+    position: relative;
+    width: 400px;
+    height: 300px;
+}
+
+.stretchedGrid {
+    grid-auto-rows: auto;
+}
+
+.width300height400 {
+    width: 300px;
+    height: 400px;
+}
+
+.fourthRowFirstColumn {
+    background-color: deepskyblue;
+    grid-column: 1;
+    grid-row: 4;
+}
+
+.fourthRowSecondColumn {
+    background-color: maroon;
+    grid-column: 2;
+  	grid-row: 4;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the align-content property is applied correctly when using content-distribution values in vertical-lr writing mode.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid width300height400 alignContentStretch verticalLR" data-expected-width="300" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid width300height400 alignContentStretch verticalLR directionRTL" data-expected-width="300" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
new file mode 100644
index 0000000000..60864c110d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
@@ -0,0 +1,343 @@
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: aligned content distribution for vertical rl</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-rl writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid-auto-columns: 20px;
+    grid-auto-rows: 40px;
+    position: relative;
+    width: 400px;
+    height: 300px;
+}
+
+.stretchedGrid {
+    grid-auto-rows: auto;
+}
+
+.width300height400 {
+    width: 300px;
+    height: 400px;
+}
+
+.fourthRowFirstColumn {
+    background-color: deepskyblue;
+    grid-column: 1;
+    grid-row: 4;
+}
+
+.fourthRowSecondColumn {
+    background-color: maroon;
+    grid-column: 2;
+  	grid-row: 4;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the align-content property is applied correctly when using content-distribution values for vertical-rl mode.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid width300height400 alignContentStretch verticalRL" data-expected-width="300" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid width300height400 alignContentStretch verticalRL directionRTL" data-expected-width="300" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html
new file mode 100644
index 0000000000..cc3785da0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html
@@ -0,0 +1,338 @@
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: aligned content distribution</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid-auto-columns: 20px;
+    grid-auto-rows: 40px;
+    position: relative;
+    width: 200px;
+    height: 300px;
+}
+
+.stretchedGrid {
+    grid-auto-rows: auto;
+}
+
+.fourthRowFirstColumn {
+    background-color: deepskyblue;
+    grid-column: 1;
+    grid-row: 4;
+}
+
+.fourthRowSecondColumn {
+    background-color: maroon;
+    grid-column: 2;
+  	grid-row: 4;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the align-content property is applied correctly when using content-distribution values.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html
new file mode 100644
index 0000000000..484ab78e9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-content in vertical-lr</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#direction">
+<meta name="assert" content="This test checks that the align-content property is applied correctly in vertical-lr grids, for both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid: 100px 100px / 50px 50px;
+    position: relative;
+    width: 300px;
+    height: 200px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'start'</p>
+    <div class="grid verticalLR alignContentStart" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'end'</p>
+    <div class="grid verticalLR alignContentEnd" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'center'</p>
+    <div class="grid directionRTL verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid directionRTL verticalLR alignContentStart" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'end'</p>
+    <div class="grid directionRTL verticalLR alignContentEnd" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="200" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html
new file mode 100644
index 0000000000..fc584d8818
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-content in vertical-rl</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#direction">
+<meta name="assert" content="This test checks that the align-content property is applied correctly in vertical-rl grids, for both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid: 100px 100px / 50px 50px;
+    position: relative;
+    width: 300px;
+    height: 200px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'start'</p>
+    <div class="grid verticalRL alignContentStart" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'end'</p>
+    <div class="grid verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'center'</p>
+    <div class="grid directionRTL verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid directionRTL verticalRL alignContentStart" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'end'</p>
+    <div class="grid directionRTL verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html
new file mode 100644
index 0000000000..85d0d501ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-content property</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<meta name="assert" content="This test checks that the align-content property is applied correctly in both directions RTL and LTR.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    grid: 100px 100px / 50px 50px;
+    position: relative;
+    width: 200px;
+    height: 300px;
+}
+
+.verticalGrid {
+    width: 300px;
+    height: 200px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid alignContentCenter" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'left'</p>
+    <div class="grid alignContentLeft" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'right'</p>
+    <div class="grid alignContentRight" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'start'</p>
+    <div class="grid alignContentStart" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'end'</p>
+    <div class="grid alignContentEnd" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'flex-start'</p>
+    <div class="grid alignContentFlexStart" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'flex-end</p>
+    <div class="grid alignContentFlexEnd" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Default alignment and initial values. -->
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'auto' (resolved to 'start')</p>
+    <div class="grid" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'center'</p>
+    <div class="grid directionRTL alignContentCenter" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'left'</p>
+    <div class="grid directionRTL alignContentLeft" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'right'</p>
+    <div class="grid directionRTL alignContentRight" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid directionRTL alignContentStart" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'end'</p>
+    <div class="grid directionRTL alignContentEnd" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
new file mode 100644
index 0000000000..76f195311d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: box model parts and alignment properties, vertical-LR writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">
+<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids, in both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.grid {
+    grid-template-columns: 100px 200px;
+    grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    position: relative;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+    margin: 4px 8px 12px 16px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids.</p>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content verticalLR" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="46"  data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="246" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content verticalLR itemsCenter" data-expected-width="475" data-expected-height="350">
+        <div class="firstRowFirstColumn cell"     data-offset-x="124"  data-offset-y="36"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"   data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="324"  data-offset-y="186" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content verticalLR itemsEnd" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+    <div class="grid fit-content verticalLR itemsLeft" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content verticalLR alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-start' (vertical-lr) | justify-items: 'self-start' (direction: rtl)</p>
+    <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' (vertical-lr) | justify-items: 'self-end' (direction: rtl)</p>
+    <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="58"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content verticalLR directionRTL" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="46"  data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="124" data-offset-y="236" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="324" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content verticalLR directionRTL itemsEnd"       data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'left'</p>
+    <div class="grid fit-content verticalLR directionRTL alignItemsStart justifyItemsLeft"      data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content verticalLR directionRTL alignItemsStart justifyItemsRight"     data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-start' (vertical-lr) | justify-items: 'self-start' (direction: ltr)</p>
+    <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-end' (vertical-lr) | justify-items: 'self-end' (direction: ltr)</p>
+    <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="158"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
new file mode 100644
index 0000000000..f24bbc120f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: box model parts and alignment properties, vertical-RL writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">
+<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids, in both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.grid {
+    grid-template-columns: 100px 200px;
+    grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    position: relative;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+    margin: 4px 8px 12px 16px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids.</p>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content verticalRL" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
+        <div class="firstRowFirstColumn cell"     data-offset-x="324" data-offset-y="36"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="186" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+    <div class="grid fit-content verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content verticalRL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: rtl)</p>
+    <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: rtl)</p>
+    <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="58"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+
+<!-- RTL direction. -->
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content directionRTL verticalRL" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content directionRTL verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="324" data-offset-y="236" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content directionRTL verticalRL itemsEnd"       data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'left'</p>
+    <div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsLeft"      data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsRight"     data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: ltr)</p>
+    <div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: ltr)</p>
+    <div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="158"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
new file mode 100644
index 0000000000..d4de084267
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: box model parts and alignment properties</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties, in both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.grid {
+    grid-template-columns: 100px 200px;
+    grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    position: relative;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+    margin: 4px 8px 12px 16px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="146" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="46"  data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450">
+        <div class="firstRowFirstColumn cell"     data-offset-x="74"  data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="224" data-offset-y="286" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'start' | justify-items: 'left'</p>
+    <div class="grid fit-content alignItemsStart justifyItemsLeft" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content alignItemsStart justifyItemsRight" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="102"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content directionRTL" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"   data-offset-x="302" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="274" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="286" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content directionRTL itemsEnd"       data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'left'</p>
+    <div class="grid fit-content directionRTL alignItemsStart justifyItemsLeft"      data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content directionRTL alignItemsStart justifyItemsRight"     data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html
new file mode 100644
index 0000000000..37d5c14600
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: overflow for justify and align</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
+<meta name="assert" content="This test checks that both safe and unsafe overflow positions are applied correctly for align-items and justify-items properties.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+
+<style>
+
+.grid {
+    grid-template-columns: 150px 150px;
+    grid-template-rows: 120px 120px 120px;
+    margin-bottom: 20px;
+}
+.cellOverflowWidth {
+    width: 180px;
+    height: 40px;
+}
+.cellOverflowHeight {
+    width: 50px;
+    height: 150px;
+}
+.cellWithNoOverflow {
+    width: 50px;
+    height: 40px;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="135" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsUnsafeCenter justifyItemsUnsafeCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsSafeCenter justifyItemsSafeCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsSafeCenter justifyItemsSafeCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn alignSelfCenterSafe justifySelfCenterSafe" data-offset-x="200" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="120" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsUnsafeEnd justifyItemsUnsafeEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsSafeEnd justifyItemsSafeEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn justifySelfUnsafeCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsSafeEnd justifyItemsSafeEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn alignSelfUnsafeCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
new file mode 100644
index 0000000000..3b50bb4d6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:align stretch with orthogonal flows</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<meta name="assert" content="This test checks that stretching alignment works as expected with orthogonal flows, in horizontal and vertical writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px;
+    font: 10px/1 ahem;
+    margin-bottom: 20px;
+}
+.widthAndHeightSet {
+    width: 20px;
+    height: 40px;
+}
+.onlyWidthSet { width: 20px; }
+.onlyHeightSet { height: 40px; }
+.maxHeight { max-height: 160px; }
+.maxWidth { max-width: 90px; }
+.minWidth { min-width: 120px; }
+.minHeight { min-height: 220px; }
+.topAutoMargin { margin-top: auto; }
+.bottomAutoMargin { margin-bottom: auto; }
+.leftAutoMargin { margin-left: auto; }
+.rightAutoMargin { margin-right: auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that stretching alignment works as expected with orthogonal flows.</p>
+
+<p>HORIZONTAL vs VERTICAL-RL</p>
+<div class="container">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
+        <div class="verticalRL firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
+        <div class="verticalRL firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="150">XXX</div>
+        <div class="verticalRL secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="100" data-expected-height="40">XXX</div>
+        <div class="verticalRL secondRowSecondColumn selfSelfStart" data-expected-width="10"  data-expected-height="30">XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
+        <div class="verticalRL firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
+        <div class="verticalRL firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="10"  data-expected-height="150">XXX</div>
+        <div class="verticalRL secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
+        <div class="verticalRL secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="10"  data-expected-height="150">XXX</div>
+    </div>
+</div>
+
+<p>HORIZONTAL vs VERTICAL-LR</p>
+<div class="container">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
+        <div class="verticalLR firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
+        <div class="verticalLR firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="150">XXX</div>
+        <div class="verticalLR secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="100" data-expected-height="40">XXX</div>
+        <div class="verticalLR secondRowSecondColumn selfSelfStart" data-expected-width="10"  data-expected-height="30">XXX</div>
+    </div>
+</div>
+<div class="container">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
+        <div class="verticalLR firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
+        <div class="verticalLR firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="10"  data-expected-height="150">XXX</div>
+        <div class="verticalLR secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
+        <div class="verticalLR secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="10"  data-expected-height="150">XXX</div>
+    </div>
+</div>
+
+<p>VERTICAL-RL vs HORIZONTAL</p>
+<div class="container">
+    <div class="grid fit-content verticalRL" data-expected-width="300" data-expected-height="200">
+        <div class="horizontalTB firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
+        <div class="horizontalTB firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="100">XXX</div>
+        <div class="horizontalTB secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="150" data-expected-height="40">XXX</div>
+        <div class="horizontalTB secondRowSecondColumn selfSelfStart" data-expected-width="30"  data-expected-height="10">XXX</div>
+    </div>
+</div>
+<div class="container">
+    <div class="grid fit-content verticalRL" data-expected-width="300" data-expected-height="200">
+        <div class="horizontalTB firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
+        <div class="horizontalTB firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="30"  data-expected-height="100">XXX</div>
+        <div class="horizontalTB secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
+        <div class="horizontalTB secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="30"  data-expected-height="100">XXX</div>
+    </div>
+</div>
+
+<p>VERTICAL-LR vs HORIZONTAL</p>
+<div class="container">
+    <div class="grid fit-content verticalLR" data-expected-width="300" data-expected-height="200">
+        <div class="horizontalTB firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
+        <div class="horizontalTB firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="100">XXX</div>
+        <div class="horizontalTB secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="150" data-expected-height="40">XXX</div>
+        <div class="horizontalTB secondRowSecondColumn selfSelfStart" data-expected-width="30"  data-expected-height="10">XXX</div>
+    </div>
+</div>
+<div class="container">
+    <div class="grid fit-content verticalLR" data-expected-width="300" data-expected-height="200">
+        <div class="horizontalTB firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
+        <div class="horizontalTB firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="30"  data-expected-height="100">XXX</div>
+        <div class="horizontalTB secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
+        <div class="horizontalTB secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="30"  data-expected-height="100">XXX</div>
+    </div>
+</div>
+
+<div id="log"></div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html
new file mode 100644
index 0000000000..7af6695a65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: stretch value for align and justify properties</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+
+<meta name="assert" content="This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties for both RTL/LTR directions and horizontal/vertical writing modes.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.widthAndHeightSet {
+    width: 20px;
+    height: 40px;
+}
+.onlyWidthSet { width: 20px; }
+.onlyHeightSet { height: 40px; }
+.maxHeight { max-height: 160px; }
+.maxWidth { max-width: 90px; }
+.minWidth { min-width: 120px; }
+.minHeight { min-height: 220px; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
+        <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
+        <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
+        <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="160"></div>
+        <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="120" data-expected-height="40"></div>
+        <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="220"></div>
+        <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="90" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div>
+    </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow direction). -->
+<div style="position: relative">
+    <div class="grid fit-content directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
+<div style="position: relative">
+    <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn  directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn  directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn  directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn  directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Vertical RL writing mode. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
+<!-- Vertical LR writing mode. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html
new file mode 100644
index 0000000000..b1dbbd8fd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: alignment for replaced element</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">
+<link rel="help" href="https://drafts.csswg.org/css-align/#align-grid">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">
+<meta name="assert" content="This test checks that the alignment properties apply the 'stretch' value correctly on replaced elements, such as images.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+.grid {
+  grid-template-columns: 500px;
+  grid-template-rows: 500px;
+}
+.fixedSizes {
+   width: 150px;
+   height: 150px;
+}
+.autoMargins {
+   margin: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+    <p>This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.</p>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, default alignment is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p>
+        <div class="grid">
+            <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, 'normal' is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p>
+        <div class="grid itemsNormal">
+            <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into.</p>
+        <div class="grid alignItemsStretch justifyItemsStretch">
+            <img src="/css/support/blue-100.png" data-expected-width="500" data-expected-height="500"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.</p>
+        <div class="grid itemsCenter">
+            <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.</p>
+        <div class="grid">
+            <img class="fixedSizes" src="/css/support/blue-100.png" data-expected-width="150" data-expected-height="150"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.</p>
+        <div class="grid">
+            <img class="autoMargins" src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+        </div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align.html
new file mode 100644
index 0000000000..79aa684740
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-self property</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction">
+<meta name="assert" content="This test checks that the align-self property is applied correctly for RL and LR, vertical and horizontal writing modes.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+.item {
+    width: 8px;
+    height: 16px;
+    background: black;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Default alignment and initial values. -->
+<div style="position: relative">
+    <div class="grid fit-content alignItemsCenter" data-expected-width="200" data-expected-height="400">
+        <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow direction). -->
+<div style="position: relative">
+     <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+         <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<div style="position: relative">
+     <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+         <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="80" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
+<div style="position: relative">
+     <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+         <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<div style="position: relative">
+     <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+         <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- Vertical RL writing mode. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Vertical LR writing mode. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn verticalRL" data-offset-x="380" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
new file mode 100644
index 0000000000..ee931b990f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
new file mode 100644
index 0000000000..2ef899fca9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
new file mode 100644
index 0000000000..47cb3347db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
new file mode 100644
index 0000000000..d3f22e9bc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
new file mode 100644
index 0000000000..bb9de73d73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'normal' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
new file mode 100644
index 0000000000..5a61e333f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'normal' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
new file mode 100644
index 0000000000..b50d8be7a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
new file mode 100644
index 0000000000..fd394b83e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 80);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
new file mode 100644
index 0000000000..0ef6351dbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
new file mode 100644
index 0000000000..d9eb6066b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 80);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
new file mode 100644
index 0000000000..c06918538d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.alignItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
new file mode 100644
index 0000000000..1fe7d2696f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
new file mode 100644
index 0000000000..266e2124fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.alignItems = 'normal';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
new file mode 100644
index 0000000000..23f79cba32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
new file mode 100644
index 0000000000..405dbcf7bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
new file mode 100644
index 0000000000..f3477a2aa9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
new file mode 100644
index 0000000000..2f45db5eae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
new file mode 100644
index 0000000000..2aa06ab2e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  grid.style.alignItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
new file mode 100644
index 0000000000..49896c21f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
new file mode 100644
index 0000000000..e04356bc72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
new file mode 100644
index 0000000000..29aa8ff6eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
new file mode 100644
index 0000000000..b986bbe659
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
new file mode 100644
index 0000000000..e896326a95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'normal' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
new file mode 100644
index 0000000000..b236ef15d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'normal' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
new file mode 100644
index 0000000000..6f268ee774
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
new file mode 100644
index 0000000000..c3bfc67a7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 80);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
new file mode 100644
index 0000000000..5f1512c8c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
new file mode 100644
index 0000000000..2fb651162a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 80);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
+
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
new file mode 100644
index 0000000000..6d41acfb2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.justifyItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
new file mode 100644
index 0000000000..559f04a11e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.justifyItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
new file mode 100644
index 0000000000..843e1b2acd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.justifyItems = 'normal';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
new file mode 100644
index 0000000000..011eea64a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
new file mode 100644
index 0000000000..eace9b956d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
new file mode 100644
index 0000000000..7b22dffe31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
new file mode 100644
index 0000000000..b4b0725d8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.justifyItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
new file mode 100644
index 0000000000..99396bf173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  grid.style.justifyItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html
new file mode 100644
index 0000000000..25ce0619db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+}
+#item1 {
+  height: 20px;
+  background: blue;
+}
+#item2 {
+  height: 50px;
+  background: green;
+}
+#item3 {
+  height: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 30 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 20 }
+    };
+
+    let after = {
+        item1: {"data-offset-y": 10 },
+        item2: {"data-offset-y": 50 },
+        item3: {"data-offset-y": 0  }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html
new file mode 100644
index 0000000000..c97be7ddb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+}
+#item1 {
+  height: 20px;
+  background: blue;
+}
+#item2 {
+  height: 50px;
+  background: green;
+  align-self: center;
+}
+#item3 {
+  height: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 10 },
+        item2: {"data-offset-y": 25 },
+        item3: {"data-offset-y": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-y": 30 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 20 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html
new file mode 100644
index 0000000000..dc7f350af5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+}
+#container > div { writing-mode: vertical-rl; }
+#item1 {
+  width: 20px;
+  background: blue;
+}
+#item2 {
+  width: 50px;
+  margin: 0 10px;
+  background: green;
+}
+#item3 {
+  width: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 70 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 70 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html
new file mode 100644
index 0000000000..84475fdbce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+}
+#container > div { writing-mode: vertical-rl; }
+#item1 {
+  width: 20px;
+  background: blue;
+}
+#item2 {
+  width: 50px;
+  margin: 0 10px;
+  background: green;
+  justify-self: center;
+}
+#item3 {
+  width: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 70 },
+        item2: {"data-offset-x": 25 },
+        item3: {"data-offset-x": 70 }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
new file mode 100644
index 0000000000..919c6eefa8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+  font-family: Ahem;
+  line-height: 1;
+}
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 16 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 8  }
+    }
+
+    let after = {
+        item1: {"data-offset-y": 8  },
+        item2: {"data-offset-y": 60 },
+        item3: {"data-offset-y": 0  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
+        <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
new file mode 100644
index 0000000000..21e7d0d3ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+  font-family: Ahem;
+  line-height: 1;
+}
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+  align-self: center;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 8  },
+        item2: {"data-offset-y": 30 },
+        item3: {"data-offset-y": 0  }
+    }
+
+    let after = {
+        item1: {"data-offset-y": 16 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 8  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
+        <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
new file mode 100644
index 0000000000..136a36167a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the value of Self-Alignment properties</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+  font-family: Ahem;
+  text-orientation: sideways;
+  line-height: 1;
+}
+#container > div { writing-mode: vertical-lr; }
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 4 },
+        item2: {"data-offset-x": 0 },
+        item3: {"data-offset-x": 2 }
+    }
+
+    let after = {
+        item1: {"data-offset-x": 2 },
+        item2: {"data-offset-x": 60 },
+        item3: {"data-offset-x": 0  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
+        <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
new file mode 100644
index 0000000000..3145fb0cc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+  font-family: Ahem;
+  text-orientation: sideways;
+  line-height: 1;
+}
+#container > div { writing-mode: vertical-lr; }
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+  justify-self: center;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 2  },
+        item2: {"data-offset-x": 30 },
+        item3: {"data-offset-x": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 4 },
+        item2: {"data-offset-x": 0 },
+        item3: {"data-offset-x": 2 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
+        <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html
new file mode 100644
index 0000000000..ef8c0e4d34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://crbug.com/234191">
+<link rel="match" href="references/grid-baseline-001-ref.html">
+<meta name="assert" content="Check the first baselines of a grid container."/>
+
+<style>
+body {
+    margin: 0;
+}
+.inline-grid {
+    display: inline-grid;
+    background-color: lightgrey;
+    margin-top: 5px;
+    grid-auto-flow: column;
+}
+.grid {
+    display: grid;
+    background-color: grey;
+    margin-top: 10px;
+    grid-auto-flow: column;
+}
+.empty {
+    border-style: solid;
+    border-width: 5px 0px 10px;
+    padding: 2px 0px 4px;
+    margin: 10px 0px 20px;
+}
+.column {
+    grid-auto-flow: row;
+}
+.firstRowFirstColumn {
+    grid-column: 1;
+    grid-row: 1;
+}
+.secondRowFirstColumn {
+    grid-column: 1;
+    grid-row: 2;
+}
+</style>
+
+<body style="position: relative">
+
+<!-- If any of the grid items whose areas intersect the grid container's first
+row/column participate in baseline alignment, the grid container's baseline is
+the baseline of those grid items. -->
+<div>
+before text
+<div class="inline-grid" style="grid-auto-rows: 50px;">
+    <div style="align-self: end">below</div>
+    <div style="align-self: baseline; margin-top: 15px">baseline</div>
+    <div style="align-self: start">above</div>
+</div>
+after text
+</div>
+
+<!-- This grid has a baseline item, it's orthogonal but it still participates
+in baseline alignment. -->
+<div>
+before text
+<div class="inline-grid" style="grid-auto-rows: 40px">
+    <div style="align-self: end">below</div>
+    <div style="align-self: baseline; margin-top: 20px; writing-mode: vertical-rl"></div>
+    <div style="align-self: start">above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-grid">
+    <h2>h2 baseline</h2>
+    <div>above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-grid">
+    <div>baseline</div>
+    <h2>h2 below</h2>
+</div>
+after text
+</div>
+
+<!-- If the first grid item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-grid" style="width: 40px; height: 40px">
+    <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
+</div>
+of the grey box
+</div>
+
+<!-- If there are no griditems, align to the bottom of the margin box. -->
+<div>
+should align below the bottom
+<div class="empty inline-grid" style="width: 30px; height: 30px">
+</div>
+of the black line
+</div>
+
+<div>
+should align with the bottom
+<div class="inline-grid" style="width: 40px; height: 40px;">
+    <div style="width: 20px; height: 20px; border: 5px solid black; background: red;"></div>
+</div>
+of the red box
+</div>
+
+<!-- column-axis test cases. -->
+<div>
+before text
+<div class="inline-grid column">
+    <div>baseline</div>
+    <div>below</div>
+</div>
+after text
+</div>
+
+<!-- If the first grid item has an orthogonal baseline, use the synthesized
+baseline (bottom of the border box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-grid column" style="width: 40px; height: 40px;">
+    <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
+    <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
+</div>
+of the grey box
+</div>
+
+<!-- More tests on the right side of the page. -->
+<div style="position: absolute; top: 0; left: 400px; width: 360px">
+
+<!-- Ignore absolutely positioned grid items. -->
+<div>
+before text
+<div class="inline-grid">
+    <div style="position: absolute">absolute</div>
+    <div style="margin-top: 30px">baseline</div>
+</div>
+after text
+</div>
+
+<!-- We don't participate in baseline alignment if there's an auto margin. -->
+<div>
+before text
+<div class="inline-grid" style="grid-auto-rows: 40px;">
+    <div>baseline</div>
+    <div style="align-self: baseline; margin-top: auto">below</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div style="display: inline-block">
+<div class="inline-grid" style="height: 40px;">
+    <div>above</div>
+    <div style="align-self: baseline; margin-top: 10px">baseline</div>
+    <div>above</div>
+</div>
+after
+</div>
+text
+</div>
+
+<!-- The spec is a little unclear what should happen here. For now,
+align to the last line box. -->
+<div>
+    before text
+    <div style="display: inline-block">
+        <div class="grid" style="height: 30px;">
+            baseline
+        </div>
+    </div>
+    after text
+</div>
+
+<table style="background-color: lightgrey; margin-top: 5px">
+<tr style="height: 50px">
+  <td style="vertical-align: bottom">bottom</td>
+  <td style="vertical-align: baseline">baseline</td>
+  <td style="vertical-align: top">top</td>
+  <td style="vertical-align: baseline"><div class="grid">
+    <h2>h2 baseline</h2>
+    <div>above</div>
+  </div></td>
+</table>
+
+<!-- If a box contributing a baseline has a scrollbar, the box must be treated
+as being in its initial scroll position when computing the baseline. -->
+<div>
+before text
+<div id="grid-with-scrollbar" class="inline-grid" style="height: 65px; width: 150px">
+    <div id="griditem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
+        The baseline is based on<br>
+        the non-scrolled position;<br>
+        this won't line up.
+    </div>
+</div>
+after text
+</div>
+
+</div>
+
+<script>
+document.getElementById("griditem-with-scrollbar").scrollTop = 999;
+document.getElementById("grid-with-scrollbar").style.width = "auto";
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html
new file mode 100644
index 0000000000..b52eeff27e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://crbug.com/234191">
+<link rel="match" href="references/grid-baseline-002-ref.html">
+<meta name="assert" content="Check that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders."/>
+
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+.inline-block { display: inline-block; }
+.grid, .inline-grid {
+   background-color: lightgrey;
+   grid-auto-flow: column;
+}
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+</style>
+<div>
+before text
+<div class="border" style="display: inline-block; background-color: lightgrey">
+<div class="grid" style="height: 30px; margin-top: 7px; padding-top: 10px;">
+  baseline
+</div>
+</div>
+after text
+</div>
+
+<div>
+Should align
+<div class="inline-block border">
+  <div class="grid padding" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+      <div style="background-color: lightgrey"></div>
+  </div>
+</div>
+with the
+<div class="inline-block margin">
+  <div class="grid border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+      <div style="background-color: lightgrey"></div>
+  </div>
+</div>
+bottom of
+<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
+  <div class="grid margin border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+      <div style="background-color: lightgrey;"></div>
+  </div>
+</div>
+the grey box.
+</div>
+
+<div>
+Should align with the
+<div class="inline-block">
+  <div class="grid" style="background-color: white">
+      <div class="border padding margin" style="background-color: lightgrey;"></div>
+  </div>
+</div>
+bottom of the pink box.
+</div>
+
+<div>
+Should align 8px
+<div class="inline-grid margin border" style="grid-template-columns: 30px; grid-template-rows: 30px;"></div>
+below the bottom
+<div class="inline-grid margin border padding"></div>
+of the pink box.
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html
new file mode 100644
index 0000000000..bd411abed9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
+<link rel="help" href="https://crbug.com/234191">
+<link rel="match" href="references/grid-baseline-003-ref.html">
+<meta name="assert" content="Check that grid container baseline should be synthesized from the border edges when it has no baseline."/>
+
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+.inline-block { display: inline-block; }
+.grid, .inline-grid {
+   background-color: lightgrey;
+   grid-auto-flow: column;
+}
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+</style>
+
+<div>
+Should align with the bottom
+<div class="inline-block border margin padding" style="background-color: pink">
+  <div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
+      <div style="overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
+  </div>
+</div>
+of the horizontal scrollbar.
+</div>
+
+<div>
+Should align 10px below the
+<div class="inline-block" style="background-color: pink">
+  <div class="grid" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
+      <div style="overflow: scroll; padding-bottom: 10px; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
+  </div>
+</div>
+horizontal scrollbar, if one is visible.
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
new file mode 100644
index 0000000000..cd565a10ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order">
+<link rel="help" href="https://crbug.com/234191">
+<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/>
+
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body { margin: 0; }
+.container {
+    position: relative;
+    font: 10px/1 Ahem;
+    border: 5px solid;
+    width: 470px;
+}
+.grid {
+    display: inline-grid;
+    grid-template-columns: 50px 50px;
+    width: 150px;
+    background-color: transparent;
+    position: relative;
+}
+.twoRows { grid-template-rows: 50px 50px; }
+.threeRows { grid-template-rows: 50px 50px 50px; }
+.empty {
+    border-color: black;
+    border-style: solid;
+    margin: 15px 0px 30px;
+    border-width: 5px 0px 10px;
+    padding: 10px 0px 20px;
+}
+.item {
+    height: 25px;
+    border-color: gray;
+    border-style: solid;
+}
+.grid.grid > * {
+    background: silver;
+    background: rgba(0,0,0,0.3);
+}
+.target.target {
+    background: blue;
+    border-color: navy;
+}
+.style1 {
+    border-width: 5px 0px 10px;
+    padding: 10px 0px 20px;
+}
+.style2 {
+    border-width: 10px 0px 5px;
+    padding: 20px 0px 10px;
+    margin-top: 10px;
+}
+.style3 {
+    border-width: 10px 0px 20px;
+    padding: 5px 0px 10px;
+    margin-top: 20px;
+}
+
+.bothRowFirstColumn, .secondRowSecondColumn {
+    margin-right: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background-color: pink;
+}
+.firstRowBothColumn, .secondRowBothColumn {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    background-color: green;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid, container'); })">
+<div id="log"></div>
+<p>
+    The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
+    Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
+</p>
+
+<p>
+    This case shows 3 items located along the first row and in different columns.
+    The grid baseline is computed using the one located at first column (blue item)
+    regardless of source order.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="120">
+    <div class="grid" data-offset-x="0" data-offset-y="20">
+        <div class="item style1 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item style2 firstRowSecondColumn" data-offset-x="50"  data-offset-y="10"></div>
+        <div class="item style3 firstRowThirdColumn"  data-offset-x="100" data-offset-y="20"></div>
+    </div>
+    <div class="grid" data-offset-x="160" data-offset-y="10">
+        <div class="item style1 firstRowThirdColumn"  data-offset-x="100" data-offset-y="0"></div>
+        <div class="item style2 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="10"></div>
+        <div class="item style3 firstRowSecondColumn" data-offset-x="50"  data-offset-y="20"></div>
+    </div>
+    <div class="grid" data-offset-x="320" data-offset-y="0">
+        <div class="item style1 firstRowSecondColumn" data-offset-x="50"  data-offset-y="0"></div>
+        <div class="item style2 firstRowThirdColumn"  data-offset-x="100" data-offset-y="10"></div>
+        <div class="item style3 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="20"></div>
+    </div>
+</div>
+
+<p>
+    This case shows 3 items located along the first row and in different columns.
+    The baseline-aligned item (blue) always determines the grid baseline.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="120">
+    <div class="grid" data-offset-x="0" data-offset-y="0">
+        <div class="item style1 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item style2 firstRowSecondColumn" data-offset-x="50"  data-offset-y="10"></div>
+        <div class="item style3 firstRowThirdColumn alignSelfBaseline target"  data-offset-x="100" data-offset-y="20"></div>
+    </div>
+    <div class="grid" data-offset-x="160" data-offset-y="0">
+        <div class="item style1 firstRowThirdColumn"  data-offset-x="100" data-offset-y="0"></div>
+        <div class="item style2 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="10"></div>
+        <div class="item style3 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50"  data-offset-y="20"></div>
+    </div>
+    <div class="grid" data-offset-x="320" data-offset-y="20">
+        <div class="item style1 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50"  data-offset-y="0"></div>
+        <div class="item style2 firstRowThirdColumn"  data-offset-x="100" data-offset-y="10"></div>
+        <div class="item style3 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="20"></div>
+    </div>
+</div>
+
+<p>
+    This case shows 3 items' areas intersecting the first row and first column,
+    but none of them participate in baseline alignment in the first row,
+    so the dom order must be used to determine each grid's baseline.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="165">
+    <div class="grid twoRows" data-offset-x="0" data-offset-y="40">
+        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="bothRowFirstColumn style2" style="align-self: last baseline"  data-offset-x="0"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="160" data-offset-y="0">
+        <div class="bothRowFirstColumn target"  data-offset-x="0" data-offset-y="10"></div>
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="320" data-offset-y="55">
+        <div class="firstRowBothColumn target" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
+    </div>
+</div>
+
+<p>
+    This case shows 3 items' areas intersecting the first row and first column,
+    but one of the items participates in baseline alignment in the first row,
+    so such item is used to determine the grid's baseline
+    instead of using the dom order.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="165">
+    <div class="grid twoRows" data-offset-x="0" data-offset-y="55">
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn alignSelfBaseline target" style="width: 100px; height: 20px;"  data-offset-x="0"  data-offset-y="15"></div>
+        <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="160" data-offset-y="40">
+        <div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div>
+        <div class="firstRowFirstColumn alignSelfBaseline target" style="width: 50px; height: 50px;"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="320" data-offset-y="0">
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="bothRowFirstColumn alignSelfBaseline target" style="width: 40px; height: 80px;"  data-offset-x="0" data-offset-y="10"></div>
+    </div>
+</div>
+
+<p>
+    This case shows one of the grids with no items,
+    hence its baseline must be synthesized from its margin box.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="250">
+    <div class="grid twoRows" data-offset-x="0" data-offset-y="140">
+        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="160" data-offset-y="100">
+        <div class="bothRowFirstColumn target"  data-offset-x="0" data-offset-y="10"></div>
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+    </div>
+    <div class="grid empty twoRows target" data-offset-x="320" data-offset-y="15">
+    </div>
+</div>
+
+<p>
+    This case shows two of the grids with no items in their first row,
+    hence the items in the second row are evaluated.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="250">
+    <div id=first class="grid twoRows" data-offset-x="0" data-offset-y="80">
+        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
+    </div>
+    <div id=second class="grid threeRows" data-offset-x="160" data-offset-y="55">
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="100"></div>
+        <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="65"></div>
+        <div class="secondRowSecondColumn style3 alignSelfBaseline target" id="first"  data-offset-x="50"   data-offset-y="60"></div>
+    </div>
+    <div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
+        <div class="thirdRowSecondColumn"  data-offset-x="50"   data-offset-y="110"></div>
+        <div class="secondRowFirstColumn target"  data-offset-x="0" data-offset-y="60"></div>
+        <div class="secondRowBothColumn" data-offset-x="0"  data-offset-y="75"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html
new file mode 100644
index 0000000000..e32031779f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<title>
+  Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
+<link rel="match" href="references/grid-baseline-align-001-ref.html">
+
+<style>
+  @import "/fonts/ahem.css";
+  .grid {
+    border: solid silver;
+    margin: 1em 2px;
+    font: 20px/1 Ahem;
+
+    display: inline-grid;
+    vertical-align: top;
+    grid-template-columns: repeat(4, max-content);
+  }
+  .grid > div {
+    border: black 10px;
+    border-style: solid none;
+    color: orange;
+  }
+  div + div {
+    font-size: 2em;
+  }
+  div + div + div {
+    font-size: 50%;
+  }
+  .self > div {
+    align-self: baseline;
+  }
+  .content > div {
+    align-content: baseline;
+  }
+  div.stretch {
+    align-self: stretch;
+  }
+
+  .ref {
+    position: relative;
+    width: 80px;
+    height: 96px;
+  }
+  .ref > div {
+    position: absolute;
+  }
+  .ref1 { top:   16px; }
+  .ref2 { left:  20px; }
+  .ref3 { top:   24px;
+          left:  60px; }
+  .ref4 { right:  0px;
+          top:    0px;
+          bottom: 0px;
+          width: 10px; }
+
+  .ref.content > div:not(.stripe) {
+    border-color: transparent;
+  }
+  .stripe {
+    width: 80px;
+    height: 76px;
+  }
+</style>
+
+<p>Test passes if each pair of boxes is identical.</p>
+
+<div class="grid self">
+  <div>
+    p<br>
+    p<br>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div class="stretch">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<br>
+
+<div class="grid content">
+  <div>
+    p<br>
+    p<br>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div class="stretch">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html
new file mode 100644
index 0000000000..b6b04144ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>
+  CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions
+</title>
+<meta name="assert" content="
+  If baseline alignment is specified on a grid item whose size in that axis
+  depends on the size of an intrinsically-sized track (whose size is therefore
+  dependent on both the item’s size and baseline alignment, creating a cyclic
+  dependency), that item does not participate in baseline alignment, and
+  instead uses its fallback alignment as if that were originally specified.
+">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align">
+<link rel="match" href="references/grid-baseline-align-cycles-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    border: solid silver;
+    margin: 1em 0.25em;
+    display: inline-grid;
+    grid-template-columns: repeat(2, auto);
+    font: 20px/1 Ahem;
+    height: 5em;
+  }
+  .grid > div {
+    border: 1em aqua;
+    border-style: solid none;
+  }
+  .index {
+    padding: 1em 0;
+  }
+  .percent {
+    height: 20%;
+  }
+  .orthogonal {
+    height: 20%;
+    writing-mode: vertical-rl;
+  }
+
+  .self > div {
+    align-self: baseline;
+  }
+  .content > div {
+    align-content: baseline;
+  }
+  .self.ref > div {
+    align-self: start;
+  }
+  .content.ref > div {
+    align-content: start;
+  }
+</style>
+
+<p>Test passes if the upper set of boxes is identical to the lower set.
+
+<div class="grid self">
+  <div class="index">
+    X
+  </div>
+  <div class="percent orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid self">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid content">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid content">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<br>
+
+<div class="grid self ref">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html
new file mode 100644
index 0000000000..171fcd3fcd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<title>
+  Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
+<link rel="match" href="references/grid-baseline-justify-001-ref.html">
+
+<style>
+  @import "/fonts/ahem.css";
+  .grid {
+    border: solid silver;
+    margin: 1em 2px;
+    font: 20px/1 Ahem;
+
+    display: inline-grid;
+    vertical-align: top;
+    grid-template-rows: repeat(4, max-content);
+  }
+  .grid > div {
+    border: black 10px;
+    border-style: none solid;
+    color: orange;
+    writing-mode: vertical-rl;
+  }
+  div + div {
+    font-size: 2em;
+  }
+  div + div + div {
+    font-size: 50%;
+  }
+  .self > div {
+    justify-self: baseline;
+  }
+  .content > div {
+    align-content: baseline;
+  }
+  div.stretch {
+    justify-self: stretch;
+  }
+
+  .ref {
+    position: relative;
+    width: 96px;
+    height: 80px;
+  }
+  .ref > div {
+    position: absolute;
+  }
+  .ref1 { right:  16px; }
+  .ref2 { top:    20px;
+          right:   0px; }
+  .ref3 { right:  24px;
+          top:    60px; }
+  .ref4 { bottom:  0px;
+          right:   0px;
+          left:    0px;
+          height: 10px; }
+
+  .ref.content > div:not(.stripe) {
+    border-color: transparent;
+  }
+  .stripe {
+    width: 76px;
+    height: 80px;
+  }
+</style>
+
+<p>Test passes if each pair of boxes is identical.</p>
+
+<div class="grid self">
+  <div>
+    p<br>
+    p<br>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div class="stretch">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<br>
+
+<div class="grid content">
+  <div>
+    p<br>
+    p<br>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div class="stretch">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
new file mode 100644
index 0000000000..e3a880f66e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
new file mode 100644
index 0000000000..7390548371
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    item1.style.height = "100px";
+
+    item1.setAttribute("data-offset-y", "50");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
new file mode 100644
index 0000000000..f451ebeae7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid items's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 300px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    item1.style.height = "100px";
+
+    item1.setAttribute("data-offset-y", "50");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
new file mode 100644
index 0000000000..4d0a092e00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 300px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: min-content;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
new file mode 100644
index 0000000000..9231779e2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 10px/1 Ahem;
+      color: blue;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXXX</div>
+    <div id="item2">XXXXX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "90");
+    item2.setAttribute("data-offset-y", "345");
+    checkLayout('#grid', false);
+
+    item2.style.fontSize = "40px";
+
+    item1.setAttribute("data-offset-y", "90");
+    item2.setAttribute("data-offset-y", "330");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
new file mode 100644
index 0000000000..ccb2dfd5dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      font: 10px/1 Ahem;
+      grid-template-columns: 100px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      color: green;
+  }
+  #item2 {
+      color: blue;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXXX</div>
+    <div id="item2">XXXXX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "95");
+    item2.setAttribute("data-offset-y", "345");
+    checkLayout('#grid', false);
+
+    grid.style.fontSize = "40px";
+
+    item1.setAttribute("data-offset-y", "80");
+    item2.setAttribute("data-offset-y", "330");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
new file mode 100644
index 0000000000..da51ff321c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 200px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html
new file mode 100644
index 0000000000..9b489ac119
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="match" href="../reference/grid-block-axis-alignment-auto-margins-008-ref.html">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed after the grid's intrinsic size is determined.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: auto;
+      grid-template-rows: 40% 60%;
+      height: 50vh;
+      width: auto;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 40px/1 Ahem;
+      color: blue;
+  }
+</style>
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div id="item1">XXX</div>
+    <div id="item2">XXXXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
new file mode 100644
index 0000000000..9216ed370c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with its alignment container's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
new file mode 100644
index 0000000000..4a4a397ffa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with its alignment container's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
new file mode 100644
index 0000000000..c1f9b16ef0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'left' value for align-self are flushed with its alignment container's 'left' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: left;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: left;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: left;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
new file mode 100644
index 0000000000..d52ed74f6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'right' value for align-self are flushed with its alignment container's 'right' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: right;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: right;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: right;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
new file mode 100644
index 0000000000..7c903389f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="70"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="60"  data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="70"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="60"  data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="70"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="30"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
new file mode 100644
index 0000000000..b1f2136a57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-start' value of align-self behaves like 'start' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: flex-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: flex-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: flex-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: flex-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
new file mode 100644
index 0000000000..eeeadeff45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-end">
+<meta name="assert" content="The 'flex-end' value of align-self behaves like 'end' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: flex-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: flex-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: flex-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: flex-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
new file mode 100644
index 0000000000..1329501015
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
new file mode 100644
index 0000000000..60a135dfee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
new file mode 100644
index 0000000000..eb01d61bc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
new file mode 100644
index 0000000000..ad3beb8ab1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
new file mode 100644
index 0000000000..57db133a7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="250" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
new file mode 100644
index 0000000000..9854540a6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
new file mode 100644
index 0000000000..2f0cd54c42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="45"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="45"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="345" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="395" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="260" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="95"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
new file mode 100644
index 0000000000..d2bd432d9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="250" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="100" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
new file mode 100644
index 0000000000..53284b4678
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="440" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="220" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="410" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="250" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
new file mode 100644
index 0000000000..f20ac0d02c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: baseline;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: baseline;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: baseline;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: baseline;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html
new file mode 100644
index 0000000000..975360f4c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Sticky positioned grid items are aligned correcly.">
+<style>
+.container {
+  border: solid 1px;
+  overflow: auto;
+  height: 500px;
+}
+.grid {
+  position: relative;
+  float: left;
+  display: grid;
+  grid-template-columns: 75px 75px 75px 75px;
+  grid-template-rows: 100px 100px 100px 300px;
+  background: grey;
+  height: 400px;
+  margin-right: 20px;
+}
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 20px;
+  height: 20px;
+  background-color: #cae8ca;
+}
+.item1 {
+  top: 0px;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  top: 0px;
+  grid-column: 2;
+  grid-row: 2;
+}
+.item3 {
+  top: 0px;
+  grid-column: 3;
+  grid-row: 3;
+}
+.item4 {
+  grid-column: 4;
+  grid-row: 4;
+  background: lightgrey;
+}
+.scroll { overflow: auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div class="container">
+    <div style="height:30px"></div>
+    <div class="grid">
+        <div class="item1 sticky alignSelfStart"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item2 sticky alignSelfCenter" data-offset-x="75"  data-offset-y="140"></div>
+        <div class="item3 sticky alignSelfEnd"    data-offset-x="150" data-offset-y="280"></div>
+        <div class="item4"></div>
+    </div>
+    <div class="grid scroll">
+        <div class="item1 sticky alignSelfStart"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item2 sticky alignSelfCenter" data-offset-x="75"  data-offset-y="140"></div>
+        <div class="item3 sticky alignSelfEnd"    data-offset-x="150" data-offset-y="280"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="height:2000px"></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html
new file mode 100644
index 0000000000..357cbe13e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Sticky positioned grid items are aligned correcly, but preserving non-static positions when required.">
+<style>
+.container {
+  border: solid 1px;
+  overflow: auto;
+  height: 500px;
+}
+.grid {
+  position: relative;
+  float: left;
+  display: grid;
+  grid-template-columns: 75px 75px 75px 75px;
+  grid-template-rows: 100px 100px 100px 300px;
+  background: grey;
+  height: 400px;
+  margin-right: 20px;
+}
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 20px;
+  height: 20px;
+  background-color: #cae8ca;
+}
+.item1 {
+  top: 40px;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  top: 100px;
+  grid-column: 2;
+  grid-row: 2;
+}
+.item3 {
+  top: 290px;
+  grid-column: 3;
+  grid-row: 3;
+}
+.item4 {
+  grid-column: 4;
+  grid-row: 4;
+  background: lightgrey;
+}
+.scroll { overflow: auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div class="container">
+    <div style="height:30px"></div>
+    <div class="grid">
+        <div class="item1 sticky alignSelfStart"  data-offset-x="0"   data-offset-y="10"></div>
+        <div class="item2 sticky alignSelfCenter" data-offset-x="75"  data-offset-y="140"></div>
+        <div class="item3 sticky alignSelfEnd"    data-offset-x="150" data-offset-y="280"></div>
+        <div class="item4"></div>
+    </div>
+    <div class="grid scroll">
+        <div class="item1 sticky alignSelfStart"  data-offset-x="0"   data-offset-y="40"></div>
+        <div class="item2 sticky alignSelfCenter" data-offset-x="75"  data-offset-y="140"></div>
+        <div class="item3 sticky alignSelfEnd"    data-offset-x="150" data-offset-y="290"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="height:2000px"></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
new file mode 100644
index 0000000000..0d3a556f40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and verticalRL item</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn verticalRL" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>Horizontal grid and verticalLR item</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn horizontalTB"         data-offset-x="35" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and Horizontal item</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn horizontalTB"          data-offset-x="100" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
new file mode 100644
index 0000000000..c20489e9a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and item with fixed height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn fixedHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="firstRowSecondColumn bigFont"     data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="175" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
new file mode 100644
index 0000000000..10a9adb9ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.height75 { height: 75px; }
+.width25  { width: 25px; }
+.width75  { width: 75px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and item with relative height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn relativeHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont"        data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with relative width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn relativeWidth"         data-offset-x="30" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with rlative width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn relativeWidth"          data-offset-x="200" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight"  data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
new file mode 100644
index 0000000000..8c6d7abe4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: auto auto / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and item with fixed height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn fixedHeight" data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="firstRowSecondColumn bigFont"    data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedWidth"             data-offset-x="85" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight"  data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html
new file mode 100644
index 0000000000..6207ce5b88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body { overflow: scroll; }
+.container { position: relative; }
+.grid {
+  position: relative;
+  grid-template-rows: 150px;
+  text-orientation: sideways;
+  font: 20px/1 Ahem;
+}
+.width100 { width: 100px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+.bigFont  { font-size: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>verticalLR grid and parallel items</pre>
+
+<div class="grid width100 alignItemsBaseline">
+    <div class="firstRowFirstColumn verticalLR"          data-offset-x="0"  data-offset-y="0"  data-expected-width="35" data-expected-height="120">É É ÉÉ</div>
+    <div class="firstRowSecondColumn verticalLR bigFont" data-offset-x="35" data-offset-y="70" data-expected-width="65" data-expected-height="50">É</div>
+</div>
+
+<pre>verticalRL grid and parallel items</pre>
+
+<div class="grid width100 alignItemsBaseline">
+    <div class="firstRowFirstColumn verticalRL"          data-offset-x="0"  data-offset-y="0"  data-expected-width="35" data-expected-height="120">É É ÉÉ</div>
+    <div class="firstRowSecondColumn verticalRL bigFont" data-offset-x="35" data-offset-y="70" data-expected-width="65" data-expected-height="50">É</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html
new file mode 100644
index 0000000000..51c7b18e94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Ignore auto-margins in the track sizing algorithm</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=776581"/>
+<link rel="match" href="../reference/grid-container-auto-margins-scrollbars-001-ref.html">
+<meta name="assert" content="This test ensures that the grid logic ignores any 'auto' margin during the track sizing algorithm. Previously resolved auto-margins should not affect the track sizing computation."/>
+<style>
+body {
+   display: grid;
+   grid-template-columns: auto;
+   grid-template-rows: 1fr auto;
+   height: 100vh;
+}
+.item1 {
+   margin: 0px auto;
+}
+.item2 {
+   background-color: cyan;
+   height: 50px;
+}
+</style>
+<div class="item1">item1</div>
+<div class="item2">item2</div>
+<script>
+    document.body.style = "overflow: hidden;";
+    document.body.offsetLeft;
+    document.body.style = "overflow: auto;";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html
new file mode 100644
index 0000000000..aa6e77871a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container baseline</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<meta name="assert" content="Grid container baseline should match the element with 'align-self: baseline' in the first row, even if it's an orthogonal element.">
+<style>
+.wrapper {
+  position: relative;
+  margin: 10px;
+  line-height: 0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-flow: column;
+  background: grey;
+}
+
+.i1 {
+  width: 150px;
+  height: 100px;
+  background: magenta;
+}
+
+.i2 {
+  align-self: baseline;
+  width: 75px;
+  height: 50px;
+  background: cyan;
+}
+
+.i3 {
+  width: 100px;
+  height: 75px;
+  background: yellow;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.wrapper')">
+
+<div class="wrapper" style="writing-mode: horizontal-tb;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-y="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: horizontal-tb;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: vertical-lr;" data-offset-y="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: horizontal-tb;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: vertical-rl;" data-offset-y="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation:  sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html
new file mode 100644
index 0000000000..4c47ffdda9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html
@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items in just one cell." />
+
+<style>
+.grid {
+  grid-template-columns: 200px 100px;
+  grid-template-rows: 100px 50px;
+  width: 500px;
+  height: 350px;
+  position: relative;
+  font: 10px/1 Ahem;
+}
+
+.gridGaps {
+  grid-gap: 10px 20px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid contentSpaceBetween itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid contentSpaceBetween itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid contentSpaceAround itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid contentSpaceAround itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid contentSpaceEvenly itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid contentSpaceEvenly itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceBetween itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceBetween itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceAround itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceAround itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceEvenly itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceEvenly itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<!-- RTL direction. -->
+
+<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceBetween itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceBetween itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceAround itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceAround itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceEvenly itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceEvenly itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceAround itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceAround itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html
new file mode 100644
index 0000000000..68835c0461
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html
@@ -0,0 +1,561 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=602670">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items spanning more than one track." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  position: relative;
+}
+.spanningTwo {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  width: 300px;
+  height: 200px;
+}
+.spanningThree {
+  grid-auto-columns: 50px;
+  grid-auto-rows: 50px;
+  grid-template-areas: ". . . . . ."
+                       ". b b b c ."
+                       ". . . . c ."
+                       ". . . . c ."
+                       ". . . . . .";
+  width: 550px;
+  height: 450px;
+}
+
+.gridRowColumnGaps {
+  grid-row-gap: 20px;
+  grid-column-gap: 10px;
+}
+
+.i1 { grid-row: 1; }
+.i2 { grid-row: 2; }
+.i3 { grid-row: 3; grid-column: 6; }
+.i4 { grid-row: 4; grid-column: 6; }
+.i5 { grid-row: 5; grid-column: 6; }
+
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: minmax(20px, auto);
+  grid-auto-rows: minmax(40px, auto);
+}
+
+.cell {
+  width: 20px;
+  height: 40px;
+}
+.cell1 {
+  width: 20px;
+  height: 20px;
+}
+</style>
+</head>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
+  <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
+  <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'default' | self-alignment: center</p>
+  <div class="grid spanningThree">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="115" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="200" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'default' | self-alignment: end</p>
+  <div class="grid spanningThree">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="200" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningThree contentSpaceBetween">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningThree contentSpaceBetween">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p>
+  <div class="grid spanningThree gridRowColumnGaps">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="135" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="240" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p>
+  <div class="grid spanningThree gridRowColumnGaps">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="210" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="240" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<!-- Same expected result than without gaps because space-between just use the remaining available space. -->
+<div style="position: relative">
+  <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<!-- Same expected result than without gaps because space-between just use the remaining available space. -->
+<div style="position: relative">
+  <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
+  <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
+  <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'default' | self-alignment: center</p>
+  <div class="grid spanningThree directionRTL">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="415" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="330" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'default' | self-alignment: end</p>
+  <div class="grid spanningThree directionRTL">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="350" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="330" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningThree contentSpaceBetween directionRTL">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningThree contentSpaceBetween directionRTL">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p>
+  <div class="grid spanningThree gridRowColumnGaps directionRTL">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="395" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="290" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p>
+  <div class="grid spanningThree gridRowColumnGaps directionRTL">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="320" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="290" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html
new file mode 100644
index 0000000000..32c3e3e474
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and auto sized tracks.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that 'stretch' value for content alignment properties is applied only on 'auto-sized' tracks, which are the ones with an 'auto' max sizing function." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  display: grid;
+  background-color: grey;
+  position: relative;
+}
+
+.definiteSize {
+  width: 200px;
+  height: 300px;
+}
+
+.item {
+  width: 40px;
+  height: 80px;
+}
+
+.content {
+  width: 20px;
+  height: 40px;
+}
+
+.firstRowFirstColumn {
+  background-color: blue;
+  grid-column: 1;
+  grid-row: 1;
+}
+.firstRowSecondColumn {
+  background-color: lime;
+  grid-column: 2;
+  grid-row: 1;
+}
+.secondRowFirstColumn {
+  background-color: purple;
+  grid-column: 1;
+  grid-row: 2;
+}
+.secondRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: 2;
+}
+
+/* track sizes allowed to be stetched */
+.autoTracks { grid: auto auto / auto auto; }
+.autoMaxTracks { grid:  minmax(40px, auto) minmax(40px, auto) / minmax(20px, auto) minmax(20px, auto); }
+
+/* content-sized tracks disallowed to be stetched */
+.minContentTracks { grid: min-content min-content / min-content min-content; }
+.maxContentTracks { grid: max-content max-content / max-content max-content; }
+.minMaxWithMaxContentTracks { grid: minmax(20px, max-content) minmax(20px, max-content) / minmax(20px, max-content) minmax(20px, max-content); }
+.minMaxWithMinContentTracks { grid: minmax(20px, min-content) minmax(20px, min-content) / minmax(20px, min-content) minmax(20px, min-content); }
+.minMaxWithMinAutoTracks { grid: minmax(auto, max-content) minmax(auto, max-content) / minmax(auto, max-content) minmax(auto, max-content); }
+.fitContentTracks { grid: fit-content(20px) fit-content(20px) / fit-content(40px) fit-content(40px); font: 10px/1 Ahem; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+</head>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+  <p>cols: 'auto' | rows: 'auto' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize autoTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'minmax(20px, auto)' | rows: 'minmax(40px, auto)' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize autoMaxTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'min-content' | rows: 'min-content' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize minContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'max-content' | rows: 'max-content' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize maxContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'minmax(20px, max-content)' | rows: 'minmax(20px, max-content)' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize minMaxWithMaxContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'minmax(20px, min-content)' | rows: 'minmax(20px, min-content)' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize minMaxWithMinContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'minmax(auto, max-content)' | rows: 'minmax(auto, max-content)' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize minMaxWithMinAutoTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'fit-content(40px)' | rows: 'fit-content(20px)' | definite-sized container | content-sized items</p>
+  <div class="grid contentStretch itemsStart definiteSize fitContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20">X XX XX X</div>
+    <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="20">X XX XX X</div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20">X XX XX X</div>
+    <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="20" data-expected-width="40" data-expected-height="20">X XX XX X</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html
new file mode 100644
index 0000000000..e3e3329583
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html
@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and overflow alignment.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." />
+
+<style>
+body {
+  margin: 0;
+}
+
+.container {
+  position: relative;
+  float: left;
+}
+
+.grid {
+  grid-template-columns: 50px 50px;
+  grid-template-rows: 100px 100px;
+}
+
+.contentSizedTracks {
+  grid-template:  max-content 100px / max-content 50px;
+}
+
+.overflowWidth {
+  width: 60px;
+  height: 300px;
+}
+
+.overflowHeight {
+  width: 200px;
+  height: 150px;
+}
+
+.item1 {
+  width: 50px;
+  height: 150px;
+}
+
+.item2 {
+  width: 150px;
+  height: 100px;
+}
+
+.minSize {
+  min-width: 300px;
+  min-height: 400px;
+}
+
+.maxSize {
+  max-width: 100px;
+  max-height: 100px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+  <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+  <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid fit-content contentEndUnsafe" data-expected-width="100" data-expected-height="200">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
+  <div class="grid fit-content contentCenterUnsafe" data-expected-width="100" data-expected-height="200">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100">
+    <div class="item1 firstRowSecondColumn" data-offset-x="50" data-offset-y="-150" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="-100" data-offset-y="0" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
+  <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100">
+    <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400">
+    <div class="item1 firstRowSecondColumn" data-offset-x="250" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="100" data-offset-y="300" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400">
+    <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html
new file mode 100644
index 0000000000..e358c7b210
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and overflow alignment.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1527539">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." />
+
+<style>
+body {
+  margin: 0;
+}
+
+.container {
+  position: relative;
+  float: left;
+}
+
+.grid {
+  grid-template-columns: 50px 50px;
+  grid-template-rows: 100px 100px;
+  padding: 30px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.contentSizedTracks {
+  grid-template:  max-content 100px / max-content 50px;
+}
+
+.overflowWidth {
+  width: 60px;
+  height: 300px;
+}
+
+.overflowHeight {
+  width: 200px;
+  height: 150px;
+}
+
+.item1 {
+  width: 50px;
+  height: 150px;
+}
+
+.item2 {
+  width: 150px;
+  height: 100px;
+}
+
+.minSize {
+  min-width: 300px;
+  min-height: 400px;
+}
+
+.maxSize {
+  max-width: 100px;
+  max-height: 100px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="110" data-expected-scroll-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="205">
+    <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+  <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260">
+    <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="60" data-expected-scroll-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="-70" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="-70" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="-20" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="-20" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+  <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260">
+    <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid fit-content contentEndUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260">
+    <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
+  <div class="grid fit-content contentCenterUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260">
+    <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div class="item1 firstRowSecondColumn" data-offset-x="20" data-offset-y="-180" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="-130" data-offset-y="-30" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
+  <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="180" data-expected-scroll-height="205">
+    <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400">
+    <div class="item1 firstRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="70" data-offset-y="270" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400">
+    <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
new file mode 100644
index 0000000000..1d83f53a47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content alignment second pass</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  width: 100px;
+  height: 50px;
+  font: 25px/1 Ahem;
+  margin: 10px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentStretch">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentStart">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentCenter">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="25" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentEnd">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+  <div class="firstRowSecondColumn" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
+</div>
+
+<div class="grid contentSpaceEvenly" style="width: 105px;">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+  <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
+</div>
+
+<div class="grid contentSpaceAround" style="width: 115px;">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+  <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
new file mode 100644
index 0000000000..74a783bce2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content alignment second pass</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  font: 20px/1 Ahem;
+  margin: 10px;
+  display: inline-grid;
+  grid: 50% / 70%;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentStretch" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentStart" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentCenter" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="10" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentEnd" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentSpaceBetween" data-expected-width="100" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="70" data-expected-height="20">X</div>
+</div>
+
+<div class="grid contentSpaceEvenly" style="grid-template-rows: 30%;" data-expected-width="100" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="24">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div>
+</div>
+
+<div class="grid contentSpaceAround" style="grid-template-rows: 25%;" data-expected-width="100" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="20">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html
new file mode 100644
index 0000000000..c9aa165e80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: dynamic content alignment with abspos elements.</title>
+<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1248940">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that dynamically changing alignment for abspos grid items works as expected." />
+
+<style>
+body {
+  margin: 0px;
+  width: 800px;
+}
+
+.grid {
+  width: 100%;
+  height: 600px;
+}
+
+.a {
+    width: 140px;
+    height: 60px;
+    border: 1px solid purple;
+    position: absolute;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  function updateAlignmentAndCheckLayout() {
+    let item = document.getElementById("item");
+    item.style.alignSelf = "center";
+    item.style.justifySelf = "center";
+    checkLayout('.grid');
+  }
+</script>
+</head>
+
+<body onload="updateAlignmentAndCheckLayout()">
+
+  <div class="grid" data-expected-width="800" data-expected-height="600">
+    <div class="a" id="item" data-offset-x="329" data-offset-y="269" data-expected-width="142" data-expected-height="62"></div>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html
new file mode 100644
index 0000000000..6333c13b00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  position: relative;
+  width: 300px;
+  height: 200px;
+}
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: auto;
+  grid-auto-rows: auto;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
+    <div class="b" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
+    <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="40" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
+    <div class="b" data-offset-x="240" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
+    <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="60" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
+    <div class="b" data-offset-x="220" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
+    <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="b" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="140" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
+    <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="140" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
+    <div class="b" data-offset-x="40" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
+    <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly''</p>
+  <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="140" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
+    <div class="b" data-offset-x="60" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
+    <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html
new file mode 100644
index 0000000000..d1b256bc0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-lr).</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-lr'." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  position: relative;
+  width: 200px;
+  height: 300px;
+}
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: auto;
+  grid-auto-rows: auto;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="160" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="130" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="120" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html
new file mode 100644
index 0000000000..f3102a82b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-rl).</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-rl'." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  position: relative;
+  width: 200px;
+  height: 300px;
+}
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: auto;
+  grid-auto-rows: auto;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that Content Distribution alignment is applied correctly when items span more than one track.</p>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="30" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html
new file mode 100644
index 0000000000..7b53a2897b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 25px 25px;
+  grid-template-rows: 25px 25px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 50px; left: 50px;"></div>
+    <div style="top: 125px; left: 125px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html
new file mode 100644
index 0000000000..194934bb93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px;
+  grid-template-rows: 20px 20px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html
new file mode 100644
index 0000000000..ed6e322639
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px;
+  grid-template-rows: 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 40px; left: 40px;"></div>
+    <div style="top: 140px; left: 140px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html
new file mode 100644
index 0000000000..419d0fb1bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html
new file mode 100644
index 0000000000..2830aecab6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution default value</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties have 'stretch' as default value and render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html
new file mode 100644
index 0000000000..61cfe2b68e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px;
+  grid-template-rows: 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 50px; left: 50px;"></div>
+    <div style="top: 130px; left: 130px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html
new file mode 100644
index 0000000000..d4dce5dc95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 35px; left: 90px;"></div>
+    <div style="top: 35px; left: 145px;"></div>
+    <div style="top: 90px; left: 35px;"></div>
+    <div style="top: 145px; left: 35px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html
new file mode 100644
index 0000000000..3e381ec68b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 30px; left: 90px;"></div>
+    <div style="top: 30px; left: 150px;"></div>
+    <div style="top: 90px; left: 30px;"></div>
+    <div style="top: 150px; left: 30px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html
new file mode 100644
index 0000000000..aa28a980b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 25px 25px 25px 25px;
+  grid-template-rows: 25px 25px 25px 25px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 65px;"></div>
+    <div style="top: 20px; left: 110px;"></div>
+    <div style="top: 65px; left: 110px;"></div>
+    <div style="top: 110px; left: 110px;"></div>
+    <div style="top: 155px; left: 20px;"></div>
+    <div style="top: 155px; left: 155px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html
new file mode 100644
index 0000000000..cb08775cd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 15px;
+  height: 15px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 15px 15px 15px 15px;
+  grid-template-rows: 15px 15px 15px 15px;
+  grid-row-gap: 5px;
+  grid-column-gap: 5px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 25px; left: 70px;"></div>
+    <div style="top: 25px; left: 115px;"></div>
+    <div style="top: 70px; left: 115px;"></div>
+    <div style="top: 115px; left: 115px;"></div>
+    <div style="top: 160px; left: 25px;"></div>
+    <div style="top: 160px; left: 160px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html
new file mode 100644
index 0000000000..57eb3d0eac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px;
+  grid-template-rows: 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html
new file mode 100644
index 0000000000..e45dbec8fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 90px;"></div>
+    <div style="top: 0px; left: 180px;"></div>
+    <div style="top: 90px; left: 0px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html
new file mode 100644
index 0000000000..3e1df650fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 90px;"></div>
+    <div style="top: 0px; left: 180px;"></div>
+    <div style="top: 90px; left: 0px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html
new file mode 100644
index 0000000000..423aad172b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px 20px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 60px;"></div>
+    <div style="top: 0px; left: 120px;"></div>
+    <div style="top: 60px; left: 120px;"></div>
+    <div style="top: 120px; left: 120px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html
new file mode 100644
index 0000000000..ef4c857db6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 60px;"></div>
+    <div style="top: 0px; left: 120px;"></div>
+    <div style="top: 60px; left: 120px;"></div>
+    <div style="top: 120px; left: 120px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html
new file mode 100644
index 0000000000..11a66915de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 25px 25px;
+  grid-template-rows: 25px 25px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 35px; left: 35px;"></div>
+    <div style="top: 140px; left: 140px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html
new file mode 100644
index 0000000000..9a490ad948
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 40px; left: 140px;"></div>
+    <div style="top: 40px; left: 240px;"></div>
+    <div style="top: 140px; left: 40px;"></div>
+    <div style="top: 240px; left: 40px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html
new file mode 100644
index 0000000000..1ba4f54aa4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 90px;"></div>
+    <div style="top: 20px; left: 160px;"></div>
+    <div style="top: 90px; left: 20px;"></div>
+    <div style="top: 90px; left: 20px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html
new file mode 100644
index 0000000000..49ca22eb24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 15px; left: 65px;"></div>
+    <div style="top: 15px; left: 115px;"></div>
+    <div style="top: 65px; left: 115px;"></div>
+    <div style="top: 115px; left: 115px;"></div>
+    <div style="top: 165px; left: 15px;"></div>
+    <div style="top: 165px; left: 165px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html
new file mode 100644
index 0000000000..249f57d93f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 100px;"></div>
+    <div style="top: 20px; left: 180px;"></div>
+    <div style="top: 100px; left: 180px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+    <div style="top: 260px; left: 20px;"></div>
+    <div style="top: 260px; left: 260px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html
new file mode 100644
index 0000000000..6a5469fc8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 95px;
+  height: 95px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 105px; left: 105px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html
new file mode 100644
index 0000000000..15a69c1102
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto auto auto;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 100px;"></div>
+    <div style="top: 0px; left: 200px;"></div>
+    <div style="top: 100px; left: 0px;"></div>
+    <div style="top: 200px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html
new file mode 100644
index 0000000000..f5d07b7648
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 60px;
+  height: 60px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto auto auto;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 70px;"></div>
+    <div style="top: 0px; left: 140px;"></div>
+    <div style="top: 70px; left: 0px;"></div>
+    <div style="top: 140px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html
new file mode 100644
index 0000000000..1b6932bca5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 50px;
+  height: 50px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto auto auto;
+  grid-template-rows: auto auto auto auto;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 50px;"></div>
+    <div style="top: 0px; left: 100px;"></div>
+    <div style="top: 50px; left: 100px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+    <div style="top: 150px; left: 0px;"></div>
+    <div style="top: 150px; left: 150px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html
new file mode 100644
index 0000000000..f229a56f4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 60px;
+  height: 60px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: auto auto auto auto;
+  grid-template-rows: auto auto auto auto;
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 80px;"></div>
+    <div style="top: 0px; left: 160px;"></div>
+    <div style="top: 80px; left: 160px;"></div>
+    <div style="top: 160px; left: 160px;"></div>
+    <div style="top: 240px; left: 0px;"></div>
+    <div style="top: 240px; left: 240px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html
new file mode 100644
index 0000000000..8f5a8111c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="The fallback alignment for 'space-evenly' should be 'safe center'.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 50px; height: 50px; align-content: space-evenly; justify-content: space-evenly;">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html
new file mode 100644
index 0000000000..35e300ee64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="The fallback alignment for 'space-around' should be 'safe center'.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 50px; height: 50px; align-content: space-around; justify-content: space-around;">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html
new file mode 100644
index 0000000000..216b05a4d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="The fallback alignment for 'space-between' should be 'start'.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 50px; height: 50px; align-content: space-between; justify-content: space-between;">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-029.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-029.html
new file mode 100644
index 0000000000..95f5281379
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-029.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+<meta name="assert" content="Alignment must work after max-width clamps the aspect ratio.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 100px; aspect-ratio: 2; max-width: 50px; align-content: center;">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html
new file mode 100644
index 0000000000..ebd169cf59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-evenly'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 25px);
+  grid-template-rows: repeat(auto-fit, 25px);
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 50px; left: 50px;"></div>
+    <div style="top: 125px; left: 125px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html
new file mode 100644
index 0000000000..a48c377ef3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-between'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  display: grid;
+  z-index: 1;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html
new file mode 100644
index 0000000000..25c03022a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-around'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 40px; left: 40px;"></div>
+    <div style="top: 140px; left: 140px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html
new file mode 100644
index 0000000000..a280a69871
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html
new file mode 100644
index 0000000000..34d62116ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 2x2 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 50px; left: 50px;"></div>
+    <div style="top: 130px; left: 130px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html
new file mode 100644
index 0000000000..151d34d2bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 35px; left: 90px;"></div>
+    <div style="top: 35px; left: 145px;"></div>
+    <div style="top: 90px; left: 35px;"></div>
+    <div style="top: 145px; left: 35px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html
new file mode 100644
index 0000000000..061e93bae7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 30px; left: 90px;"></div>
+    <div style="top: 30px; left: 150px;"></div>
+    <div style="top: 90px; left: 30px;"></div>
+    <div style="top: 150px; left: 30px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html
new file mode 100644
index 0000000000..1b7135e70b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 25px);
+  grid-template-rows: repeat(auto-fit, 25px);
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 65px;"></div>
+    <div style="top: 20px; left: 110px;"></div>
+    <div style="top: 65px; left: 110px;"></div>
+    <div style="top: 110px; left: 110px;"></div>
+    <div style="top: 155px; left: 20px;"></div>
+    <div style="top: 155px; left: 155px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html
new file mode 100644
index 0000000000..0bc4adae76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 15px;
+  height: 15px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 15px);
+  grid-template-rows: repeat(auto-fit, 15px);
+  grid-row-gap: 5px;
+  grid-column-gap: 5px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 25px; left: 70px;"></div>
+    <div style="top: 25px; left: 115px;"></div>
+    <div style="top: 70px; left: 115px;"></div>
+    <div style="top: 115px; left: 115px;"></div>
+    <div style="top: 160px; left: 25px;"></div>
+    <div style="top: 160px; left: 160px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html
new file mode 100644
index 0000000000..eccf0041c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 2x2 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html
new file mode 100644
index 0000000000..fca4df588d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 90px;"></div>
+    <div style="top: 0px; left: 180px;"></div>
+    <div style="top: 90px; left: 0px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html
new file mode 100644
index 0000000000..4250c14126
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 90px;"></div>
+    <div style="top: 0px; left: 180px;"></div>
+    <div style="top: 90px; left: 0px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html
new file mode 100644
index 0000000000..f20741e4a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 60px;"></div>
+    <div style="top: 0px; left: 120px;"></div>
+    <div style="top: 60px; left: 120px;"></div>
+    <div style="top: 120px; left: 120px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html
new file mode 100644
index 0000000000..78d2477109
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 60px;"></div>
+    <div style="top: 0px; left: 120px;"></div>
+    <div style="top: 60px; left: 120px;"></div>
+    <div style="top: 120px; left: 120px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html
new file mode 100644
index 0000000000..e8247e0419
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 2x2 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 25px);
+  grid-template-rows: repeat(auto-fit, 25px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 35px; left: 35px;"></div>
+    <div style="top: 140px; left: 140px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html
new file mode 100644
index 0000000000..511961f34e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 40px; left: 140px;"></div>
+    <div style="top: 40px; left: 240px;"></div>
+    <div style="top: 140px; left: 40px;"></div>
+    <div style="top: 240px; left: 40px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html
new file mode 100644
index 0000000000..f587301599
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 90px;"></div>
+    <div style="top: 20px; left: 160px;"></div>
+    <div style="top: 90px; left: 20px;"></div>
+    <div style="top: 90px; left: 20px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html
new file mode 100644
index 0000000000..d91c1c5cab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 15px; left: 65px;"></div>
+    <div style="top: 15px; left: 115px;"></div>
+    <div style="top: 65px; left: 115px;"></div>
+    <div style="top: 115px; left: 115px;"></div>
+    <div style="top: 165px; left: 15px;"></div>
+    <div style="top: 165px; left: 165px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html
new file mode 100644
index 0000000000..7a09ce699d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 100px;"></div>
+    <div style="top: 20px; left: 180px;"></div>
+    <div style="top: 100px; left: 180px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+    <div style="top: 260px; left: 20px;"></div>
+    <div style="top: 260px; left: 260px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html
new file mode 100644
index 0000000000..f0a29e7f45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 95px;
+  height: 95px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 105px; left: 105px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html
new file mode 100644
index 0000000000..d45f528d49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 100px;"></div>
+    <div style="top: 0px; left: 200px;"></div>
+    <div style="top: 100px; left: 0px;"></div>
+    <div style="top: 200px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html
new file mode 100644
index 0000000000..7f837ba4b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps with collapsed tracks on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 60px;
+  height: 60px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 70px;"></div>
+    <div style="top: 0px; left: 140px;"></div>
+    <div style="top: 70px; left: 0px;"></div>
+    <div style="top: 140px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html
new file mode 100644
index 0000000000..11de67a099
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 50px;
+  height: 50px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 50px;"></div>
+    <div style="top: 0px; left: 100px;"></div>
+    <div style="top: 50px; left: 100px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+    <div style="top: 150px; left: 0px;"></div>
+    <div style="top: 150px; left: 150px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html
new file mode 100644
index 0000000000..9afd058692
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps with collapsed tracks on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 60px;
+  height: 60px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 80px;"></div>
+    <div style="top: 0px; left: 160px;"></div>
+    <div style="top: 80px; left: 160px;"></div>
+    <div style="top: 160px; left: 160px;"></div>
+    <div style="top: 240px; left: 0px;"></div>
+    <div style="top: 240px; left: 240px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
new file mode 100644
index 0000000000..a03b549a9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: fit-content() tracks don't stretch</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing" title="7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-stretch" title="11.8. Stretch auto Tracks">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'fit-content()' tracks behave the same with 'normal', 'stretch' or 'start' values for content distribution properties.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: grid;
+  width: 400px;
+  height: 200px;
+  font: 25px/1 Ahem;
+}
+
+.constrainedGrid {
+  width: 20px;
+  height: 10px;
+}
+
+.fitContent200x100 {
+  grid-template-columns: fit-content(200px);
+  grid-template-rows: fit-content(100px);
+}
+
+.placeContentStretch {
+  place-content: stretch;
+}
+
+.placeContentStart {
+  place-content: start;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h1>1) place-content: normal</h1>
+
+<h2>1.2) Unconstrained grid container</h2>
+
+<div class="grid" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="400" data-expected-height="200">X</div>
+</div>
+
+<div class="grid" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
+</div>
+
+<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
+</div>
+
+<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h2>1.2) Constrained grid container</h2>
+
+<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h1>2) place-content: stretch</h1>
+
+<h2>2.2) Unconstrained grid container</h2>
+
+<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="400" data-expected-height="200">X</div>
+</div>
+
+<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h2>2.2) Constrained grid container</h2>
+
+<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h1>3) place-content: start</h1>
+
+<h2>3.1) Unconstrained grid container</h2>
+
+<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="325" data-expected-height="25">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h2>3.2) Constrained grid container</h2>
+
+<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html
new file mode 100644
index 0000000000..310aa4322a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for gap shorthand property of row-gap and column-gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-equal-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        gap: 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html
new file mode 100644
index 0000000000..dbe9d14533
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for grid-gap shorthand property as an alias for gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-equal-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        grid-gap: 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html
new file mode 100644
index 0000000000..51bc25b3f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for gap shorthand property of row-gap and column-gap setting both to different values</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        gap: 40px 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html
new file mode 100644
index 0000000000..c7d549a1b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for grid-gap shorthand property as an alias for gap setting both to different values</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        grid-gap: 40px 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html
new file mode 100644
index 0000000000..cc67190aff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for row-gap and column-gap properties</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        row-gap: 40px;
+        column-gap: 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html
new file mode 100644
index 0000000000..87fb7ec49d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for grid-row-gap alias for row-gap and grid-column-gap for column-gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        grid-row-gap: 40px;
+        grid-column-gap: 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html
new file mode 100644
index 0000000000..4d66cf6750
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for percentage values for gap with definite height and width for grid</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-equal-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        height: 200px;
+        gap: 10%;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html
new file mode 100644
index 0000000000..a96eba3828
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for aliased support to gap of percentage values for grid-gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-equal-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        height: 200px;
+        grid-gap: 10%;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html
new file mode 100644
index 0000000000..dfc595f820
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for percentage values for gap with indefinite percentage basis</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-percentage-gap-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        gap: 10%;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+        margin-bottom: 30px;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+<div id="grid" style="display:inline-grid; width:auto; gap:calc(20px + 5%)">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html
new file mode 100644
index 0000000000..22be6df72e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for percentage values for grid-gap with indefinite percentage basis</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-percentage-gap-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        grid-gap: 10%;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+        margin-bottom: 30px;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+<div id="grid" style="display:inline-grid; width:auto; grid-gap:calc(20px + 5%)">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html
new file mode 100644
index 0000000000..daeba00aee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        height: 220px;
+        gap: calc(15% + 7px) calc(10px + 5%);
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html
new file mode 100644
index 0000000000..b4af6f7a28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for grid-gap as alias for gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        height: 220px;
+        grid-gap: calc(15% + 7px) calc(10px + 5%);
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html
new file mode 100644
index 0000000000..e72814725d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Gutters adjacent to collapsed tracks also collapse</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks that gutters adjacent to collapsed tracks don't reduce the space available for aligning adjacent grid items." />
+<style>
+    #grid {
+        display: grid;
+        margin-top: -50px;
+        margin-left: -50px;
+        width: 500px;
+        height: 500px;
+        grid-gap: 100px;
+        grid-template-rows: repeat(auto-fit, 200px);
+        grid-template-columns: repeat(auto-fit, 200px);
+        align-items: center;
+        justify-items: center;
+        background: linear-gradient(red, red) no-repeat 50px 50px / 100px 100px;
+    }
+
+    #grid > div {
+        background-color: green;
+        width: 50%;
+        height: 50%;
+    }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="grid">
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html
new file mode 100644
index 0000000000..a6ca7c5aa7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Percentage gap, content-based width/height (via float)</title>
+<style>
+    #grid {
+        border: solid 5px teal;
+        width: 200px;
+        height: 100px;
+        padding: 10px 0 0 10px;
+    }
+
+    #grid > div {
+        float: left;
+        border: solid 5px aqua;
+        width: 70px;
+        height: 30px;
+        margin-left: 5px;
+    }
+
+    /* highlight manual pass condition */
+    #grid > div:nth-child(even) {
+        border-right: none;
+        margin-left: 40px;
+    }
+    #grid > div:nth-child(n + 3) {
+        border-bottom: none;
+        margin-top: 25px;
+    }
+</style>
+
+<p>Test passes if there is no red.
+
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html
new file mode 100644
index 0000000000..404e694ec8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Percentage gap, content-based width/height (via float)</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
+<link rel="match" href="grid-gutters-014-ref.html">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<meta name="assert" content="Tests that percentage gaps contribute zero to intrinsic sizing, then resolve against corresponding axis of containing block for layout.">
+
+<style>
+    #grid {
+        display: grid;
+        border: solid 5px teal;
+        padding: 5px;
+        grid-gap: 15% 10%;
+        gap: 15% 10%;
+        float: left;
+        grid: auto auto / auto auto;
+        /* content box width = 200px height = 100px -> gap x = 20px y = 15px */
+        position: relative;
+    }
+
+    #grid > div {
+        margin: 5px 10px;
+        border: solid 5px aqua;
+        width: 70px;
+        height: 30px;
+        /* margin box height = 50px width = 100px */
+    }
+
+    /* highlight manual pass condition */
+    #grid > div:nth-child(even) {
+        border-right-color: red;
+    }
+    #grid > div:nth-child(n + 3) {
+        border-bottom-color: red;
+    }
+    #mask {
+        position: absolute;
+        border: 5px teal;
+        border-style: none solid solid none;
+        bottom: -5px; right: -5px;
+        top: 10px; left: 15px;
+    }
+</style>
+
+<p>Test passes if there is no red.
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span id="mask"></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html
new file mode 100644
index 0000000000..dd4d8daf6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.grid {
+  display: grid;
+  padding: 10px;
+  grid-template-columns: 40px 40px;
+  grid-template-rows: 40px 40px;
+  border: solid;
+  width: 80px;
+  height: 80px;
+  gap: 16px;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html
new file mode 100644
index 0000000000..ed1048fd69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
+<link rel="match" href="grid-gutters-015-ref.html">
+<style>
+.grid {
+  display: inline-grid;
+  padding: 10px;
+  grid-template-columns: 40px 40px;
+  grid-template-rows: 40px 40px;
+  border: solid;
+  gap: 20%;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html
new file mode 100644
index 0000000000..a56ab07e18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.grid {
+  display: grid;
+  padding: 10px;
+  grid-template-columns: 40px 40px;
+  grid-template-rows: 40px 40px;
+  border: solid;
+  width: 140px;
+  height: 140px;
+  gap: 28px;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html
new file mode 100644
index 0000000000..163787cfee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
+<link rel="match" href="grid-gutters-016-ref.html">
+<style>
+.grid {
+  display: inline-grid;
+  padding: 10px;
+  grid-template-columns: 40px 40px;
+  grid-template-rows: 40px 40px;
+  border: solid;
+  gap: 20%;
+  min-width: 140px;
+  min-height: 140px;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html
new file mode 100644
index 0000000000..bc8af31c75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:gutters with align and justify properties</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#gaps">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#column-row-gap">
+<meta name="assert" content="This test checks that gutters do not interfere with align and justify computation, with or without borders, paddings, margins and negative space.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.grid100And200 {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    position: relative; /* For the <p> comments */
+}
+
+.grid50And100 {
+    grid: 100px 100px / 50px 50px;
+    width: 200px;
+    height: 300px;
+    position: relative; /* For the <p> comments */
+}
+
+.gridAuto20And40 {
+    grid-auto-columns: 20px;
+    grid-auto-rows: 40px;
+    width: 400px;
+    height: 300px;
+    position: relative; /* For the <p> comments */
+}
+
+.gridWithPaddingBorder {
+    grid-template-columns: 100px 200px;
+    grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    position: relative; /* For the <p> comments */
+}
+
+.gridWithAutoColumns {
+    grid-auto-columns: 20px;
+    border: 2px solid black;
+    width: 10px;
+    margin-left: 200px;
+    position: relative;
+}
+
+.gridWithAutoRows {
+    grid-auto-rows: 40px;
+    border: 2px solid black;
+    height: 50px;
+    width: 20px;
+    position: relative;
+}
+
+.stretchedGrid { grid-auto-columns: auto; }
+
+.gridRowColumnGaps {
+    grid-row-gap: 15px;
+    grid-column-gap: 20px;
+}
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+div.gridWithPaddingBorder > div.cell {
+    margin: 4px 8px 12px 16px;
+}
+
+.container {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<!-- Check that gutters do not interfere with self alignment computation. -->
+<div class="container">
+    <div class="grid grid100And200 fit-content alignItemsCenter gridRowColumnGaps" data-expected-width="220" data-expected-height="415">
+        <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="120" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="120" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid grid100And200 fit-content verticalLR gridRowColumnGaps" data-expected-width="415" data-expected-height="220">
+        <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="120" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="120" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="305" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+     <div class="grid grid100And200 fit-content directionRTL gridRowColumnGaps" data-expected-width="220" data-expected-height="415">
+         <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="200" data-offset-y="295" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- Check that gutters do not interfere with align-content computation. -->
+<div class="container">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid grid50And100 alignContentCenter gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="43" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="43" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="158" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="70" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | align-content: 'right'</p>
+    <div class="grid grid50And100 alignContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="70" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | align-content: 'right'</p>
+    <div class="grid grid50And100 directionRTL alignContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid grid50And100 directionRTL alignContentStart gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with justify-content computation. -->
+<div class="container">
+    <p>direction: LTR | justify-content: 'center'</p>
+    <div class="grid grid50And100 justifyContentCenter gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="40" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="110" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'end'</p>
+    <div class="grid grid50And100 justifyContentEnd gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'end'</p>
+    <div class="grid grid50And100 directionRTL justifyContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'start'</p>
+    <div class="grid grid50And100 directionRTL justifyContentStart gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with vertical justify-content computation. -->
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'stretch'</p>
+    <div class="grid gridAuto20And40 stretchedGrid justifyContentStretch verticalLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="240" data-expected-width="40" data-expected-height="60"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="160" data-expected-width="40" data-expected-height="60"></div>
+        <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="60"></div>
+        <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="60"></div>
+        <div class="secondRowFirstColumn" data-offset-x="55" data-offset-y="240" data-expected-width="40" data-expected-height="60"></div>
+        <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="160" data-expected-width="40" data-expected-height="60"></div>
+        <div class="secondRowThirdColumn" data-offset-x="55" data-offset-y="80" data-expected-width="40" data-expected-height="60"></div>
+        <div class="secondRowFourthColumn" data-offset-x="55" data-offset-y="0" data-expected-width="40" data-expected-height="60"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-evenly'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceEvenly verticalLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="55" data-offset-y="230" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowThirdColumn" data-offset-x="55" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-between'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceBetween verticalRL directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="187" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowThirdColumn" data-offset-x="360" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowFourthColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="305" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="305" data-offset-y="187" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowThirdColumn" data-offset-x="305" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFourthColumn" data-offset-x="305" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-around'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceAround verticalRL directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="305" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="305" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with align&justify computation when having border, padding and margins. -->
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfStart gridRowColumnGaps" data-expected-width="395" data-expected-height="465">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="150" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="225" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="166" data-offset-y="229" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="395" data-expected-height="465">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="150" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="225" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="166" data-offset-y="373" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'right' | justify-items: 'right'</p>
+    <div class="grid gridWithPaddingBorder fit-content directionRTL itemsRight gridRowColumnGaps"     data-expected-width="395" data-expected-height="465">
+        <div class="cell firstRowFirstColumn"     data-offset-x="322" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="250" data-offset-y="225" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="229" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid gridWithPaddingBorder fit-content directionRTL itemsSelfStart gridRowColumnGaps" data-expected-width="395" data-expected-height="465">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="322" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="250" data-offset-y="225" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="229" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Check behavior with negative free space -->
+<div class="container">
+    <p>Negative free space. justify-content: start</p>
+    <div class="grid gridWithAutoColumns justifyContentStart gridRowColumnGaps" data-expected-width="14" data-expected-height="44">
+        <div class="cell firstRowFirstColumn"  data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="40" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowThirdColumn"  data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Negative free space. justify-content: center</p>
+    <div class="grid gridWithAutoColumns justifyContentCenter gridRowColumnGaps" data-expected-width="14" data-expected-height="44">
+        <div class="cell firstRowFirstColumn"  data-offset-x="-45" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="-5" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowThirdColumn"  data-offset-x="35" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Negative free space. justify-content: end</p>
+    <div class="grid gridWithAutoColumns justifyContentEnd gridRowColumnGaps" data-expected-width="14" data-expected-height="44">
+        <div class="cell firstRowFirstColumn"  data-offset-x="-90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="-50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowThirdColumn"  data-offset-x="-10" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- NOTE: for the following 3 test cases we use margins just for enhancing the visual output (otherwise grids would overlap) -->
+<div class="container" style="margin-bottom: 125px;">
+    <p>Negative free space. align-content: start</p>
+    <div class="grid gridWithAutoRows alignContentStart gridRowColumnGaps" data-expected-width="24" data-expected-height="54">
+        <div class="cell firstRowFirstColumn"  data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell thirdRowFirstColumn"  data-offset-x="0" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container" style="margin-bottom: 75px;">
+    <p>Negative free space. align-content: center</p>
+    <div class="grid gridWithAutoRows alignContentCenter gridRowColumnGaps" style="margin-top: 75px" data-expected-width="24" data-expected-height="54">
+        <div class="cell firstRowFirstColumn"  data-offset-x="0" data-offset-y="-50" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="0" data-offset-y="5" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell thirdRowFirstColumn"  data-offset-x="0" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container" style="margin-bottom: 25px;">
+    <p>Negative free space. align-content: end</p>
+    <div class="grid gridWithAutoRows alignContentEnd gridRowColumnGaps" style="margin-top: 125px" data-expected-width="24" data-expected-height="54">
+        <div class="cell firstRowFirstColumn"  data-offset-x="0" data-offset-y="-100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="0" data-offset-y="-45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell thirdRowFirstColumn"  data-offset-x="0" data-offset-y="10" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
new file mode 100644
index 0000000000..5c7825ca2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      height: 30vh;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    grid.style.width = "300px";
+
+    item1.setAttribute("data-offset-x", "35");
+    item2.setAttribute("data-offset-x", "160");
+    checkLayout('#grid', true);
+
+    done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
new file mode 100644
index 0000000000..3aa47a2570
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid item's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      height: 30vh;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    item1.style.width = "100px";
+
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
new file mode 100644
index 0000000000..0136d7b4b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 300px;
+      height: 400px;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    item1.style.width = "100px";
+
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
new file mode 100644
index 0000000000..1ee0de73bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 300px;
+      height: auto;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    grid.style.width = "300px";
+
+    item1.setAttribute("data-offset-x", "35");
+    item2.setAttribute("data-offset-x", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
new file mode 100644
index 0000000000..72427f1020
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 100px;
+      height: 200px;
+      width: 500px;
+      align-items: start;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 10px/1 Ahem;
+      color: blue;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXXX</div>
+    <div id="item2">XXXXX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "325");
+    checkLayout('#grid', false);
+
+    item2.style.fontSize = "30px";
+
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "275");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
new file mode 100644
index 0000000000..ed54ce722a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      font: 10px/1 Ahem;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 100px;
+      height: auto;
+      width: 500px;
+      align-items: start;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      color: green;
+  }
+  #item2 {
+      color: blue;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXX</div>
+    <div id="item2">XX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "80");
+    item2.setAttribute("data-offset-x", "340");
+    checkLayout('#grid', false);
+
+    grid.style.fontSize = "25px";
+
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "325");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
new file mode 100644
index 0000000000..0b991de98b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      height: 200px;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    grid.style.width = "300px";
+
+    item1.setAttribute("data-offset-x", "35");
+    item2.setAttribute("data-offset-x", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html
new file mode 100644
index 0000000000..eb96664655
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="match" href="../reference/grid-inline-axis-alignment-auto-margins-008-ref.html">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed after the grid's intrinsic size is determined.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 100px;
+      height: 200px;
+      width: auto;
+      align-items: start;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 40px/1 Ahem;
+      color: blue;
+  }
+</style>
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div id="item1">XXX</div>
+    <div id="item2">XXXXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html
new file mode 100644
index 0000000000..0ff058553c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=943013">
+<link rel="match" href="../reference/grid-inline-baseline-ref.html">
+<p>Test passes if the text is aligned.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+  before
+  <div style="display: inline-grid;">
+    <div style="background: green; width: 100px; height: 50px;">grid</div>
+  </div>
+  after
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
new file mode 100644
index 0000000000..a9ec652289
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-lr writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-lr and horizontal-tb orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 50px;
+   height: 20px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p>
+
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionLTR">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="100" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="150"   data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="300" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  directionLTR horizontalTB selfStart"     data-offset-x="150"   data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR horizontalTB"               data-offset-x="300" data-offset-y="80">default</div>
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfEnd"       data-offset-x="100" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  directionRTL horizontalTB selfStart"     data-offset-x="150"   data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd"   data-offset-x="150"   data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL horizontalTB"               data-offset-x="300" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="150"   data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="150"   data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="300" data-offset-y="80">default</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
new file mode 100644
index 0000000000..2b3b7a489e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-rl writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-rl and horizontal-tb orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 50px;
+   height: 20px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p>
+
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionLTR">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="300" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="350" data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="250" data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="0"   data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="100" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfEnd"       data-offset-x="300" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfCenter"    data-offset-x="350" data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  directionLTR horizontalTB selfStart"     data-offset-x="250" data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR horizontalTB selfSelfStart" data-offset-x="0"   data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR horizontalTB"               data-offset-x="100" data-offset-y="80">default</div>
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfEnd"       data-offset-x="300" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfCenter"    data-offset-x="350" data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  directionRTL horizontalTB selfStart"     data-offset-x="250" data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd"   data-offset-x="150" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL horizontalTB"               data-offset-x="100" data-offset-y="100">default</div>
+
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionRTL">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="300" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="350" data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="250" data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="150" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="100" data-offset-y="80">default</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
new file mode 100644
index 0000000000..133132529a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: item alignment with orthogonal flows</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with horizontal-tb and vertical-rl/vertical-lr orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 20px;
+   height: 50px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.</p>
+
+<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p>
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionLTR">
+        <div class="item firstRowFirstColumn   verticalRL selfEnd"       data-offset-x="80"   data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalRL selfCenter"    data-offset-x="140"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalRL selfStart"     data-offset-x="0"    data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalRL selfSelfEnd"   data-offset-x="100"  data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalRL selfSelfStart" data-offset-x="80"   data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalRL"               data-offset-x= "100" data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR verticalRL selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR verticalRL selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionLTR verticalRL selfStart"     data-offset-x="180"  data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionLTR verticalRL selfSelfEnd"   data-offset-x="0" data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR verticalRL selfSelfStart" data-offset-x="180"  data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR verticalRL"               data-offset-x="80" data-offset-y="300">default</div>
+
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL verticalRL selfEnd"       data-offset-x="80"  data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionRTL verticalRL selfCenter"    data-offset-x="140" data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionRTL verticalRL selfStart"     data-offset-x="0" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionRTL verticalRL selfSelfEnd"   data-offset-x="100"   data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL verticalRL selfSelfStart" data-offset-x="80" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL verticalRL"               data-offset-x="100"   data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   verticalRL selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalRL selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalRL selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalRL selfSelfEnd"   data-offset-x="0"   data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalRL selfSelfStart" data-offset-x="180" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalRL"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+<!-- HORIZONTAL-TB vs VERTICAL-LR -->
+<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR</p>
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content drectionLTR">
+        <div class="item firstRowFirstColumn   verticalLR selfEnd"       data-offset-x="80"  data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalLR selfCenter"    data-offset-x="140" data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalLR selfStart"     data-offset-x="0"   data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalLR selfSelfEnd"   data-offset-x="180" data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalLR selfSelfStart" data-offset-x="0"   data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalLR"               data-offset-x="100" data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR verticalLR selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR verticalLR selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionLTR verticalLR selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionLTR verticalLR selfSelfEnd"   data-offset-x="80"  data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR verticalLR selfSelfStart" data-offset-x="100" data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR verticalLR"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   verticalLR selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalLR selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalLR selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalLR selfSelfEnd"   data-offset-x="80"  data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalLR selfSelfStart" data-offset-x="100" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalLR"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-001.html
new file mode 100644
index 0000000000..5104c2837b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-001.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<meta name="assert" content="For a grid item with an 'aspect-ratio' and a resolvable percent height and a non-stretching justify-self, the item's inline-size should be resolved based on the height and 'aspect-ratio'">
+<style>
+  .group { margin-bottom: 20px;}
+  .group.orthog .item { writing-mode: vertical-rl }
+  .grid {
+      height: 32px;
+      width: 24px;
+      display: inline-grid;
+      border: 2px solid black;
+      vertical-align: top;
+      background: cyan;
+  }
+
+  .item {
+      height: 100%;
+      background: fuchsia;
+      box-sizing: border-box;
+      aspect-ratio: 1/2;
+  }
+  .center     { justify-self: center; }
+  .start      { justify-self: start; }
+  .end        { justify-self: end; }
+  .self-start { justify-self: self-start; }
+  .self-end   { justify-self: self-end; }
+  .flex-start { justify-self: flex-start; }
+  .flex-end   { justify-self: flex-end; }
+  .left       { justify-self: left; }
+  .right      { justify-self: right; }
+  .normal     { justify-self: normal; }
+  .stretch    { justify-self: stretch; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+  <div class="group">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+  </div>
+
+  <!-- For these ones, the item's writing-mode will be orthogonal to the
+       grid container's writing-mode -->
+  <div class="group orthog">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <!-- TODO(dholbert):
+         These ones behave differently in every browser. Need to sort out
+         the expected rendering here...
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    -->
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-002.html
new file mode 100644
index 0000000000..9f40289775
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-002.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<meta name="assert" content="For a grid item with display:table, an 'aspect-ratio', a resolvable percent height, and a non-stretching justify-self, the item's inline-size should be resolved based on the height and 'aspect-ratio'">
+<style>
+  .group { margin-bottom: 20px;}
+  .group.orthog .item { writing-mode: vertical-rl }
+  .grid {
+      height: 32px;
+      width: 24px;
+      display: inline-grid;
+      border: 2px solid black;
+      vertical-align: top;
+      background: cyan;
+  }
+
+  .item {
+      display: table;
+      height: 100%;
+      background: fuchsia;
+      box-sizing: border-box;
+      aspect-ratio: 1/2;
+  }
+  .center     { justify-self: center; }
+  .start      { justify-self: start; }
+  .end        { justify-self: end; }
+  .self-start { justify-self: self-start; }
+  .self-end   { justify-self: self-end; }
+  .flex-start { justify-self: flex-start; }
+  .flex-end   { justify-self: flex-end; }
+  .left       { justify-self: left; }
+  .right      { justify-self: right; }
+  .normal     { justify-self: normal; }
+  .stretch    { justify-self: stretch; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+  <div class="group">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+  </div>
+
+  <!-- For these ones, the item's writing-mode will be orthogonal to the
+       grid container's writing-mode -->
+  <div class="group orthog">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <!-- TODO(dholbert):
+         These ones behave differently in every browser. Need to sort out
+         the expected rendering here...
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    -->
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html
new file mode 100644
index 0000000000..1120e45f5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:10px; height:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html
new file mode 100644
index 0000000000..909406f5e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-1-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html
new file mode 100644
index 0000000000..84d7950b09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:20px; height:40px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
new file mode 100644
index 0000000000..2a4dd2d787
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-2-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html
new file mode 100644
index 0000000000..b85803ec8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    background: blue;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:0px; height:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html
new file mode 100644
index 0000000000..43202541b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-3-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+  img { background: blue; }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html
new file mode 100644
index 0000000000..8d7fc870fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    background: blue;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:20px; height:0px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html
new file mode 100644
index 0000000000..f689cce023
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-4-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+  img { background: blue; }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html
new file mode 100644
index 0000000000..be5eb6efbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1213878">
+<meta name="assert" content="Auto margin alignment should be safe.">
+<style>
+#grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  background: red;
+  grid-template: 0px / 0px;
+}
+
+#grid > div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="grid">
+  <div style="margin: auto;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html
new file mode 100644
index 0000000000..037794e6cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1213878">
+<meta name="assert" content="Auto margin alignment should be safe.">
+<style>
+#grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  background: red;
+  grid-template: 0px / 0px;
+}
+
+#grid > div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="grid">
+  <div style="margin-left: auto; margin-top: auto;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html
new file mode 100644
index 0000000000..e11398907e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-self and justify-self with auto margins, vertical-lr</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions, vertical-lr writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.item {
+    width: 20px;
+    height: 40px;
+}
+
+.autoMarginTop { margin-top: auto; }
+.autoMarginRight { margin-right: auto; }
+.autoMarginBottom { margin-bottom: auto; }
+.autoMarginLeft { margin-left: auto; }
+.autoMargin { margin: auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
+
+<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR itemsCenter">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR itemsCenter">
+        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR">
+        <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<!-- direction RTL -->
+<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR itemsCenter directionRTL">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+
+<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR itemsCenter directionRTL">
+        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+
+<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+</body>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html
new file mode 100644
index 0000000000..42c6dd2d29
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-self and justify-self with auto margins, vertical-rl</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions, vertical-rl writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.item {
+    width: 20px;
+    height: 40px;
+}
+
+.autoMarginTop { margin-top: auto; }
+.autoMarginRight { margin-right: auto; }
+.autoMarginBottom { margin-bottom: auto; }
+.autoMarginLeft { margin-left: auto; }
+.autoMargin { margin: auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
+
+<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL itemsCenter">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL itemsCenter">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<!-- direction RTL -->
+<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL itemsCenter directionRTL">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+
+<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL directionRTL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL itemsCenter directionRTL">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+
+<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+</body>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html
new file mode 100644
index 0000000000..f9fdfd7dbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-self and justify-self with auto margins</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.item {
+    width: 20px;
+    height: 40px;
+}
+
+.autoMarginTop { margin-top: auto; }
+.autoMarginRight { margin-right: auto; }
+.autoMarginBottom { margin-bottom: auto; }
+.autoMarginLeft { margin-left: auto; }
+.autoMargin { margin: auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
+
+<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content itemsCenter">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content itemsCenter">
+        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content">
+        <div class="autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<!-- direction RTL -->
+<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content itemsCenter directionRTL">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content directionRTL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content itemsCenter directionRTL">
+        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content directionRTL">
+        <div class="autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+</body>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html
new file mode 100644
index 0000000000..e55fe0b9f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A<br>B</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; padding-block-end:36px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A<br>B</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb vr pbs">A<br>B</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A<br>B</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A<br>B</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html
new file mode 100644
index 0000000000..aa33f3c15b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr pbs">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vr pbe">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr pbs">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html
new file mode 100644
index 0000000000..d32bbf2931
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A<br>B</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; padding-block-end:56px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A<br>B</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; padding-block-end:50px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb vr pbs">A<br>B</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; padding-block-end:55px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; padding-block-end:73px;" class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A<br>B</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A<br>B</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html
new file mode 100644
index 0000000000..3d12f68cb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+}
+.e { align-content:end; }
+.c.e { justify-content:end; }
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vr"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr pbs">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e c hl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e c hl"><span class="lb vr pbe">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vl"><span class="lb vr pbs">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vr"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e vr"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html
new file mode 100644
index 0000000000..5efb78b00f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: content-box silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div>
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb">A</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; width:56px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="" class="fb vr pbs">A</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; width:56px;" class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html
new file mode 100644
index 0000000000..8845afe864
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: content-box silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid hl"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c vl"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl pbe">A</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr pbs">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vr"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid vr"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vr pbe">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr pbs">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html
new file mode 100644
index 0000000000..2394818c7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div>
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb">A</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; width:56px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="" class="fb vr pbs">A</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; width:56px;" class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html
new file mode 100644
index 0000000000..81a046be91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-004-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid hl"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c vl"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl pbe">A</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr pbs">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vr"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid vr"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vr pbe">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr pbs">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html
new file mode 100644
index 0000000000..6b89ef49d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+.t2 { grid: auto / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:self-start; }
+.lb { align-self:last baseline; justify-self:self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:34px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:36px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:34px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html
new file mode 100644
index 0000000000..f724b3b6c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+.t2 { grid: auto / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html
new file mode 100644
index 0000000000..fae8d2e9b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: start;
+  justify-content: end;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: end;
+  justify-content: start;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { place-self:first baseline self-start; }
+.lb { place-self:last baseline self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:54px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span style="padding-block-end:0px" class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html
new file mode 100644
index 0000000000..d14a8cae7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  place-content: start end;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  place-content: end start;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; place-self:self-start; }
+.lb { align-content:last baseline; place-self:self-end; }
+.s  { place-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html
new file mode 100644
index 0000000000..1810414816
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: end;
+  justify-content: start;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: start;
+  justify-content: end;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:self-start; }
+.lb { align-self:last baseline; justify-self:self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:54px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span  style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html
new file mode 100644
index 0000000000..0a78d59e98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html
@@ -0,0 +1,116 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: end;
+  justify-content: start;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: start;
+  justify-content: end;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-ref.html
new file mode 100644
index 0000000000..d167a5f154
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: mixed align-content/self:baseline/last baseline in fragmentated grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.columns {
+  position:relative;
+     columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+  height: 120px;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(3, auto);
+  grid-auto-rows: 100px;
+  border: 2px solid;
+  margin: 1px;
+}
+.g1 {
+  border-bottom-width: 0;
+  grid-template-rows: 100px 0 0;
+}
+.g2 {
+  border-top-width: 0;
+  grid-template-rows: 0 100px 100px;
+}
+
+.h {
+  visibility: hidden;
+  height: 0;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid hl g1">
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+<span class="sfb h">A<br>B</span><span class="fb h">M<br>N</span><span class="fb h">X<br>Z</span>
+<span class="sfb h">A<br>B</span><span class="fb h">M<br>N</span><span class="fb s h">X<br>Z</span>
+</div>
+<div class="grid hl g2">
+<span class="sfb h ">A<br>B</span><span class="fb h">M<br>N</span><span class="fb s h">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.html
new file mode 100644
index 0000000000..6202845f6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: mixed align-content/self:baseline/last baseline in fragmentated grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-004-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.columns {
+  position:relative;
+     columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+  height: 120px;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(3, auto);
+  grid-auto-rows: 100px;
+  border: 2px solid;
+  margin: 1px;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid hl">
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html
new file mode 100644
index 0000000000..6a7862c9ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: purple;
+    margin: 10px;
+  }
+
+  svg {
+    display: block;
+    background: green;
+  }
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <svg class="align justify"></svg>
+</div>
+<div>
+  <svg class="align"></svg>
+</div>
+<div>
+  <svg class="justify"></svg>
+</div>
+<div>
+  <svg></svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html
new file mode 100644
index 0000000000..1b5ae0a6ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-1-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    height: 250px;
+    width: 350px;
+    background: purple;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  svg {
+    background: green;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <svg class="align justify"></svg>
+</div>
+<div>
+  <svg class="align"></svg>
+</div>
+<div>
+  <svg class="justify"></svg>
+</div>
+<div>
+  <svg></svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html
new file mode 100644
index 0000000000..69d59e85a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 300px;
+    height: 150px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align" style="width:20px">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html
new file mode 100644
index 0000000000..5371e560a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-2-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html
new file mode 100644
index 0000000000..7ee8a2d6bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 300px;
+    height: 150px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify" style="height:20px">
+</div>
+<div>
+  <img style="height:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html
new file mode 100644
index 0000000000..e2b05bd216
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-3-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html
new file mode 100644
index 0000000000..4a543b4a34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 0px;
+    height: 20px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html
new file mode 100644
index 0000000000..a53c0fd87c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-4-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html
new file mode 100644
index 0000000000..98f88fed7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 20px;
+    height: 0px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html
new file mode 100644
index 0000000000..c28022c6e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-5-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html
new file mode 100644
index 0000000000..8e989d1045
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 0px;
+    height: 0px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html
new file mode 100644
index 0000000000..b4f172c10d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-6-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.html
new file mode 100644
index 0000000000..6eadf9a02a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+  align-items: start;
+  justify-items: start;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:16px; }
+span:nth-child(3) { font-size:24px; }
+span:nth-child(4) { font-size:32px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+
+<br clear="all">
+
+<div><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+
+<br clear="all">
+
+<div class="grid vl"><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div>
+<div class="grid vl"><span class="fb vl pbe">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div>
+<div class="grid"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid"><span class="fb" style="order:99">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div>
+<div class="grid"><span class="fb pbe" style="order:99;">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div>
+
+<br clear="all">
+
+<div><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html
new file mode 100644
index 0000000000..ccc50c7649
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="grid-item-self-baseline-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:16px; }
+span:nth-child(3) { font-size:24px; }
+span:nth-child(4) { font-size:32px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="grid"><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="grid"><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+
+<br clear="all">
+
+<div class="grid c"><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div>
+<div class="grid c"><span class="jfb vl pbe">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div>
+<div class="grid c vl"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vl"><span class="jfb hl pbs">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vr"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vr"><span class="jfb hl pbe">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="grid"><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="grid vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html
new file mode 100644
index 0000000000..17a59d6edc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="display: grid; width: 100px; height: 100px; background: gray;">
+  <div style="writing-mode: vertical-rl; background: cyan; justify-self: end; direction: rtl;">one<br>two</div>
+  <div style="writing-mode: vertical-lr; font-size: 30px; background: lime; justify-self: start; direction: rtl;">one<br>two</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html
new file mode 100644
index 0000000000..959767bd7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-sharing-group">
+<link rel="match" href="grid-justify-baseline-001-ref.html">
+<div style="display: grid; width: 100px; height: 100px; direction: rtl; justify-items: baseline; background: gray;">
+  <div style="writing-mode: vertical-rl; background: cyan;">one<br>two</div>
+  <div style="writing-mode: vertical-lr; font-size: 30px; background: lime;">one<br>two</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html
new file mode 100644
index 0000000000..27be724bf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<style>
+#target {
+  display: grid;
+  justify-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  justify-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  justify-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html
new file mode 100644
index 0000000000..623f849115
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<style>
+#target {
+  display: grid;
+  grid-template-columns: 120px;
+  justify-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-lr;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="40"><span></span><br><span></span></div>
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="75"><span></span><br><span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html
new file mode 100644
index 0000000000..b2e1d6d2ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<style>
+#target {
+  display: grid;
+  grid-template-columns: 120px;
+  justify-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-rl;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="40"><span></span><br><span></span></div>
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="75"><span></span><br><span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html
new file mode 100644
index 0000000000..ea835caa80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<style>
+#target {
+  display: grid;
+  grid-template: 50px 50px 50px 50px / 50px 50px 50px;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 20px;
+}
+#target > div {
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div style="grid-row: 1; grid-column: 3; justify-self: baseline; margin-right: 10px;" data-offset-x="100">line1<br>line2</div>
+  <div style="grid-row: 2; grid-column: span 3; justify-self: baseline;" data-offset-x="100">line1<br>line2</div>
+  <div style="grid-row: 3; grid-column: 1; justify-self: last baseline; margin-left: 10px;" data-offset-x="10">line1<br>line2</div>
+  <div style="grid-row: 4; grid-column: span 3; justify-self: last baseline;" data-offset-x="10">line1<br>line2</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html
new file mode 100644
index 0000000000..cc1fe75799
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid containers support 'place-content'</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the 'justify-content' and 'align-content' properties">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-justify-content" title="5.1. The 'justify-content' and 'align-content' Properties">
+<meta name="assert" content="This test checks that the 'justify-content' and 'align-content' properties, set using their 'place-content' shorthand, work well in grid containers.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: inline-grid;
+  position: relative;
+  vertical-align: top;
+  border: 10px solid black;
+  margin: 5px;
+  font: 40px/1 Ahem;
+  color: cyan;
+}
+.small {
+  padding: 40px;
+}
+.big {
+  padding: 0px;
+}
+.content-box.small {
+  width: 0px;
+  height: 0px;
+}
+.content-box.big {
+  width: 80px;
+  height: 80px;
+}
+.border-box {
+  box-sizing: border-box;
+  width: 100px;
+  height: 100px;
+}
+.start {
+  place-content: start;
+}
+.center {
+  place-content: center;
+}
+.end {
+  place-content: end;
+}
+.space-between {
+  place-content: space-between;
+}
+.space-around {
+  place-content: space-around;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="log"></div>
+
+<h3>Small content area</h3>
+
+<pre>box-sizing: content-box</pre>
+
+<div class="grid small content-box start">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small content-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid small content-box end">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid small content-box space-between">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small content-box space-around">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+
+<pre>box-sizing: border-box</pre>
+
+<div class="grid small border-box start">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small border-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid small border-box end">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid small border-box space-between">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small border-box space-around">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+
+<h3>Big content area</h3>
+
+<pre>box-sizing: content-box</pre>
+
+<div class="grid big content-box start">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big content-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid big content-box end">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid big content-box space-between">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big content-box space-around">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+
+<pre>box-sizing: border-box</pre>
+
+<div class="grid border-box start">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big border-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid big border-box end">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid big border-box space-between">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big border-box space-around">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+
+<script>
+document.fonts.ready.then(() => {
+  checkLayout('.grid');
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
new file mode 100644
index 0000000000..b76e808da5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with its alignment container's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
new file mode 100644
index 0000000000..c7ae3f0b7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with its alignment container's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
new file mode 100644
index 0000000000..342ba8f2e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'left' value for justify-self are flushed with its alignment container's 'left' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: left;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: left;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: left;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
new file mode 100644
index 0000000000..39a3560c86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'right' value for justify-self are flushed with its alignment container's 'right' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: right;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: right;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: right;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
new file mode 100644
index 0000000000..d37e541f68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: center;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="20"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="145" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="320" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="320" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
new file mode 100644
index 0000000000..fe440bf0ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-start' value of justify-self behaves like 'start' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: flex-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: flex-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: flex-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: flex-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
new file mode 100644
index 0000000000..cdd8b5a1f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-end' value of justify-self behaves like 'end' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: flex-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: flex-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: flex-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: flex-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
new file mode 100644
index 0000000000..a52265e344
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
new file mode 100644
index 0000000000..2ff678ecc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
new file mode 100644
index 0000000000..801f6590a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
new file mode 100644
index 0000000000..596787d0bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
new file mode 100644
index 0000000000..1b27bfc941
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="390" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
new file mode 100644
index 0000000000..a15bbc0608
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="380" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
new file mode 100644
index 0000000000..52d8ca640d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="20"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="370" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="270" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+o
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
new file mode 100644
index 0000000000..83071e0c23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="380" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
new file mode 100644
index 0000000000..1ea1220092
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="390" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
new file mode 100644
index 0000000000..041ee3fcc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: baseline;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: baseline;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: baseline;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: baseline;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html
new file mode 100644
index 0000000000..31d06b8062
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of stcky positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Sticky positioned grid items are aligned correcly.">
+<style>
+.container {
+  border: solid 1px;
+  overflow: auto;
+  width: 500px;
+}
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 100px 100px 100px 300px;
+  grid-template-rows: 75px 75px 75px 75px;
+  background: grey;
+  width: 400px;
+  margin-bottom: 20px;
+}
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 20px;
+  height: 20px;
+  background-color: #cae8ca;
+}
+.item1 {
+  left: 0px;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  left: 0px;
+  grid-column: 2;
+  grid-row: 2;
+}
+.item3 {
+  left: 0px;
+  grid-column: 3;
+  grid-row: 3;
+}
+.item4 {
+  grid-column: 4;
+  grid-row: 4;
+  background: lightgrey;
+}
+.scroll { overflow: auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div class="container">
+    <div style="width: 30px; float:left; height: 10px;"></div>
+    <div class="grid">
+        <div class="item1 sticky justifySelfStart"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
+        <div class="item3 sticky justifySelfEnd"    data-offset-x="280" data-offset-y="150"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="width: 30px; float:left; height: 10px;"></div>
+    <div class="grid scroll">
+        <div class="item1 sticky justifySelfStart"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
+        <div class="item3 sticky justifySelfEnd"    data-offset-x="280" data-offset-y="150"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="width: 2000px; height: 10px;"></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html
new file mode 100644
index 0000000000..cf14691161
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of stcky positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Sticky positioned grid items are aligned correcly, but preserving non-static positions when required.">
+<style>
+.container {
+  border: solid 1px;
+  overflow: auto;
+  width: 500px;
+}
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 100px 100px 100px 300px;
+  grid-template-rows: 75px 75px 75px 75px;
+  background: grey;
+  width: 400px;
+  margin-bottom: 20px;
+}
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 20px;
+  height: 20px;
+  background-color: #cae8ca;
+}
+.item1 {
+  left: 40px;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  left: 100px;
+  grid-column: 2;
+  grid-row: 2;
+}
+.item3 {
+  left: 290px;
+  grid-column: 3;
+  grid-row: 3;
+}
+.item4 {
+  grid-column: 4;
+  grid-row: 4;
+  background: lightgrey;
+}
+.scroll { overflow: auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div class="container">
+    <div style="width: 30px; float:left; height: 10px;"></div>
+    <div class="grid">
+        <div class="item1 sticky justifySelfStart"  data-offset-x="10"  data-offset-y="0"></div>
+        <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
+        <div class="item3 sticky justifySelfEnd"    data-offset-x="280" data-offset-y="150"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="width: 30px; float:left; height: 10px;"></div>
+    <div class="grid scroll">
+        <div class="item1 sticky justifySelfStart"  data-offset-x="40"  data-offset-y="0"></div>
+        <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
+        <div class="item3 sticky justifySelfEnd"    data-offset-x="290" data-offset-y="150"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="width: 2000px; height: 10px;"></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
new file mode 100644
index 0000000000..c9e630cbac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and verticalRL items do not share a baseline context</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn"                                   data-offset-x="0" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="75"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalLR item</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn"                                  data-offset-x="35" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn"                        data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and Horizontal item</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn"                        data-offset-x="200" data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
new file mode 100644
index 0000000000..e96f8da6e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and verticalLR item with fixed width</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with fixed width do not share a baseline context</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn fixedWidth"                        data-offset-x="0" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="80"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed height</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
new file mode 100644
index 0000000000..19a4f5193b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and verticalLR item with relative width</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="30" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with relative width do not share a baseline context</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="00" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="80"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with relative height</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn relativeHeight"         data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with relative height</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn relativeHeight"         data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
new file mode 100644
index 0000000000..f3f70790c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.inline-grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / auto auto;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
+
+<pre>Horizontal grid and verticalLR item with fixed width</pre>
+
+<!-- The two items share a baseline group. -->
+<div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with fixed width</pre>
+
+<!-- The two items *do not* share a baseline group. -->
+<div class="inline-grid justifyItemsBaseline" data-expected-width="150" data-expected-height="300">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="0" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="5"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed height</pre>
+
+<div class="inline-grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed height</pre>
+
+<div class="inline-grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html
new file mode 100644
index 0000000000..8e0ca6f0c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body { overflow: scroll; }
+.container { position: relative; }
+.grid {
+  position: relative;
+  grid-template-columns: 150px;
+  text-orientation: sideways;
+  font: 20px/1 Ahem;
+}
+.width100 { width: 100px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+.bigFont  { font-size: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>verticalLR grid and parallel items</pre>
+
+<div class="container width100 verticalLR">
+    <div class="grid justifyItemsBaseline">
+        <div class="firstRowFirstColumn"          data-offset-x="0"  data-offset-y="0"  data-expected-width="20" data-expected-height="120">É É ÉÉ</div>
+        <div class="secondRowFirstColumn bigFont" data-offset-x="20" data-offset-y="70" data-expected-width="50" data-expected-height="50">É</div>
+    </div>
+</div>
+
+<pre>verticalRL grid and parallel items</pre>
+
+<div class="container width100 verticalRL">
+    <div class="grid justifyItemsBaseline">
+        <div class="firstRowFirstColumn"          data-offset-x="50" data-offset-y="0"  data-expected-width="20" data-expected-height="120">É É ÉÉ</div>
+        <div class="secondRowFirstColumn bigFont" data-offset-x="0"  data-offset-y="70" data-expected-width="50" data-expected-height="50">É</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html
new file mode 100644
index 0000000000..df72a88262
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: baseline align a display:block item with a display:grid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  padding-bottom: 20px;
+}
+
+x, z {
+  display: block;
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+z {
+  width: 40px;
+  height: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><z></z>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <z></z><x>&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html
new file mode 100644
index 0000000000..19a26d8d6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline align a display:block item with a display:grid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><x style="grid-row:2"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html
new file mode 100644
index 0000000000..a426f879c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline align a display:block item with a display:grid item with spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x style="grid-row:1/span 3">&nbsp;A</x><x style="grid-column:1"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2/span 3">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html
new file mode 100644
index 0000000000..ed3bf30317
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline align a display:block item with a display:grid spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 2 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:2/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><x style="grid-row:2"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html
new file mode 100644
index 0000000000..5e20b88d35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline align a display:block item with a display:grid spanned item with spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 2 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:2/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x style="grid-row:1/span 3">&nbsp;A</x><x style="grid-row:4"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2/span 3">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html
new file mode 100644
index 0000000000..93e622ce6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on absolute positioned grid items with non-static position in the property's axis.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="170" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="70"  data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="110" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="10"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="45"  data-offset-y="10"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html
new file mode 100644
index 0000000000..6b2d5c4256
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="25"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="160" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="125" data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="175" data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="25"  data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="15"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="175" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="125" data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="50"  data-offset-y="15"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html
new file mode 100644
index 0000000000..0a5d674fbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="160" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="10"  data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="10"  data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html
new file mode 100644
index 0000000000..b9237a5334
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="160" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="10"  data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="10"  data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html
new file mode 100644
index 0000000000..39c75eb5d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="13"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="113" data-offset-y="162" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="163" data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="170" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="13"  data-offset-y="162" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="13"  data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="12"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="163" data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="113" data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="39"  data-offset-y="12"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="13"  data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html
new file mode 100644
index 0000000000..6565a60387
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items when both grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="16"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="153" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="11"  data-offset-y="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="116" data-offset-y="163" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="166" data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="53"  data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="173" data-offset-y="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="16"  data-offset-y="163" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="16"  data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="93"  data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="13"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="166" data-offset-y="113" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="116" data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="193" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="42"  data-offset-y="13"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="16"  data-offset-y="113" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html
new file mode 100644
index 0000000000..55c1892da1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on absolute positioned orthogonal grid items with non-static position in the property's axis.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="210" data-offset-y="80"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="110" data-offset-y="80"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="70"  data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="10"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="170" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="10"  data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html
new file mode 100644
index 0000000000..653dee6f7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="25"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="200" data-offset-y="65"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="125" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="175" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="100" data-offset-y="65"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="25"  data-offset-y="75"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="15"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="175" data-offset-y="115" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="125" data-offset-y="75"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="160" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="25"  data-offset-y="15"  data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html
new file mode 100644
index 0000000000..4136c44b0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="180" data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="10"  data-expected-width="40"  data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="5"   data-offset-y="10"  data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="70"  data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html
new file mode 100644
index 0000000000..86dc3257a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="180" data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="10"  data-expected-width="40"  data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="5"   data-offset-y="10"  data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="70"  data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html
new file mode 100644
index 0000000000..d12c1826f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="13"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="190" data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="113" data-offset-y="162" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="163" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="170" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="13"  data-offset-y="162" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="13"  data-offset-y="74"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="12"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="163" data-offset-y="112" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="113" data-offset-y="74"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="150" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="14"  data-offset-y="12"  data-expected-width="76"  data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="13"  data-offset-y="112" data-expected-width="56"  data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html
new file mode 100644
index 0000000000..003c3bbb37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="73"  data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="157" data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="23"  data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="111" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="223" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="57"  data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="161" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="11"  data-offset-y="75"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="63"  data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="161" data-offset-y="103" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="173" data-offset-y="75"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="111" data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="17"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="43"  data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
new file mode 100644
index 0000000000..4c8bd89ecf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="30"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="145" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="180" data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="45"  data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="20"  data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="20"  data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="110" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="230" data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="50"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="20"  data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
new file mode 100644
index 0000000000..6624ea00d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="160" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="210" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
new file mode 100644
index 0000000000..cc377a5c59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="160" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="210" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
new file mode 100644
index 0000000000..afbbfcb1dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="20"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="134" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="108" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="rid RTL">
+  <div data-offset-x="170" data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="34"  data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="170" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="8"   data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="rid verticalLR">
+  <div data-offset-x="8"   data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="rid verticalRL">
+  <div data-offset-x="220" data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="108" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="39"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="8"   data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
new file mode 100644
index 0000000000..3cf29475ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="23"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="137" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="11"  data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="111" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="173" data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="37"  data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="173" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="11"  data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="103" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="193" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="223" data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="111" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="42"  data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
new file mode 100644
index 0000000000..e1b3fc4d25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="80"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="165" data-offset-y="65"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="120" data-offset-y="155" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="230" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="65"  data-offset-y="65"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="170" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="20"  data-offset-y="155" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="20"  data-offset-y="75"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="70"  data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="170" data-offset-y="105" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="180" data-offset-y="75"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="120" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="25"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
new file mode 100644
index 0000000000..855ed7cdef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="60"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="145" data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="10"  data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="210" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="45"  data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40"  data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="160" data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="30"  data-offset-y="100" data-expected-width="70"  data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
new file mode 100644
index 0000000000..6fa38b9206
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="60"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="145" data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="10"  data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="210" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="45"  data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40"  data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="160" data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="30"  data-offset-y="100" data-expected-width="70"  data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
new file mode 100644
index 0000000000..0ff8497818
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="70"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="154" data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="108" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="220" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="54"  data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="158" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="8"   data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="8"   data-offset-y="74"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="158" data-offset-y="102" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="170" data-offset-y="74"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="108" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="14"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
new file mode 100644
index 0000000000..003c3bbb37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="73"  data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="157" data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="23"  data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="111" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="223" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="57"  data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="161" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="11"  data-offset-y="75"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="63"  data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="161" data-offset-y="103" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="173" data-offset-y="75"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="111" data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="17"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="43"  data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
new file mode 100644
index 0000000000..e0681310d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="390" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
new file mode 100644
index 0000000000..9049a826a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="30"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="295" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="380" data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="95"  data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="380" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="270" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="20"  data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="110" data-offset-y="285" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="230" data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="285" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="50"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="20"  data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
new file mode 100644
index 0000000000..42b92fd681
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="275" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="360" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="75"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="360" data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="210" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
new file mode 100644
index 0000000000..db5c0f89cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="275" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="360" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="75"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="360" data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="210" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
new file mode 100644
index 0000000000..3b0a3be6c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="20"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="284" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="108" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="370" data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="84"  data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="370" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="258" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="8"   data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="283" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="220" data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="108" data-offset-y="283" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="39"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="8"   data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
new file mode 100644
index 0000000000..537ce0ba80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="23"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="289" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="111" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="377" data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="86"  data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="377" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="261" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="11"  data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="103" data-offset-y="285" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="193" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="223" data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="111" data-offset-y="285" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="42"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html
new file mode 100644
index 0000000000..95b5f4fe6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html
new file mode 100644
index 0000000000..10ea533404
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="90"  data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90"  class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html
new file mode 100644
index 0000000000..51ad16826e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html
@@ -0,0 +1,67 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html
new file mode 100644
index 0000000000..f0f19e2920
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html
new file mode 100644
index 0000000000..c21500cd3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html
new file mode 100644
index 0000000000..65f5246764
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="90"  data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90"  class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html
new file mode 100644
index 0000000000..6ba763ea9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html
new file mode 100644
index 0000000000..e433dde9b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html
new file mode 100644
index 0000000000..90de8d4bc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="125" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html
new file mode 100644
index 0000000000..b71a318908
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html
new file mode 100644
index 0000000000..8b1999b4b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html
new file mode 100644
index 0000000000..fe738f2e8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html
new file mode 100644
index 0000000000..ffb52481a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="125" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html
new file mode 100644
index 0000000000..34e1c5ec6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html
new file mode 100644
index 0000000000..df8749c47b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html
new file mode 100644
index 0000000000..00059268fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html
new file mode 100644
index 0000000000..ad71302aef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Reference: align/justify-self on range INPUT items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace;
+}
+
+input {
+  margin:0;
+  padding:0;
+  border:none; /* NOTE: On Windows, GetWidgetBorder returns 1px on all sides,
+                  so we need the next declaration for the width/height to match: */
+  box-sizing: border-box;
+  width:300px;
+  height:80px;
+}
+
+.grid {
+  display: inline-grid;
+  grid: 80px / 300px;
+  place-items: stretch;
+  border:1px solid;
+}
+
+.zero { grid:0/0; }
+.zero input { width:0; height:0; }
+
+.none input { -webkit-appearance:none; }
+
+    </style>
+</head>
+<body>
+
+<div class="grid"><input type=range></div>
+<br>
+<div class="grid zero"><input type=range></div>
+<br>
+<div class="grid"><input type=range style="place-self:normal"></div>
+<br>
+<div class="grid zero"><input type=range style="place-self:normal"></div>
+<br>
+
+<div class="none">
+<div class="grid"><input type=range></div>
+<br>
+<div class="grid zero"><input type=range></div>
+<br>
+<div class="grid"><input type=range style="place-self:normal"></div>
+<br>
+<div class="grid zero"><input type=range style="place-self:normal"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html
new file mode 100644
index 0000000000..fb17f3a4a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align/justify-self on range INPUT items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+  <link rel="match" href="grid-self-alignment-stretch-input-range-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace;
+}
+
+input {
+  margin:0;
+  padding:0;
+  border:none;
+}
+
+.grid {
+  display: inline-grid;
+  grid: 80px / 300px;
+  place-items: stretch;
+  border:1px solid;
+}
+
+.zero { grid:0/0; }
+
+.none input { -webkit-appearance:none; }
+
+    </style>
+</head>
+<body>
+
+<div class="grid"><input type=range></div>
+<br>
+<div class="grid zero"><input type=range></div>
+<br>
+<div class="grid"><input type=range style="place-self:normal"></div>
+<br>
+<div class="grid zero"><input type=range style="place-self:normal"></div>
+<br>
+
+<div class="none">
+<div class="grid"><input type=range></div>
+<br>
+<div class="grid zero"><input type=range></div>
+<br>
+<div class="grid"><input type=range style="place-self:normal"></div>
+<br>
+<div class="grid zero"><input type=range style="place-self:normal"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html
new file mode 100644
index 0000000000..ac851b2514
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html
new file mode 100644
index 0000000000..d1640a5510
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="130" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html
new file mode 100644
index 0000000000..6b9563bbdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html
new file mode 100644
index 0000000000..05332f1c9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html
new file mode 100644
index 0000000000..ce17538fe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html
new file mode 100644
index 0000000000..ab6282ab4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="130" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html
new file mode 100644
index 0000000000..f960feec88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html
new file mode 100644
index 0000000000..fae2519cf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html
new file mode 100644
index 0000000000..6fa5073311
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html
new file mode 100644
index 0000000000..2ca7951bff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="00"  data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html
new file mode 100644
index 0000000000..f15f0c59fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html
new file mode 100644
index 0000000000..e5077b26e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html
new file mode 100644
index 0000000000..a7790b60ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html
new file mode 100644
index 0000000000..5c7fd92cc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html
new file mode 100644
index 0000000000..9265d65728
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html
new file mode 100644
index 0000000000..46370e4dcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html
new file mode 100644
index 0000000000..b41aeb73f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html
new file mode 100644
index 0000000000..36cec785e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-left: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="130" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="10"  data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html
new file mode 100644
index 0000000000..c8e34e484b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 0px 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 0px 20px 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html
new file mode 100644
index 0000000000..d88a7300b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-left: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-left: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html
new file mode 100644
index 0000000000..d38de47eff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html
new file mode 100644
index 0000000000..36aaff90f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="130" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html
new file mode 100644
index 0000000000..d32631e7d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html
new file mode 100644
index 0000000000..f6616048dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html
new file mode 100644
index 0000000000..1f852aba4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="105" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html
new file mode 100644
index 0000000000..e691767589
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-left: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="140" data-offset-y="120" data-expected-width="110" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="100" data-offset-y="00"  data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="10"  data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html
new file mode 100644
index 0000000000..86a02c6026
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 00px 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 0px 20px 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html
new file mode 100644
index 0000000000..d99580eecc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-left: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-left: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html
new file mode 100644
index 0000000000..59b953a0af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html
new file mode 100644
index 0000000000..4da2cd6c98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="110" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html
new file mode 100644
index 0000000000..86ed82f66e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html
new file mode 100644
index 0000000000..57a25d1372
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html
new file mode 100644
index 0000000000..56ad9c6a12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<meta name="assert" content="This test checks that the self-start/self-end alignment values are applied correctly in all writing-modes for inflow content.">
+<style>
+body {
+  line-height: 30px;
+}
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 20px;
+  grid-template-rows: 20px;
+  width: 20px;
+  height: 20px;
+  border: solid;
+  vertical-align: bottom;
+}
+.child {
+  background: green;
+  width: 10px;
+  height: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.child')">
+
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
new file mode 100644
index 0000000000..d6526d7995
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.inline-grid {
+  position: relative;
+  border: solid;
+  text-orientation: sideways;
+  font: 15px/1 Ahem;
+}
+
+.columns { grid-template-columns: 100px 100px; }
+.rows { grid-template-rows: 100px 100px; }
+
+.min-content-columns { grid-template-columns: min-content; }
+.max-content-columns { grid-template-columns: max-content; }
+.fit-content-columns { grid-template-columns: fit-content; }
+.min-content-rows { grid-template-rows: min-content; }
+.max-content-rows { grid-template-rows: max-content; }
+.fit-content-rows { grid-template-rows: fit-content; }
+
+.flex-columns     { grid-template-columns: 1fr; }
+.max-flex-columns { grid-template-columns: minmax(0px, 1fr); }
+.flex-rows        { grid-template-rows: 1fr; }
+.max-flex-rows    { grid-template-rows: minmax(0px, 1fr); }
+.auto-rows        { grid-template-rows: auto 100px; }
+
+.height25  { height: 25px; }
+.height50  { height: 50px; }
+.height200 { height: 200px; }
+.width25   { width: 25px; }
+.width50   { width: 50px; }
+.width200  { width: 200px; }
+
+.height200Percent { height: 200%; }
+.width200Percent  { width: 200%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
+<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
+<div style="height: 125px">
+    <pre>auto-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns">
+        <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 200px">
+    <pre>min-content-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns min-content-rows">
+        <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="150"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 200px">
+    <pre>max-content-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns max-content-rows">
+        <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="150"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 200px">
+    <pre>fit-content-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns fit-content-rows">
+        <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="150"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 125px">
+    <pre>flexible-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns flex-rows">
+        <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 125px">
+    <pre>flex max-function rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns max-flex-rows">
+        <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>auto-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows">
+        <div class="firstRowFirstColumn verticalRL width50"          data-offset-x="0"  data-offset-y="0"   data-expected-width="50"  data-expected-height="100"></div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="50" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>min-content-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows min-content-columns">
+        <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="150" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="75" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>max-content-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows max-content-columns">
+        <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="150" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="75" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>fit-content-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows fit-content-columns">
+        <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="150" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="75" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>flexible-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows flex-columns">
+        <div class="firstRowFirstColumn verticalRL width50"          data-offset-x="0"  data-offset-y="0"   data-expected-width="50"  data-expected-height="100"></div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="50" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items in an auto-sized row force repeating the track sizing and height is not indefinite in that phase.</pre>
+    <!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+    <div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns">
+        <div class="firstRowFirstColumn verticalLR width50 height50"          data-offset-x="0"   data-offset-y="0"   data-expected-width="50"  data-expected-height="50"></div>
+        <div class="secondRowFirstColumn verticalLR width200Percent height50" data-offset-x="0"   data-offset-y="50"  data-expected-width="100" data-expected-height="50"></div>
+        <div class="firstRowSpanning2AutoColumn verticalLR width25"           data-offset-x="50"  data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
new file mode 100644
index 0000000000..ad989b98a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.inline-grid {
+  position: relative;
+  border: solid;
+  text-orientation: sideways;
+  font: 15px/1 Ahem;
+}
+
+.columns { grid-template-columns: 100px 100px; }
+.rows { grid-template-rows: 100px 100px; }
+
+.min-content-columns { grid-template-columns: min-content; }
+.max-content-columns { grid-template-columns: max-content; }
+.fit-content-columns { grid-template-columns: fit-content; }
+.flex-columns        { grid-template-columns: 1fr; }
+.max-flex-columns    { grid-template-columns: minmax(0px, 1fr); }
+.auto-columns        { grid-template-columns: auto 100px; }
+
+.min-content-rows { grid-template-rows: min-content; }
+.max-content-rows { grid-template-rows: max-content; }
+.fit-content-rows { grid-template-rows: fit-content; }
+.flex-rows        { grid-template-rows: 1fr; }
+.max-flex-rows    { grid-template-rows: minmax(0px, 1fr); }
+.auto-rows        { grid-template-rows: auto 100px; }
+
+.height25  { height: 25px; }
+.height50  { height: 50px; }
+.height200 { height: 200px; }
+.width25   { width: 25px; }
+.width50   { width: 50px; }
+.width200  { width: 200px; }
+
+.bigFont { font-size: 50px; }
+.paddingLeft { padding-left: 25px; }
+.paddingBottom { padding-bottom: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
+
+<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
+<pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns height200">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="95"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="135">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="135" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"  data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>flex-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns flex-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>max-flex-sized rows - horizonal grid and verticalLR item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<div class="inline-grid alignItemsBaseline columns auto-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>auto-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows width200">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"   data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="175" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows min-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"  data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"  data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="95" data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows max-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>flex-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows flex-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>max-flex-sized columns - horizontal grid item - row-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="50">É</div>
+  <div class="secondRowFirstColumn verticalLR"                    data-offset-x="32"  data-offset-y="50"  data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="107" data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns width200">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"   data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="175" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"  data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"  data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="95" data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>flex-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns flex-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>max-flex-sized rows - verticalLR grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<div class="inline-grid verticalLR alignItemsBaseline auto-columns max-flex-rows">
+  <div class="firstRowFirstColumn bigFont"        data-offset-x="0"   data-offset-y="0"   data-expected-width="50"  data-expected-height="50">É</div>
+  <div class="firstRowSecondColumn horizontalBT"  data-offset-x="7"  data-offset-y="50"   data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="82" data-offset-y="0"    data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline columns width200">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="30" data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="65"  data-offset-y="100" data-expected-width="135" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="40"   data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25" data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"  data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25"  data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0"   data-expected-width="75"  data-expected-height="50">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25"  data-offset-y="50" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+<pre>flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns flex-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0"   data-expected-width="75"  data-expected-height="50">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25"  data-offset-y="50" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+<pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns max-flex-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10"  data-offset-y="0"   data-expected-width="75"  data-expected-height="50">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25"   data-offset-y="50"  data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"    data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
new file mode 100644
index 0000000000..3d688ad15f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  background: grey;
+  text-orientation: sideways;
+  font: 15px/1 Ahem;
+}
+.row { grid: minmax(0px, 1fr) / auto 50px 100px }
+.column { grid: auto 50px 100px / minmax(0px, 1fr); }
+.item1 {
+   font-size: 30px;
+   background: blue;
+}
+.item2 {
+  font-size: 20px;
+  background: red;
+}
+.item3 {
+  font-size: 80px;
+  background: green;
+}
+.height50 { height: 50px; }
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
+<pre>flex row</pre>
+<div class="grid row alignItemsBaseline">
+  <div class="item1 verticalLR" data-offset-x="0"   data-offset-y="34" data-expected-width="30"  data-expected-height="30">É</div>
+  <div class="item2"            data-offset-x="30"  data-offset-y="48" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3"            data-offset-x="80" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex row</pre>
+<div class="grid row alignItemsBaseline">
+  <div class="item1 relativeHeight" data-offset-x="0"   data-offset-y="56" data-expected-width="30"  data-expected-height="43">É</div>
+  <div class="item2"                data-offset-x="30"  data-offset-y="64" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3 verticalLR"     data-offset-x="80" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex row</pre>
+<div class="grid row alignItemsBaseline">
+  <div class="item1 relativeHeight" data-offset-x="0"   data-offset-y="40" data-expected-width="30"  data-expected-height="40">É</div>
+  <div class="item2 verticalLR"     data-offset-x="30"  data-offset-y="44" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3"                data-offset-x="80" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex column - all items share a baseline group</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1"            data-offset-x="16" data-offset-y="0"   data-expected-width="30" data-expected-height="30">É</div>
+  <div class="item2 verticalLR" data-offset-x="12" data-offset-y="30"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR" data-offset-x="0"  data-offset-y="80" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+<pre>flex column - all items share a baseline group</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1 relativeWidth height50" data-offset-x="0" data-offset-y="0"   data-expected-width="40" data-expected-height="50">É</div>
+  <div class="item2 verticalLR"             data-offset-x="12" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR"             data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+<pre>flex column - all items share a baseline group</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1 relativeWidth height50" data-offset-x="0" data-offset-y="0"   data-expected-width="40" data-expected-height="50">É</div>
+  <div class="item2"                        data-offset-x="16" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR"             data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html
new file mode 100644
index 0000000000..6a02ae4796
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+    margin: 0;
+}
+.inline-flexbox {
+    display: inline-flex;
+    background-color: lightgrey;
+    margin-top: 5px;
+}
+.flexbox {
+    display: flex;
+    background-color: grey;
+    margin-top: 10px;
+}
+.empty {
+    border-style: solid;
+    border-width: 5px 0px 10px;
+    padding: 2px 0px 4px;
+    margin: 10px 0px 20px;
+}
+.column {
+    flex-flow: column;
+}
+.column-reverse {
+    flex-flow: column-reverse;
+}
+</style>
+
+<body style="position: relative">
+
+<!-- If any of the flex items on the flex container's first line participate
+in baseline alignment, the flex container's main-axis baseline is the baseline
+of those flex items. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 50px;">
+    <div style="align-self: flex-end">below</div>
+    <div style="align-self: baseline; margin-top: 15px">baseline</div>
+    <div style="align-self: flex-start">above</div>
+</div>
+after text
+</div>
+
+<!-- This grid has a baseline item, it's orthogonal but it still participates
+in baseline alignment. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 40px">
+    <div style="align-self: flex-end">below</div>
+    <div style="align-self: baseline; margin-top: 20px"></div>
+    <div style="align-self: flex-start">above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox">
+    <h2>h2 baseline</h2>
+    <div>above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox">
+    <div>baseline</div>
+    <h2>h2 below</h2>
+</div>
+after text
+</div>
+
+<!-- If the first flex item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-flexbox" style="width: 40px; height: 40px">
+    <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
+</div>
+of the grey box
+</div>
+
+<!-- If there are no flexitems, align to the bottom of the margin box. -->
+<div>
+should align below the bottom
+<div class="empty inline-flexbox" style="width: 30px; height: 30px">
+</div>
+of the black line
+</div>
+
+<!-- If the griditem has not a natural baseline, align to the bottom of the box. -->
+<div>
+should align with the bottom
+<div class="inline-flexbox" style="width: 40px; height: 40px;">
+    <div style="width: 20px; height: 20px; border: 5px solid; background: red; "></div>
+</div>
+of the red box
+</div>
+
+<!-- cross-axis (column) test cases. -->
+<div>
+before text
+<div class="inline-flexbox column">
+    <div>baseline</div>
+    <div>below</div>
+</div>
+after text
+</div>
+
+<!-- If the first flex item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-flexbox column" style="width: 40px; height: 40px;">
+    <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
+    <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
+</div>
+of the grey box
+</div>
+
+<!-- More tests on the right side of the page. -->
+<div style="position: absolute; top: 0; left: 400px; width: 360px">
+
+<!-- Ignore absolutely positioned flex items. -->
+<div>
+before text
+<div class="inline-flexbox">
+    <div style="position: absolute">absolute</div>
+    <div style="margin-top: 30px">baseline</div>
+</div>
+after text
+</div>
+
+<!-- We don't participate in baseline alignment if there's an auto margin. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 40px;">
+    <div>baseline</div>
+    <div style="align-self: baseline; margin-top: auto">below</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div style="display: inline-block">
+<div class="inline-flexbox" style="height: 40px;">
+    <div>above</div>
+    <div style="align-self: baseline; margin-top: 10px">baseline</div>
+    <div>above</div>
+</div>
+after
+</div>
+text
+</div>
+
+<!-- The spec is a little unclear what should happen here. For now, align to
+the last line box. -->
+<div>
+before text
+<div style="display: inline-block">
+<div class="flexbox" style="height: 30px;">
+  baseline
+</div>
+</div>
+after text
+</div>
+
+<table style="background-color: lightgrey; margin-top: 5px">
+<tr style="height: 50px">
+  <td style="vertical-align: bottom">bottom</td>
+  <td style="vertical-align: baseline">baseline</td>
+  <td style="vertical-align: top">top</td>
+  <td style="vertical-align: baseline"><div class="flexbox">
+    <h2>h2 baseline</h2>
+    <div>above</div>
+  </div></td>
+</table>
+
+<!-- If a box contributing a baseline has a scrollbar, the box must be treated
+as being in its initial scroll position when computing the baseline. -->
+<div>
+before text
+<div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px">
+    <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
+        The baseline is based on<br>
+        the non-scrolled position;<br>
+        this won't line up.
+    </div>
+</div>
+after text
+</div>
+
+</div>
+
+<script>
+document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
+document.getElementById("flexbox-with-scrollbar").style.width = "auto";
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html
new file mode 100644
index 0000000000..43634e58c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<style>
+.flexbox {
+    display: flex;
+}
+.inline-flexbox {
+    display: inline-flex;
+}
+.flex-one {
+    flex: 1;
+}
+.inline-block { display: inline-block; }
+.flexbox, .inline-flexbox { background-color: lightgrey; }
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+.flexbox > div {
+    min-width: 0;
+    min-height: 0;
+}
+</style>
+<div>
+before text
+<div class="border" style="display: inline-block; background-color: lightgrey">
+<div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;">
+  baseline
+</div>
+</div>
+after text
+</div>
+
+<div>
+Should align
+<div class="inline-block border">
+  <div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink">
+      <div class="flex-one" style="background-color: lightgrey"></div>
+  </div>
+</div>
+with the
+<div class="inline-block margin">
+  <div class="flexbox border" style="width: 50px; height: 50px; background-color: pink">
+      <div class="flex-one" style="background-color: lightgrey"></div>
+  </div>
+</div>
+bottom of
+<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
+  <div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink">
+      <div class="flex-one" style="background-color: lightgrey;"></div>
+  </div>
+</div>
+the grey box.
+</div>
+
+<div>
+Should align with the
+<div class="inline-block">
+  <div class="flexbox" style="background-color: white">
+      <div class="flex-one border padding margin" style="background-color: lightgrey;"></div>
+  </div>
+</div>
+bottom of the pink box.
+</div>
+
+<div>
+Should align 8px
+<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
+below the bottom
+<div class="inline-flexbox margin border padding"></div>
+of the pink box.
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html
new file mode 100644
index 0000000000..446c42f1a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<style>
+.flexbox {
+    display: flex;
+}
+.inline-flexbox {
+    display: inline-flex;
+}
+.flex-one {
+    flex: 1;
+}
+.inline-block { display: inline-block; }
+.flexbox, .inline-flexbox { background-color: lightgrey; }
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+.flexbox > div {
+    min-width: 0;
+    min-height: 0;
+}
+</style>
+
+<div>
+Should align with the bottom
+<div class="inline-block border margin padding" style="background-color: pink">
+  <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">
+      <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
+  </div>
+</div>
+of the horizontal scrollbar.
+</div>
+
+<div>
+Should align 10px below the
+<div class="inline-block" style="background-color: pink">
+  <div class="flexbox" style="width: 100px; height: 100px; background-color: pink">
+      <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
+  </div>
+</div>
+horizontal scrollbar, if one is visible.
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html
new file mode 100644
index 0000000000..7f8bb12cd6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<title>
+  Reference for Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items
+</title>
+
+<style>
+  @import "/fonts/ahem.css";
+  .grid {
+    border: solid silver;
+    margin: 1em 2px;
+    font: 20px/1 Ahem;
+
+    display: inline-block;
+    vertical-align: top;
+  }
+  .grid > div {
+    border: black 10px;
+    border-style: solid none;
+    color: orange;
+  }
+  div + div {
+    font-size: 2em;
+  }
+  div + div + div {
+    font-size: 50%;
+  }
+
+  .ref {
+    position: relative;
+    width: 80px;
+    height: 96px;
+  }
+  .ref > div {
+    position: absolute;
+  }
+  .ref1 { top:   16px; }
+  .ref2 { left:  20px; }
+  .ref3 { top:   24px;
+          left:  60px; }
+  .ref4 { right:  0px;
+          top:    0px;
+          bottom: 0px;
+          width: 10px; }
+
+  .ref.content > div:not(.stripe) {
+    border-color: transparent;
+  }
+  .stripe {
+    width: 80px;
+    height: 76px;
+  }
+</style>
+
+<p>Test passes if each pair of boxes is identical.</p>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<br>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
+
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html
new file mode 100644
index 0000000000..e8932cba9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>
+  CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions Reference File
+</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    border: solid silver;
+    margin: 1em 0.25em;
+    display: inline-grid;
+    grid-template-columns: repeat(3, auto);
+    font: 20px/1 Ahem;
+    height: 5em;
+  }
+  .grid > div {
+    border: 1em aqua;
+    border-style: solid none;
+  }
+  .index {
+    padding: 1em 0;
+  }
+  .percent, .orthogonal {
+    height: 1em;
+  }
+
+  .self > div {
+    align-self: start;
+  }
+  .content > div {
+    align-content: start;
+  }
+  .self.ref > div {
+    align-self: start;
+  }
+  .content.ref > div {
+    align-content: start;
+  }
+</style>
+
+<p>Test passes if the upper set of boxes is identical to the lower set.
+
+<div class="grid self">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid self">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid content">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid content">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<br>
+
+<div class="grid self ref">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html
new file mode 100644
index 0000000000..d4db58e090
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<title>
+  Reference for Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
+</title>
+
+<style>
+  @import "/fonts/ahem.css";
+  .grid {
+    border: solid silver;
+    margin: 1em 2px;
+    font: 20px/1 Ahem;
+
+    display: inline-block;
+    vertical-align: top;
+  }
+  .grid > div {
+    border: black 10px;
+    border-style: none solid;
+    color: orange;
+    writing-mode: vertical-rl;
+  }
+  div + div {
+    font-size: 2em;
+  }
+  div + div + div {
+    font-size: 50%;
+  }
+
+  .ref {
+    position: relative;
+    width: 96px;
+    height: 80px;
+  }
+  .ref > div {
+    position: absolute;
+  }
+  .ref1 { right:  16px; }
+  .ref2 { top:    20px;
+          right:   0px; }
+  .ref3 { right:  24px;
+          top:    60px; }
+  .ref4 { bottom:  0px;
+          right:   0px;
+          left:    0px;
+          height: 10px; }
+
+  .ref.content > div:not(.stripe) {
+    border-color: transparent;
+  }
+  .stripe {
+    width: 76px;
+    height: 80px;
+  }
+</style>
+
+<p>Test passes if each pair of boxes is identical.</p>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<br>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html
new file mode 100644
index 0000000000..d7ab97b9ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to one axis the aspect-ratio of a replaced element is preserved.">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; grid-template: 100px / 200px; width: 100px; height: 100px; background: red;">
+  <canvas width=10 height=10 style="background: green; align-self: stretch;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html
new file mode 100644
index 0000000000..1a4e344dd0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to one axis the aspect-ratio of a replaced element is preserved.">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; grid-template: 200px / 100px; width: 100px; height: 100px; background: red;">
+  <canvas width=10 height=10 style="background: green; justify-self: stretch;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html
new file mode 100644
index 0000000000..2c27480d5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored.">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <canvas width=10 height=20 style="background: green; align-self: stretch; justify-self: stretch;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html
new file mode 100644
index 0000000000..437b379332
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/25x50-green.png" width=25 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html
new file mode 100644
index 0000000000..b14c45d0c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/25x50-green.png" width=25 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; writing-mode: vertical-lr;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html
new file mode 100644
index 0000000000..ed14e36057
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored, but not when auto margins are present.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 500px; width: 100px; height: 100px; background: red;">
+  <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; margin-right: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html
new file mode 100644
index 0000000000..0c841c7654
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored, but not when auto margins are present.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 500px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; margin-bottom: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html
new file mode 100644
index 0000000000..9227332851
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="Stretch alignment in one axis should apply aspect-ratio in the other">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/50x50-green.png" width=50 height=50 style="background: green; justify-self: stretch; width: auto; height: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html
new file mode 100644
index 0000000000..ff721b8f19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="Stretch alignment in one axis should apply aspect-ratio in the other">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; width: auto; height: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html
new file mode 100644
index 0000000000..c85fd77ef9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html
new file mode 100644
index 0000000000..2473bb5d4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 125px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
new file mode 100644
index 0000000000..1b563f1f42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html
new file mode 100644
index 0000000000..7d9ebecb8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-002-b-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row; }
+.grid { grid: 60px 60px 75px 100px / 125px; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
new file mode 100644
index 0000000000..8593ea1abc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html
new file mode 100644
index 0000000000..700fd26097
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 175px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html
new file mode 100644
index 0000000000..cd097c1d48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area:nth-child(1) { width: 70px;  }
+.area:nth-child(2) { width: 80px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left;  }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 70px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 80px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block {
+   width: 375px;
+   height: 100px;
+}
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item ">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html
new file mode 100644
index 0000000000..2372ac1931
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 100px / 70px 80px 100px 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+}
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html
new file mode 100644
index 0000000000..d589acb374
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR top"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html
new file mode 100644
index 0000000000..c7f49bf24a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 125px / 60px 75px 75px 125px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-rows: 150px; }
+</style>
+
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item verticalLR  extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item horizontalTB extraLeftPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html
new file mode 100644
index 0000000000..75a366fc40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 140px; }
+.block.verticalLR, .block.verticalRL {
+   width: 140px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div style="direction: rtl;" class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div style="direction: rtl;" class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html
new file mode 100644
index 0000000000..3bfa2d2079
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 60px 60px 75px 100px / 140px; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR  extraLeftPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+
+<br clear="all">
+
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html
new file mode 100644
index 0000000000..610b2ad0a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 100px; }
+.block.verticalLR, .block.verticalRL {
+   width: 100px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html
new file mode 100644
index 0000000000..34edced2b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 75px 100px 125px / 100px; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html
new file mode 100644
index 0000000000..59a0e33959
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item, .area.verticalRL > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 100px; }
+.area:nth-child(4) { width: 100px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html
new file mode 100644
index 0000000000..e0966bb6e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 60px 100px 100px / 150px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-columns: 125px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html
new file mode 100644
index 0000000000..7876656c20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+div {
+  float: left;
+  width: 200px;
+  height: 200px;
+  background: green;
+}
+</style>
+<div></div>
+<div style="margin-top: 100px"></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html
new file mode 100644
index 0000000000..5398b7e9c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121761">
+<link rel="match" href="grid-self-baseline-008-ref.html">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test baseline alignment with percentage track sizing functions and grid items being or containing replaced elements with aspect ratio and percentage sizes." />
+<style>
+.grid {
+  display: grid;
+  width: 400px;
+  grid-template-columns: 25% 25% 25% 25%;
+  line-height: 0;
+}
+.percent {
+  width: 100%;
+}
+canvas {
+  background: green;
+}
+</style>
+<div class="grid alignItemsBaseline">
+  <canvas width="100" height="200"></canvas>
+  <canvas width="200" height="400" class="percent"></canvas>
+  <div>
+    <canvas width="100" height="100" class="percent"></canvas>
+    <canvas width="100" height="100" class="percent"></canvas>
+  </div>
+  <div class="percent">
+    <canvas width="100" height="100" class="percent"></canvas>
+    <canvas width="100" height="100" class="percent"></canvas>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html
new file mode 100644
index 0000000000..5b2ecaaab0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on a fixed grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div>
+    <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html
new file mode 100644
index 0000000000..fb4e3f1a4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and content-distribution.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: space-evenly;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 25px; left: 0px;">XX<br>XXXX<br>XX</div>
+  <div style="top: 73px; left: 0px;">XX X</div>
+  <div style="top: 17px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html
new file mode 100644
index 0000000000..c06394ad58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and empty items .">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  font: 20px/1 Ahem;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 0px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 24px; left: 50px" class="big">X</div>
+  <div style="top: 44px; left: 0px;">XX X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html
new file mode 100644
index 0000000000..e877b81480
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+  vertical-align: top;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div>
+  <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html
new file mode 100644
index 0000000000..21cc0b8ac2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and gutters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  grid-row-gap: 20px;
+  vertical-align: top;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX</div>
+  <div style="top: 58px; left: 0px;">XX X</div>
+  <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html
new file mode 100644
index 0000000000..ed3449babe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  font: 10px/1 Ahem;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 0px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 24px; left: 50px" class="big">X</div>
+  <div style="top: 44px; left: 0px;">XX X</div>
+</div>
+<div class="grid"">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html
new file mode 100644
index 0000000000..4b854119b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html
new file mode 100644
index 0000000000..6eb65039e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and content-distribution.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: space-evenly;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 23px;">XXX<br>XXX</div>
+  <div style="top: 0px; left: 72px;">X</div>
+  <div style="top: 10px; left: 72px;">X</div>
+  <div style="top: 20px; left: 33px;">X</div>
+  <div style="top: 30px; left: 33px;">X</div>
+  <div style="top: 30px; left: 72px;">X</div>
+  <div style="top: 50px; left: 18px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html
new file mode 100644
index 0000000000..a173d290ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 0px; left: 50px;">X</div>
+  <div style="top: 10px; left: 50px;">X</div>
+  <div style="top: 30px; left: 50px;">X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html
new file mode 100644
index 0000000000..0c1c1dbb36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.big { font-size: 20px; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html
new file mode 100644
index 0000000000..dba173a439
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and gutters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  grid-column-gap: 20px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXX<br>XXX</div>
+  <div style="top: 0px; left: 55px;">X</div>
+  <div style="top: 10px; left: 55px;">X</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X</div>
+  <div style="top: 30px; left: 55px;">X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html
new file mode 100644
index 0000000000..ff5903459b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 0px; left: 50px;">X</div>
+  <div style="top: 10px; left: 50px;">X</div>
+  <div style="top: 30px; left: 50px;">X</div>
+  <div style="top: 50px; left: 0px;">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html
new file mode 100644
index 0000000000..1b8130d7b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div class="item">
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html
new file mode 100644
index 0000000000..556009dfde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html
new file mode 100644
index 0000000000..735ea55786
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block"><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html
new file mode 100644
index 0000000000..c196cd35c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item verticalLR extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+
+<br clear="all">
+
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item verticalRL extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html
new file mode 100644
index 0000000000..fd966d16a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block" ><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block" ><div class="item verticalRL extraTopPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html
new file mode 100644
index 0000000000..287cb80fd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR extraTopPadding">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR extraBottomPadding">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL extraTopPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL extraBottomPadding">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html
new file mode 100644
index 0000000000..be610d4f7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline; }
+.left { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block verticalLR"><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB extraLeftPadding left">É</div><div class="item horizontalTB left">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html
new file mode 100644
index 0000000000..673c9ff208
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.column { grid-auto-flow: row; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item">É</div>
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html
new file mode 100644
index 0000000000..c38b6c7611
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   position: relative;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.inline { display: inline-block; }
+.item { display: inline-block; }
+.item.horizontalTB:not(.bottom) { margin-left: 0px; }
+.bottom { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html
new file mode 100644
index 0000000000..f816e893ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalRL extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html
new file mode 100644
index 0000000000..6053b38a6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html
new file mode 100644
index 0000000000..c034040b5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item verticalLR extraRightPadding ">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL extraLeftPadding">É</div>
+    <div class="item verticalRL extraRightPadding ">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
new file mode 100644
index 0000000000..cba725f425
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 10px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html
new file mode 100644
index 0000000000..6018514242
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraRightPadding">É</div>
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html
new file mode 100644
index 0000000000..cf19544be8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html
new file mode 100644
index 0000000000..801474df57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html
new file mode 100644
index 0000000000..9a7a53969d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.item.horizontalTB { margin-left: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html
new file mode 100644
index 0000000000..6dd235a7b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html
@@ -0,0 +1,54 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html
new file mode 100644
index 0000000000..795926615f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { float: left; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html
new file mode 100644
index 0000000000..18f581620d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item horizontalTB extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html
new file mode 100644
index 0000000000..1ce8267ee7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html
new file mode 100644
index 0000000000..1f2e3860b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html
@@ -0,0 +1,54 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html
new file mode 100644
index 0000000000..fb68579d9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
+.item.horizontalTB  { margin: 10px 6px 4px 0px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div></div>
+<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html
new file mode 100644
index 0000000000..a27cb67898
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html
new file mode 100644
index 0000000000..51c5f77da3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html
new file mode 100644
index 0000000000..654c17cd9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item horizontalTB extraTopPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
new file mode 100644
index 0000000000..6f5641448d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left:15.5px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html
new file mode 100644
index 0000000000..ae7b6bf36e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html
new file mode 100644
index 0000000000..02d3feb126
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html
new file mode 100644
index 0000000000..af7ca16d63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html
new file mode 100644
index 0000000000..ef6b45c9c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.item.horizontalTB { margin-left: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html
new file mode 100644
index 0000000000..9aa00a7114
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context. No item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html
new file mode 100644
index 0000000000..b72fc8817a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html
new file mode 100644
index 0000000000..2ae2f4fba6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item horizontalTB extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html
new file mode 100644
index 0000000000..bab3592266
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block directionRTL"><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html
new file mode 100644
index 0000000000..d2f08642fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html
new file mode 100644
index 0000000000..da72a5f017
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div></div>
+<div class="block directionRTL"><div class="item verticalRL extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html
new file mode 100644
index 0000000000..0d40ce288d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html
new file mode 100644
index 0000000000..4011c69142
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block directionRTL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block directionRTL"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html
new file mode 100644
index 0000000000..40f1e0796e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item horizontalTB extraTopPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
new file mode 100644
index 0000000000..30658b8cc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalLR">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 16px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html
new file mode 100644
index 0000000000..49bab61ca0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png
new file mode 100644
index 0000000000..25b76c3c6f
Binary files /dev/null and b/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png differ
diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png
new file mode 100644
index 0000000000..6ab02fce0f
Binary files /dev/null and b/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png differ
diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png
new file mode 100644
index 0000000000..6c1406b7df
Binary files /dev/null and b/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png differ
diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js b/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js
new file mode 100644
index 0000000000..766d140d2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js
@@ -0,0 +1,14 @@
+function evaluateStyleChange(element, phase, expectedProperty, expectedResult) {
+    element.className += " " + phase;
+    element.setAttribute(expectedProperty, expectedResult);
+    checkLayout("." + phase, false);
+}
+function evaluateStyleChangeMultiple(phase, expectedResult) {
+    for (var item in expectedResult) {
+        var element = document.getElementById(item);
+        element.className += " " + phase;
+        for (var key in expectedResult[item])
+            element.setAttribute(key, expectedResult[item][key]);
+    }
+    checkLayout("." + phase, false);
+}
-- 
cgit v1.2.3