tor-browser

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

test_flex_axis_directions.html (6151B)

      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
      7 <style>
      8  f {
      9    display: flex;
     10    width: 400px;
     11    height: 50px;
     12    margin-bottom: 2px;
     13  }
     14 
     15  b {
     16    background-color: gold;
     17    width: 100px;
     18    height: 15px;
     19  }
     20  b::after {
     21    content: "B";
     22  }
     23 
     24  c {
     25    background-color: yellow;
     26    width: 100px;
     27    height: 15px;
     28  }
     29  c::after {
     30    content: "C";
     31  }
     32 
     33  d {
     34    background-color: orange;
     35    width: 100px;
     36    height: 15px;
     37  }
     38  d::after {
     39    content: "D";
     40  }
     41 
     42  .fdR {
     43    flex-direction: row;
     44    background-color: lightgrey;
     45  }
     46  .fdRR {
     47    flex-direction: row-reverse;
     48    background-color: lightgreen;
     49  }
     50  .fdC {
     51    flex-direction: column;
     52    background-color: lightblue;
     53  }
     54  .fdCR {
     55    flex-direction: column-reverse;
     56    background-color: lavender;
     57  }
     58 
     59  .wmHTB {
     60    writing-mode: horizontal-tb;
     61  }
     62  .wmVLR {
     63    writing-mode: vertical-lr;
     64  }
     65  .wmVRL {
     66    writing-mode: vertical-rl;
     67  }
     68  .wmSLR {
     69    writing-mode: sideways-lr;
     70  }
     71  .wmSRL {
     72    writing-mode: sideways-rl;
     73  }
     74 
     75  .dLR {
     76    direction: ltr;
     77  }
     78  .dRL {
     79    direction: rtl;
     80  }
     81 </style>
     82 
     83 <script>
     84 "use strict";
     85 
     86 SimpleTest.waitForExplicitFinish();
     87 
     88 function testContainerMatchesExpectedValues(flex, values, flexIndex) {
     89  is(flex.mainAxisDirection, values.m, "Flex index " + flexIndex + " should have expected mainAxisDirection.");
     90  is(flex.crossAxisDirection, values.c, "Flex index " + flexIndex + " should have expected crossAxisDirection.");
     91 }
     92 
     93 function runTests() {
     94  const expectedValues = [
     95    { m: "horizontal-lr", c: "vertical-tb" },
     96    { m: "horizontal-rl", c: "vertical-tb" },
     97    { m: "vertical-tb", c: "horizontal-lr" },
     98    { m: "vertical-bt", c: "horizontal-lr" },
     99    { m: "vertical-tb", c: "horizontal-rl" },
    100    { m: "vertical-bt", c: "horizontal-rl" },
    101    { m: "vertical-bt", c: "horizontal-lr" },
    102    { m: "vertical-tb", c: "horizontal-lr" },
    103    { m: "vertical-tb", c: "horizontal-rl" },
    104    { m: "vertical-bt", c: "horizontal-rl" },
    105 
    106    { m: "horizontal-rl", c: "vertical-tb" },
    107    { m: "horizontal-lr", c: "vertical-tb" },
    108    { m: "vertical-bt", c: "horizontal-lr" },
    109    { m: "vertical-tb", c: "horizontal-lr" },
    110    { m: "vertical-bt", c: "horizontal-rl" },
    111    { m: "vertical-tb", c: "horizontal-rl" },
    112    { m: "vertical-tb", c: "horizontal-lr" },
    113    { m: "vertical-bt", c: "horizontal-lr" },
    114    { m: "vertical-bt", c: "horizontal-rl" },
    115    { m: "vertical-tb", c: "horizontal-rl" },
    116 
    117    { m: "vertical-tb", c: "horizontal-lr" },
    118    { m: "vertical-tb", c: "horizontal-rl" },
    119    { m: "horizontal-lr", c: "vertical-tb" },
    120    { m: "horizontal-lr", c: "vertical-bt" },
    121    { m: "horizontal-rl", c: "vertical-tb" },
    122    { m: "horizontal-rl", c: "vertical-bt" },
    123    { m: "horizontal-lr", c: "vertical-bt" },
    124    { m: "horizontal-lr", c: "vertical-tb" },
    125    { m: "horizontal-rl", c: "vertical-tb" },
    126    { m: "horizontal-rl", c: "vertical-bt" },
    127 
    128    { m: "vertical-bt", c: "horizontal-lr" },
    129    { m: "vertical-bt", c: "horizontal-rl" },
    130    { m: "horizontal-rl", c: "vertical-tb" },
    131    { m: "horizontal-rl", c: "vertical-bt" },
    132    { m: "horizontal-lr", c: "vertical-tb" },
    133    { m: "horizontal-lr", c: "vertical-bt" },
    134    { m: "horizontal-rl", c: "vertical-bt" },
    135    { m: "horizontal-rl", c: "vertical-tb" },
    136    { m: "horizontal-lr", c: "vertical-tb" },
    137    { m: "horizontal-lr", c: "vertical-bt" },
    138  ];
    139 
    140  const children = document.body.children;
    141  is(children.length, expectedValues.length, "Document should have expected number of flex containers.");
    142 
    143  for (let i = 0; i < children.length; ++i) {
    144    const flex = children.item(i).getAsFlexContainer();
    145    ok(flex, "Document child index " + i + " should be a flex container.");
    146    if (flex) {
    147      const values = expectedValues[i];
    148      testContainerMatchesExpectedValues(flex, values, i);
    149    }
    150  }
    151 
    152  SimpleTest.finish();
    153 }
    154 </script>
    155 </head>
    156 
    157 <body onLoad="runTests();">
    158 
    159 <f class="fdR wmHTB dLR"><b></b><c></c><d></d></f>
    160 <f class="fdR wmHTB dRL"><b></b><c></c><d></d></f>
    161 <f class="fdR wmVLR dLR"><b></b><c></c><d></d></f>
    162 <f class="fdR wmVLR dRL"><b></b><c></c><d></d></f>
    163 <f class="fdR wmVRL dLR"><b></b><c></c><d></d></f>
    164 <f class="fdR wmVRL dRL"><b></b><c></c><d></d></f>
    165 <f class="fdR wmSLR dLR"><b></b><c></c><d></d></f>
    166 <f class="fdR wmSLR dRL"><b></b><c></c><d></d></f>
    167 <f class="fdR wmSRL dLR"><b></b><c></c><d></d></f>
    168 <f class="fdR wmSRL dRL"><b></b><c></c><d></d></f>
    169 
    170 <f class="fdRR wmHTB dLR"><b></b><c></c><d></d></f>
    171 <f class="fdRR wmHTB dRL"><b></b><c></c><d></d></f>
    172 <f class="fdRR wmVLR dLR"><b></b><c></c><d></d></f>
    173 <f class="fdRR wmVLR dRL"><b></b><c></c><d></d></f>
    174 <f class="fdRR wmVRL dLR"><b></b><c></c><d></d></f>
    175 <f class="fdRR wmVRL dRL"><b></b><c></c><d></d></f>
    176 <f class="fdRR wmSLR dLR"><b></b><c></c><d></d></f>
    177 <f class="fdRR wmSLR dRL"><b></b><c></c><d></d></f>
    178 <f class="fdRR wmSRL dLR"><b></b><c></c><d></d></f>
    179 <f class="fdRR wmSRL dRL"><b></b><c></c><d></d></f>
    180 
    181 <f class="fdC wmHTB dLR"><b></b><c></c><d></d></f>
    182 <f class="fdC wmHTB dRL"><b></b><c></c><d></d></f>
    183 <f class="fdC wmVLR dLR"><b></b><c></c><d></d></f>
    184 <f class="fdC wmVLR dRL"><b></b><c></c><d></d></f>
    185 <f class="fdC wmVRL dLR"><b></b><c></c><d></d></f>
    186 <f class="fdC wmVRL dRL"><b></b><c></c><d></d></f>
    187 <f class="fdC wmSLR dLR"><b></b><c></c><d></d></f>
    188 <f class="fdC wmSLR dRL"><b></b><c></c><d></d></f>
    189 <f class="fdC wmSRL dLR"><b></b><c></c><d></d></f>
    190 <f class="fdC wmSRL dRL"><b></b><c></c><d></d></f>
    191 
    192 <f class="fdCR wmHTB dLR"><b></b><c></c><d></d></f>
    193 <f class="fdCR wmHTB dRL"><b></b><c></c><d></d></f>
    194 <f class="fdCR wmVLR dLR"><b></b><c></c><d></d></f>
    195 <f class="fdCR wmVLR dRL"><b></b><c></c><d></d></f>
    196 <f class="fdCR wmVRL dLR"><b></b><c></c><d></d></f>
    197 <f class="fdCR wmVRL dRL"><b></b><c></c><d></d></f>
    198 <f class="fdCR wmSLR dLR"><b></b><c></c><d></d></f>
    199 <f class="fdCR wmSLR dRL"><b></b><c></c><d></d></f>
    200 <f class="fdCR wmSRL dLR"><b></b><c></c><d></d></f>
    201 <f class="fdCR wmSRL dRL"><b></b><c></c><d></d></f>
    202 
    203 </body>
    204 </html>