tor-browser

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

flexbox-break-request-horiz-001-ref.html (3030B)

      1 <!DOCTYPE html>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html>
      7 <head>
      8  <title>CSS Reftest Reference</title>
      9  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     10  <meta charset="utf-8">
     11  <style>
     12    div.flexbox {
     13      border: 1px dashed black;
     14      width: 60px;
     15      height: 20px;
     16      margin: 2px;
     17      float: left;
     18    }
     19    div.item {
     20      width: 28px;
     21      border: 1px solid blue;
     22      background: lightblue;
     23    }
     24    div.fullCrossSize {
     25      height: 18px;
     26    }
     27    div.halfCrossSize {
     28      height: 8px;
     29    }
     30  </style>
     31 </head>
     32 <body>
     33  <div class="flexbox">
     34    <div class="item fullCrossSize"></div>
     35  </div>
     36  <div class="flexbox">
     37    <div class="item fullCrossSize"></div>
     38  </div>
     39  <div class="flexbox">
     40    <div class="item fullCrossSize"></div>
     41  </div>
     42  <div class="flexbox">
     43    <div class="item fullCrossSize"></div>
     44  </div>
     45  <div class="flexbox">
     46    <div class="item fullCrossSize"></div>
     47  </div>
     48  <div style="clear: both"></div>
     49 
     50  <div class="flexbox">
     51    <div class="item fullCrossSize" style="float: left"></div>
     52    <div class="item fullCrossSize" style="float: left"></div>
     53  </div>
     54  <div class="flexbox">
     55    <div class="item fullCrossSize" style="float: left"></div>
     56    <div class="item fullCrossSize" style="float: left"></div>
     57  </div>
     58  <div class="flexbox">
     59    <div class="item fullCrossSize" style="float: left"></div>
     60    <div class="item fullCrossSize" style="float: left"></div>
     61  </div>
     62  <div class="flexbox">
     63    <div class="item fullCrossSize" style="float: left"></div>
     64    <div class="item fullCrossSize" style="float: left"></div>
     65  </div>
     66  <div class="flexbox">
     67    <div class="item fullCrossSize" style="float: left"></div>
     68    <div class="item fullCrossSize" style="float: left"></div>
     69  </div>
     70  <div style="clear: both"></div>
     71 
     72  <div class="flexbox">
     73    <div class="item halfCrossSize" style="float: left"></div>
     74    <div class="item halfCrossSize" style="float: left"></div>
     75    <div class="item halfCrossSize" style="float: left"></div>
     76  </div>
     77  <div class="flexbox">
     78    <div class="item halfCrossSize" style="float: left"></div>
     79    <div class="item halfCrossSize" style="float: left"></div>
     80    <div class="item halfCrossSize" style="float: left"></div>
     81  </div>
     82  <div class="flexbox">
     83    <div class="item halfCrossSize" style="float: left"></div>
     84    <div class="item halfCrossSize" style="float: left"></div>
     85    <div class="item halfCrossSize" style="float: left"></div>
     86  </div>
     87  <div class="flexbox">
     88    <div class="item halfCrossSize" style="float: left"></div>
     89    <div class="item halfCrossSize" style="float: left"></div>
     90    <div class="item halfCrossSize" style="float: left"></div>
     91  </div>
     92  <div class="flexbox">
     93    <div class="item halfCrossSize" style="float: left"></div>
     94    <div class="item halfCrossSize" style="float: left"></div>
     95    <div class="item halfCrossSize" style="float: left"></div>
     96  </div>
     97 </body>
     98 </html>