tor-browser

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

flexbox-items-as-stacking-contexts-002-ref.html (1745B)

      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  <style>
     11    body { font: 10px sans-serif }
     12    .flexContainer {
     13      background: orange;
     14      width: 70px;
     15      padding: 2px;
     16      margin-bottom: 2px;
     17    }
     18 
     19    .flexContainer > div:first-child {
     20      margin-right: 10px; /* the space between the flex items, in testcase */
     21    }
     22 
     23    .item1 {
     24      display: inline-block;
     25      background: lightblue;
     26      width: 30px;
     27    }
     28    .item2 {
     29      display: inline-block;
     30      background: yellow;
     31      width: 30px;
     32    }
     33  </style>
     34 </head>
     35 <body>
     36  <div class="flexContainer"
     37    ><div class="item1">ThisIsALongUnbrokenString</div
     38    ><div class="item2">HereIsSomeMoreLongText</div
     39  ></div>
     40 
     41  <div class="flexContainer"
     42    ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div
     43    ><div class="item2">HereIsSomeMoreLongText</div
     44  ></div>
     45 
     46  <div class="flexContainer"
     47    ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div
     48    ><div class="item2">HereIsSomeMoreLongText</div
     49  ></div>
     50 
     51  <div class="flexContainer"
     52    ><div class="item2">HereIsSomeMoreLongText</div
     53    ><div class="item1">ThisIsALongUnbrokenString</div
     54  ></div>
     55 
     56  <div class="flexContainer"
     57    ><div class="item2">HereIsSomeMoreLongText</div
     58    ><div class="item1">ThisIsALongUnbrokenString</div
     59  ></div>
     60 
     61  <div class="flexContainer"
     62    ><div class="item2" style="position:relative">HereIsSomeMoreLongText</div
     63    ><div class="item1">ThisIsALongUnbrokenString</div
     64  ></div>
     65 </body>
     66 </html>