tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

alignment-in-subgridded-axes-002.html (1969B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Test: Specified alignment properties in subgridded axes</title>
      4 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
      6 <link rel="match" href="alignment-in-subgridded-axes-002-ref.html">
      7 <style>
      8 div {
      9  display: inline-grid;
     10  gap: 5px;
     11 }
     12 
     13 .grid { grid-template: 50px / 50px }
     14 .vlr { writing-mode: vertical-lr }
     15 
     16 .subgrid {
     17  background: gray;
     18  grid-template: subgrid / subgrid;
     19 }
     20 
     21 .item {
     22  background: orange;
     23  height: 20px;
     24  width: 20px;
     25 }
     26 
     27 .as { align-self: start }
     28 .ae { align-self: end }
     29 .ac { align-self: center }
     30 .ab { align-self: baseline }
     31 
     32 .js { justify-self: start }
     33 .je { justify-self: end }
     34 .jc { justify-self: center }
     35 .jb { justify-self: baseline }
     36 </style>
     37 <div id="wrapper"></div>
     38 
     39 <template id="grid">
     40  <div class="grid">
     41    <div class="subgrid">
     42      <div class="item"></div>
     43    </div>
     44  </div>
     45 </template>
     46 
     47 <script>
     48 "use strict";
     49 
     50 let align_properties = ["as", "ae", "ac", "ab"];
     51 let justify_properties = ["js", "je", "jc", "jb"];
     52 let wrapper = document.getElementById("wrapper");
     53 
     54 wrapper.style.gridTemplateColumns = `repeat(${justify_properties.length * 2}, 50px)`;
     55 
     56 for (let align_self of align_properties) {
     57  // Add a grid for all combinations of `align-self` and `justify-self`.
     58  for (let justify_self of justify_properties) {
     59    let grid = document.getElementById("grid").content.cloneNode(true);
     60    grid.querySelector(".item").classList.add(align_self, justify_self);
     61    wrapper.appendChild(grid);
     62  }
     63 
     64  // Add all combinations again, but make the subgrid orthogonal.
     65  for (let justify_self of justify_properties) {
     66    let grid = document.getElementById("grid").content.cloneNode(true);
     67    grid.querySelector(".item").classList.add(align_self, justify_self);
     68    grid.querySelector(".subgrid").classList.add("vlr");
     69    wrapper.appendChild(grid);
     70  }
     71 }
     72 </script>