diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html | 72 |
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> |