1 files changed, 72 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html
new file mode 100644
index 0000000000..68f1b3d43c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Specified alignment properties in subgridded axes</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="alignment-in-subgridded-axes-002-ref.html">
+<style>
+div {
+  display: inline-grid;
+  gap: 5px;
+}
+
+.grid { grid-template: 50px / 50px }
+.vlr { writing-mode: vertical-lr }
+
+.subgrid {
+  background: gray;
+  grid-template: subgrid / subgrid;
+}
+
+.item {
+  background: orange;
+  height: 20px;
+  width: 20px;
+}
+
+.as { align-self: start }
+.ae { align-self: end }
+.ac { align-self: center }
+.ab { align-self: baseline }
+
+.js { justify-self: start }
+.je { justify-self: end }
+.jc { justify-self: center }
+.jb { justify-self: baseline }
+</style>
+<div id="wrapper"></div>
+
+<template id="grid">
+  <div class="grid">
+    <div class="subgrid">
+      <div class="item"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+"use strict";
+
+let align_properties = ["as", "ae", "ac", "ab"];
+let justify_properties = ["js", "je", "jc", "jb"];
+let wrapper = document.getElementById("wrapper");
+
+wrapper.style.gridTemplateColumns = `repeat(${justify_properties.length * 2}, 50px)`;
+
+for (let align_self of align_properties) {
+  // Add a grid for all combinations of `align-self` and `justify-self`.
+  for (let justify_self of justify_properties) {
+    let grid = document.getElementById("grid").content.cloneNode(true);
+    grid.querySelector(".item").classList.add(align_self, justify_self);
+    wrapper.appendChild(grid);
+  }
+
+  // Add all combinations again, but make the subgrid orthogonal.
+  for (let justify_self of justify_properties) {
+    let grid = document.getElementById("grid").content.cloneNode(true);
+    grid.querySelector(".item").classList.add(align_self, justify_self);
+    grid.querySelector(".subgrid").classList.add("vlr");
+    wrapper.appendChild(grid);
+  }
+}
+</script>