Blitz - WPT: row-subgrid-alignment-in-subgridded-axis-002.html

wpt / css / css-grid / grid-lanes / subgrid / grid-subgridded-to-grid-lanes / alignment / row-subgrid-alignment-in-subgridded-axis-002.html

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/alignment/row-subgrid-alignment-in-subgridded-axis-002.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Lanes Test: item alignment passes through a row-direction subgrid, including orthogonal subgrids</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
<link rel="match" href="row-subgrid-alignment-in-subgridded-axis-002-ref.html">
<style>
#wrapper { display: inline-grid; gap: 5px; }

.grid-lanes {
  display: inline grid-lanes;
  gap: 5px;
  grid-template-rows: 50px;
  width: 50px;
}
.vlr { writing-mode: vertical-lr; }

.subgrid {
  background: gray;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  width: 50px;
}

.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-lanes">
  <div class="grid-lanes">
    <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 lanes for all combinations of `align-self` and `justify-self`.
  for (let justify_self of justify_properties) {
    let lanes = document.getElementById("grid-lanes").content.cloneNode(true);
    lanes.querySelector(".item").classList.add(align_self, justify_self);
    wrapper.appendChild(lanes);
  }

  // Add all combinations again, but make the subgrid orthogonal.
  for (let justify_self of justify_properties) {
    let lanes = document.getElementById("grid-lanes").content.cloneNode(true);
    lanes.querySelector(".item").classList.add(align_self, justify_self);
    lanes.querySelector(".subgrid").classList.add("vlr");
    wrapper.appendChild(lanes);
  }
}
</script>

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/alignment/row-subgrid-alignment-in-subgridded-axis-002-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
div {
  display: inline-grid-lanes;
  gap: 5px;
}

.grid-lanes {
  grid-template-rows: 50px;
  width: 50px;
}
.vlr { writing-mode: vertical-lr }
.subgrid { background: gray; width: 50px; }

.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-lanes">
  <div class="grid-lanes">
    <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 lanes for all combinations of `align-self` and `justify-self`.
  for (let justify_self of justify_properties) {
    let lanes = document.getElementById("grid-lanes").content.cloneNode(true);
    lanes.querySelector(".item").classList.add(align_self, justify_self);
    wrapper.appendChild(lanes);
  }

  // Add all combinations again, but make the subgrid orthogonal.
  for (let justify_self of justify_properties) {
    let lanes = document.getElementById("grid-lanes").content.cloneNode(true);
    lanes.querySelector(".item").classList.add(align_self, justify_self);
    lanes.querySelector(".subgrid").classList.add("vlr");
    wrapper.appendChild(lanes);
  }
}
</script>