tor-browser

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

grid-lanes-align-content-002.html (3513B)


      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 `align-content` in grid-lanes axis (vertical writing mode)</title>
      9  <meta name="assert"
     10        content="Test passes if align-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-align-content-002-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  gap: 1px 2px;
     24  grid-template-columns: repeat(4,20px);
     25  color: #444;
     26  border: 1px solid;
     27  padding: 2px;
     28  width: 100px;
     29  writing-mode: vertical-lr;
     30 }
     31 
     32 item {
     33  background-color: #444;
     34  color: #fff;
     35 }
     36 
     37 .safe {
     38  width: 10px;
     39  margin-right: 50px;
     40 }
     41 
     42 </style>
     43 </head>
     44 <body>
     45 
     46 <grid style="align-content:start">
     47  <item style="padding-right:30px">1</item>
     48  <item>2</item>
     49  <item>3</item>
     50  <item>4</item>
     51  <item>5</item>
     52  <item>6</item>
     53 </grid>
     54 
     55 <grid style="align-content:start">
     56  <item>1</item>
     57  <item style="padding-right:30px">2</item>
     58  <item>3</item>
     59  <item>4</item>
     60  <item>5</item>
     61  <item>6</item>
     62 </grid>
     63 
     64 <grid style="align-content:safe start" class="safe">
     65  <item style="padding-right:30px">1</item>
     66  <item>2</item>
     67  <item>3</item>
     68  <item>4</item>
     69  <item>5</item>
     70  <item>6</item>
     71 </grid>
     72 
     73 <grid style="align-content:end">
     74  <item style="padding-right:30px">1</item>
     75  <item>2</item>
     76  <item>3</item>
     77  <item>4</item>
     78  <item>5</item>
     79  <item>6</item>
     80 </grid>
     81 
     82 <grid style="align-content:end">
     83  <item>1</item>
     84  <item style="padding-right:30px">2</item>
     85  <item>3</item>
     86  <item>4</item>
     87  <item>5</item>
     88  <item>6</item>
     89 </grid>
     90 
     91 <grid style="align-content:safe end" class="safe">
     92  <item style="padding-right:30px">1</item>
     93  <item>2</item>
     94  <item>3</item>
     95  <item>4</item>
     96  <item>5</item>
     97  <item>6</item>
     98 </grid>
     99 
    100 <grid style="align-content:center">
    101  <item style="padding-right:30px">1</item>
    102  <item>2</item>
    103  <item>3</item>
    104  <item>4</item>
    105  <item>5</item>
    106  <item>6</item>
    107 </grid>
    108 
    109 <grid style="align-content:center">
    110  <item>1</item>
    111  <item style="padding-right:30px">2</item>
    112  <item>3</item>
    113  <item>4</item>
    114  <item>5</item>
    115  <item>6</item>
    116 </grid>
    117 
    118 <grid style="align-content:safe center" class="safe">
    119  <item style="padding-right:30px">1</item>
    120  <item>2</item>
    121  <item>3</item>
    122  <item>4</item>
    123  <item>5</item>
    124  <item>6</item>
    125 </grid>
    126 
    127 <grid style="align-content:stretch">
    128  <item style="padding-right:30px">1</item>
    129  <item>2</item>
    130  <item>3</item>
    131  <item>4</item>
    132  <item>5</item>
    133  <item>6</item>
    134 </grid>
    135 
    136 <grid style="align-content:space-between">
    137  <item style="padding-right:30px">1</item>
    138  <item>2</item>
    139  <item>3</item>
    140  <item>4</item>
    141  <item>5</item>
    142  <item>6</item>
    143 </grid>
    144 
    145 <grid style="align-content:space-around">
    146  <item style="padding-right:30px">1</item>
    147  <item>2</item>
    148  <item>3</item>
    149  <item>4</item>
    150  <item>5</item>
    151  <item>6</item>
    152 </grid>
    153 
    154 <grid style="align-content:space-evenly">
    155  <item style="padding-right:30px">1</item>
    156  <item>2</item>
    157  <item>3</item>
    158  <item>4</item>
    159  <item>5</item>
    160  <item>6</item>
    161 </grid>