tor-browser

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

grid-lanes-justify-content-004.html (3475B)


      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html><head>
      7  <meta charset="utf-8">
      8  <title>CSS Grid Test: Grid Lanes layout with `justify-content` in grid-lanes axis (vertical writing mode)</title>
      9  <meta name="assert"
     10        content="Test passes if justify-content shifts content
     11                 in the grid-lanes axis of a vertical writing-mode grid-lanes grid container.">
     12  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
     13  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
     14  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
     15  <link rel="match" href="grid-lanes-justify-content-004-ref.html">
     16  <style>
     17 html,body {
     18  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
     19 }
     20 
     21 grid {
     22  display: inline-grid-lanes;
     23  grid-lanes-direction: row;
     24  gap: 1px 2px;
     25  grid-template-rows: repeat(4,20px);
     26  background: content-box silver;
     27  border: 1px solid;
     28  padding: 0 3px 2px 0;
     29  width: 100px;
     30  height: 120px;
     31  align-content: center;
     32  writing-mode: vertical-rl;
     33 }
     34 
     35 item {
     36  background-color: #444;
     37  color: #fff;
     38 }
     39 
     40 .tall { padding: 11px 3px 13px 7px; }
     41 
     42 .safe {
     43  height: 10px;
     44 }
     45 </style>
     46 </head>
     47 <body>
     48 
     49 <grid style="justify-content:start">
     50  <item class="tall">1</item>
     51  <item>2</item>
     52  <item>3</item>
     53  <item>4</item>
     54  <item>5</item>
     55  <item>6</item>
     56 </grid>
     57 
     58 <grid style="justify-content:start">
     59  <item>1</item>
     60  <item class="tall">2</item>
     61  <item>3</item>
     62  <item>4</item>
     63  <item>5</item>
     64  <item>6</item>
     65 </grid>
     66 
     67 <grid style="justify-content:safe start" class="safe">
     68  <item class="tall">1</item>
     69  <item>2</item>
     70  <item>3</item>
     71  <item>4</item>
     72  <item>5</item>
     73  <item>6</item>
     74 </grid>
     75 
     76 <grid style="justify-content:end">
     77  <item class="tall">1</item>
     78  <item>2</item>
     79  <item>3</item>
     80  <item>4</item>
     81  <item>5</item>
     82  <item>6</item>
     83 </grid>
     84 
     85 <grid style="justify-content:end">
     86  <item>1</item>
     87  <item class="tall">2</item>
     88  <item>3</item>
     89  <item>4</item>
     90  <item>5</item>
     91  <item>6</item>
     92 </grid>
     93 
     94 <grid style="justify-content:safe end" class="safe">
     95  <item class="tall">1</item>
     96  <item>2</item>
     97  <item>3</item>
     98  <item>4</item>
     99  <item>5</item>
    100  <item>6</item>
    101 </grid>
    102 
    103 <grid style="justify-content:center">
    104  <item class="tall">1</item>
    105  <item>2</item>
    106  <item>3</item>
    107  <item>4</item>
    108  <item>5</item>
    109  <item>6</item>
    110 </grid>
    111 
    112 <grid style="justify-content:center">
    113  <item>1</item>
    114  <item class="tall">2</item>
    115  <item>3</item>
    116  <item>4</item>
    117  <item>5</item>
    118  <item>6</item>
    119 </grid>
    120 
    121 <grid style="justify-content:safe center" class="safe">
    122  <item class="tall">1</item>
    123  <item>2</item>
    124  <item>3</item>
    125  <item>4</item>
    126  <item>5</item>
    127  <item>6</item>
    128 </grid>
    129 
    130 <grid style="justify-content:stretch">
    131  <item class="tall">1</item>
    132  <item>2</item>
    133  <item>3</item>
    134  <item>4</item>
    135  <item>5</item>
    136  <item>6</item>
    137 </grid>
    138 
    139 <grid style="justify-content:space-between">
    140  <item class="tall">1</item>
    141  <item>2</item>
    142  <item>3</item>
    143  <item>4</item>
    144  <item>5</item>
    145  <item>6</item>
    146 </grid>
    147 
    148 <grid style="justify-content:space-around">
    149  <item class="tall">1</item>
    150  <item>2</item>
    151  <item>3</item>
    152  <item>4</item>
    153  <item>5</item>
    154  <item>6</item>
    155 </grid>
    156 
    157 <grid style="justify-content:space-evenly">
    158  <item class="tall">1</item>
    159  <item>2</item>
    160  <item>3</item>
    161  <item>4</item>
    162  <item>5</item>
    163  <item>6</item>
    164 </grid>