tor-browser

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

scroll-snap-writing-mode-000-ref.html (4011B)

      1 <!DOCTYPE html>
      2 <title>
      3  CSS Scroll Snap Reference
      4 </title>
      5 
      6 <style>
      7 
      8 .wrapper {
      9  /* lay out in a nice grid */
     10  display: grid;
     11  gap: 0.25em;
     12  grid-template-columns: repeat(6, max-content);
     13 }
     14 
     15 .scroller {
     16  width: 50px;
     17  height: 50px;
     18  border: solid silver;
     19  border-block-start-color: blue;
     20  border-inline-start-color: blue;
     21  position: relative;
     22 }
     23 
     24 .target {
     25  width: 30px;
     26  height: 30px;
     27  background: orange;
     28  top: 0; left: 0; right: 0; bottom: 0;
     29  position: absolute;
     30 }
     31 
     32 .TB  { writing-mode: horizontal-tb; }
     33 .LR  { writing-mode: vertical-lr; }
     34 .RL  { writing-mode: vertical-rl; }
     35 .ltr { direction: ltr; }
     36 .rtl { direction: rtl; }
     37 
     38 /* not absolutizing the border colors, so that the test passes even if css-logical is not supported; */
     39 .large.invert {
     40  border: solid silver;
     41  border-block-end-color: blue;
     42  border-inline-end-color: blue;
     43 }
     44 
     45 .TB.large.invert .target::before { top: auto; }
     46 .LR.large.invert .target::before { left: auto; }
     47 .RL.large.invert .target::before { right: auto; }
     48 
     49 .TB.ltr.large.invert .target::before { left:   auto; }
     50 .TB.rtl.large.invert .target::before { right:  auto; }
     51 .LR.ltr.large.invert .target::before { top:    auto; }
     52 .LR.rtl.large.invert .target::before { bottom: auto; }
     53 .RL.ltr.large.invert .target::before { top:    auto; }
     54 .RL.rtl.large.invert .target::before { bottom: auto; }
     55 
     56 .large.invert .target::before {
     57  width: 9px;
     58  height: 9px;
     59  background: orange;
     60  top: 0; left: 0; right: 0; bottom: 0;
     61  position: absolute;
     62  content: '';
     63 }
     64 
     65 .large.invert .target {
     66  display: block;
     67  background: none;
     68  width: 30px;
     69  height: 30px;
     70  border-block-start: 20px solid red;
     71  border-inline-start: 20px solid red;
     72 }
     73 
     74 </style>
     75 
     76 <p>Test passes if there is an orange square tucked into each blue corner without gaps,
     77 and there is no red, except for the large inverted cases which should have red
     78 in the silver corner and smaller orange boxes in the blue corner.
     79 
     80 <div class="wrapper">
     81 <!-- Simple Small Cases -->
     82 
     83 <div class="scroller TB ltr small">
     84  <div class="target"></div>
     85 </div>
     86 
     87 <div class="scroller LR ltr small">
     88  <div class="target"></div>
     89 </div>
     90 
     91 <div class="scroller RL ltr small">
     92  <div class="target"></div>
     93 </div>
     94 
     95 <div class="scroller TB rtl small">
     96  <div class="target"></div>
     97 </div>
     98 
     99 <div class="scroller LR rtl small">
    100  <div class="target"></div>
    101 </div>
    102 
    103 <div class="scroller RL rtl small">
    104  <div class="target"></div>
    105 </div>
    106 
    107 <!-- Target-inverted Small Cases
    108     This row should be identical to the previous. -->
    109 
    110 <div class="scroller TB ltr small invert">
    111  <div class="target"></div>
    112 </div>
    113 
    114 <div class="scroller LR ltr small invert">
    115  <div class="target"></div>
    116 </div>
    117 
    118 <div class="scroller RL ltr small invert">
    119  <div class="target"></div>
    120 </div>
    121 
    122 <div class="scroller TB rtl small invert">
    123  <div class="target"></div>
    124 </div>
    125 
    126 <div class="scroller LR rtl small invert">
    127  <div class="target"></div>
    128 </div>
    129 
    130 <div class="scroller RL rtl small invert">
    131  <div class="target"></div>
    132 </div>
    133 
    134 <!-- Simple Large Cases -->
    135 
    136 <div class="scroller TB ltr large">
    137  <div class="target"></div>
    138 </div>
    139 
    140 <div class="scroller LR ltr large">
    141  <div class="target"></div>
    142 </div>
    143 
    144 <div class="scroller RL ltr large">
    145  <div class="target"></div>
    146 </div>
    147 
    148 <div class="scroller TB rtl large">
    149  <div class="target"></div>
    150 </div>
    151 
    152 <div class="scroller LR rtl large">
    153  <div class="target"></div>
    154 </div>
    155 
    156 <div class="scroller RL rtl large">
    157  <div class="target"></div>
    158 </div>
    159 
    160 <!-- Target-inverted Large Cases
    161     This is the fun one. -->
    162 
    163 <div class="scroller TB ltr large invert">
    164  <div class="target"></div>
    165 </div>
    166 
    167 <div class="scroller LR ltr large invert">
    168  <div class="target"></div>
    169 </div>
    170 
    171 <div class="scroller RL ltr large invert">
    172  <div class="target"></div>
    173 </div>
    174 
    175 <div class="scroller TB rtl large invert">
    176  <div class="target"></div>
    177 </div>
    178 
    179 <div class="scroller LR rtl large invert">
    180  <div class="target"></div>
    181 </div>
    182 
    183 <div class="scroller RL rtl large invert">
    184  <div class="target"></div>
    185 </div>
    186 
    187 </div> <!-- wrapper -->