tor-browser

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

start-edge-in-block-layout-direction.html (4095B)

      1 <!DOCTYPE html>
      2 <meta name="viewport" content="user-scalable=no"/>
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <style>
      6 
      7 body { margin: 0; }
      8 html {
      9  line-height: 0;
     10  width: 200vw;
     11  height: 200vh;
     12 }
     13 
     14 html.ltr { direction: ltr; }
     15 html.rtl { direction: rtl; }
     16 
     17 html.horz { writing-mode: horizontal-tb; }
     18 html.vlr { writing-mode: vertical-lr; }
     19 html.vrl { writing-mode: vertical-rl; }
     20 html.slr { writing-mode: sideways-lr; }
     21 html.srl { writing-mode: sideways-rl; }
     22 
     23 .horz.ltr .cx2, .vlr .cx2 { left: 100vw; }
     24 .horz.rtl .cx2, .vrl .cx2 { right: 100vw; }
     25 .horz .cy2, .ltr .cy2 { top: 100vh; }
     26 .vlr.rtl .cy2, .vrl.rtl .cy2 { bottom: 100vh; }
     27 
     28 #block_pusher, #inline_pusher {
     29  display: inline-block;
     30  width: 100px;
     31  height: 100px;
     32 }
     33 #block_pusher { background-color: #e88; }
     34 #inline_pusher { background-color: #88e; }
     35 .vpush { height: 80px !important; }
     36 .hpush { width: 70px !important; }
     37 
     38 #anchor-container {
     39  display: inline-block;
     40 }
     41 #anchor {
     42  position: relative;
     43  background-color: #8e8;
     44  min-width: 100px;
     45  min-height: 100px;
     46 }
     47 
     48 #grower { width: 0; height: 0; }
     49 .grow {
     50  width: 180px !important;
     51  height: 160px !important;
     52 }
     53 
     54 </style>
     55 <div id="container">
     56  <div id="block_pusher"></div><br>
     57  <div id="inline_pusher"></div><div id="anchor-container">
     58    <div id="anchor">
     59      <div id="grower"></div>
     60    </div>
     61  </div>
     62 </div>
     63 <script>
     64 
     65 // Tests that anchoring adjustments are only on the block layout axis and that
     66 // their magnitude is based on the movement of the block start edge of the
     67 // anchor node, for all 6 combinations of text direction and writing mode,
     68 // regardless of which corner of the viewport the anchor node overlaps.
     69 
     70 var CORNERS = ["cx1 cy1", "cx2 cy1", "cx1 cy2", "cx2 cy2"];
     71 var docEl = document.documentElement;
     72 var scroller = document.scrollingElement;
     73 var blockPusher = document.querySelector("#block_pusher");
     74 var inlinePusher = document.querySelector("#inline_pusher");
     75 var grower = document.querySelector("#grower");
     76 var anchor = document.querySelector("#anchor");
     77 
     78 function reset() {
     79  scroller.scrollLeft = 0;
     80  scroller.scrollTop = 0;
     81  blockPusher.className = "";
     82  inlinePusher.className = "";
     83  grower.className = "";
     84 }
     85 
     86 function runCase(docClass, xDir, yDir, vert, expectXAdj, expectYAdj, corner) {
     87  docEl.className = docClass;
     88  anchor.className = corner;
     89 
     90  var initX = 150 * xDir;
     91  var initY = 150 * yDir;
     92 
     93  scroller.scrollLeft = initX;
     94  scroller.scrollTop = initY;
     95 
     96  // Each corner moves a different distance.
     97  block_pusher.className = vert ? "hpush" : "vpush";
     98  inline_pusher.className = vert ? "vpush" : "hpush";
     99  grower.className = "grow";
    100 
    101  assert_equals(scroller.scrollLeft, initX + expectXAdj);
    102  assert_equals(scroller.scrollTop, initY + expectYAdj);
    103 
    104  reset();
    105 }
    106 
    107 test(() => {
    108  CORNERS.forEach((corner) => {
    109    runCase("horz ltr", 1, 1, false, 0, -20, corner);
    110  });
    111 }, "Horizontal LTR.");
    112 
    113 test(() => {
    114  CORNERS.forEach((corner) => {
    115    runCase("horz rtl", -1, 1, false, 0, -20, corner);
    116  });
    117 }, "Horizontal RTL.");
    118 
    119 test(() => {
    120  CORNERS.forEach((corner) => {
    121    runCase("vlr ltr", 1, 1, true, -30, 0, corner);
    122  });
    123 }, "Vertical-LR LTR.");
    124 
    125 test(() => {
    126  CORNERS.forEach((corner) => {
    127    runCase("vlr rtl", 1, -1, true, -30, 0, corner);
    128  });
    129 }, "Vertical-LR RTL.");
    130 
    131 test(() => {
    132  CORNERS.forEach((corner) => {
    133    runCase("vrl ltr", -1, 1, true, 30, 0, corner);
    134  });
    135 }, "Vertical-RL LTR.");
    136 
    137 test(() => {
    138  CORNERS.forEach((corner) => {
    139    runCase("vrl rtl", -1, -1, true, 30, 0, corner);
    140  });
    141 }, "Vertical-RL RTL.");
    142 
    143 test(() => {
    144  CORNERS.forEach((corner) => {
    145    runCase("slr ltr", 1, -1, true, -30, 0, corner);
    146  });
    147 }, "Sideways-LR LTR.");
    148 
    149 test(() => {
    150  CORNERS.forEach((corner) => {
    151    runCase("slr rtl", 1, 1, true, -30, 0, corner);
    152  });
    153 }, "Sideways-LR RTL.");
    154 
    155 test(() => {
    156  CORNERS.forEach((corner) => {
    157    runCase("srl ltr", -1, 1, true, 30, 0, corner);
    158  });
    159 }, "Sideways-RL LTR.");
    160 
    161 test(() => {
    162  CORNERS.forEach((corner) => {
    163    runCase("srl rtl", -1, -1, true, 30, 0, corner);
    164  });
    165 }, "Sideways-RL RTL.");
    166 
    167 </script>