tor-browser

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

flex-flow-013.html (6881B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>CSS Flexbox Test: flex-flow - column column-reverse and row-reverse</title>
      4 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
      5 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-flow">
      6 <meta name="assert" content="Test ensures that setting 'flex-flow' property to either 'column',
      7 'column-reverse' or 'row-reverse' in combination with different 'direction' and 'writing-mode'
      8 values works properly.">
      9 <style>
     10 body {
     11    margin: 0;
     12 }
     13 .flexbox {
     14    width: 600px;
     15    display: flex;
     16    background-color: grey;
     17 }
     18 .flexbox > div {
     19    height: 20px;
     20    width: 20px;
     21    border: 0;
     22 }
     23 
     24 .rtl {
     25    direction: rtl;
     26 }
     27 
     28 .vertical-rl, .vertical-lr, .column, .column-reverse {
     29    height: 600px;
     30 }
     31 
     32 .vertical-rl {
     33    writing-mode: vertical-rl;
     34 }
     35 
     36 .vertical-lr {
     37    writing-mode: vertical-lr;
     38 }
     39 
     40 .row-reverse {
     41    flex-flow: row-reverse;
     42 }
     43 
     44 .column {
     45    flex-flow: column;
     46 }
     47 
     48 .column-reverse {
     49    flex-flow: column-reverse;
     50 }
     51 
     52 .flexbox > .first {
     53    background-color: blue;
     54 }
     55 .flexbox > .second {
     56    background-color: green;
     57 }
     58 .flexbox > .third {
     59    background-color: red;
     60 }
     61 
     62 .flexbox > div > div {
     63    background-color: orange;
     64    height: 10px;
     65 }
     66 </style>
     67 <script src="/resources/testharness.js"></script>
     68 <script src="/resources/testharnessreport.js"></script>
     69 <script src="/resources/check-layout-th.js"></script>
     70 <body onload="checkLayout('.flexbox')">
     71 <div id=log></div>
     72 
     73 <div class="flexbox">
     74  <div class="first" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div>
     75  <div class="second" data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="275"></div></div>
     76  <div class="third" data-expected-width="75" data-offset-x="425" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
     77 </div>
     78 
     79 <div class="flexbox rtl">
     80  <div class="first" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
     81  <div class="second" data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="175"></div></div>
     82  <div class="third" data-expected-width="75" data-offset-x="100" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
     83 </div>
     84 
     85 <div class="flexbox row-reverse">
     86  <div class="first" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin: 0 auto;"></div>
     87  <div class="second" data-expected-width="350" data-offset-x="175" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="375"></div></div>
     88  <div class="third" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
     89 </div>
     90 
     91 <div class="flexbox rtl row-reverse">
     92  <div class="first" data-expected-width="75" data-offset-x="0" style="flex: 1 0 0; margin: 0 auto;"></div>
     93  <div class="second" data-expected-width="350" data-offset-x="75" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-x="75"></div></div>
     94  <div class="third" data-expected-width="75" data-offset-x="525" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
     95 </div>
     96 
     97 <div style="position: relative;">
     98 <div class="flexbox column">
     99  <div class="first" data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div>
    100  <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
    101  <div class="third" data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
    102 </div>
    103 </div>
    104 
    105 <div style="position: relative;">
    106 <div class="flexbox column-reverse">
    107  <div class="first" data-expected-height="150" data-offset-y="450" style="flex: 1 0 0; margin: auto 200px auto 150px;"></div>
    108  <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="200"></div></div>
    109  <div class="third" data-expected-height="150" data-offset-y="0" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
    110 </div>
    111 </div>
    112 
    113 <div style="position: relative;">
    114 <div class="flexbox column rtl">
    115  <div class="first" data-expected-height="150" data-offset-y="0" data-offset-x="480" style="flex: 1 0 0; margin: auto 100px auto 50px;"></div>
    116  <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
    117  <div class="third" data-expected-height="150" data-offset-y="450" data-offset-x="580" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
    118 </div>
    119 </div>
    120 
    121 <div style="position: relative;">
    122 <div class="flexbox column-reverse rtl">
    123  <div class="first" data-expected-height="150" data-offset-y="450" data-offset-x="480" style="flex: 1 0 0; margin: auto 100px auto 50px;"></div>
    124  <div class="second" data-expected-height="300" data-offset-y="150" style="flex: 2 0 0; padding-inline-start: 200px"><div data-offset-y="150" data-offset-x="380"></div></div>
    125  <div class="third" data-expected-height="150" data-offset-y="0" data-offset-x="580" style="flex: 1 0 0; margin-inline-end: 100px;"></div>
    126 </div>
    127 </div>
    128 
    129 <div style="position: relative;">
    130 <div data-expected-height="600" class="flexbox vertical-lr column">
    131  <div class="first" data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width: 300px"></div>
    132  <div class="second" data-offset-x="500" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
    133 </div>
    134 </div>
    135 
    136 <div style="position: relative;">
    137 <div data-expected-height="600" class="flexbox vertical-lr column-reverse">
    138  <div class="first" data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-width: 300px"></div>
    139  <div class="second" data-offset-x="0" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
    140 </div>
    141 </div>
    142 
    143 <div style="position: relative;">
    144 <div data-expected-height="600" class="flexbox vertical-rl column">
    145  <div class="first" data-offset-x="100" data-expected-width="500" style="flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div>
    146  <div class="second" data-offset-x="0" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
    147 </div>
    148 </div>
    149 
    150 <div style="position: relative;">
    151 <div data-expected-height="600" class="flexbox vertical-rl column-reverse">
    152  <div class="first" data-offset-x="0" data-expected-width="500" style="flex: 1 0 0; min-width: 300px; margin-bottom: 100px"></div>
    153  <div class="second" data-offset-x="500" data-offset-y="100" data-expected-width="100" style="flex: 1 0 200px; max-width: 100px; margin: 100px 0 50px 0;"></div>
    154 </div>
    155 </div>
    156 
    157 </body>
    158 </html>