tor-browser

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

position-absolute-014.html (1941B)

      1 <!doctype html>
      2 <title>abspos flex children with top margins</title>
      3 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.org">
      4 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
      5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
      6 <link rel="bookmark" href="https://crbug.com/808750">
      7 <meta name="flags" content="dom">
      8 
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 
     12 <style>
     13 .container {
     14  display: flex;
     15  background: lightgray;
     16  width: 250px;
     17  height: 48px;
     18 
     19  /* Add some margin so that overflowing things don't stomp on each other: */
     20  margin: 50px 10px;
     21  float: left;
     22  position: relative;
     23 }
     24 
     25 .contentBox {
     26  position: absolute;
     27  /* Margin-box is 100px tall (2px of border + 98px of content): */
     28  border: 1px solid teal;
     29  height: 98px;
     30 
     31  width: 98px;
     32  left: 20px;
     33 }
     34 .marginBox {
     35  position: absolute;
     36  /* Margin-box is 100px tall
     37    (60px of margin-top + 2px of border + 38px of content): */
     38  margin-top: 60px;
     39  border: 1px solid orange;
     40  height: 38px;
     41 
     42  width: 100px;
     43  left: 120px;
     44 }
     45 </style>
     46 <div class="container">
     47  <div class="contentBox">
     48    aaa
     49  </div>
     50  <div class="marginBox">
     51    bbb
     52  </div>
     53 </div>
     54 
     55 <div class="container" style="align-items: flex-end">
     56  <div class="contentBox">
     57    aaa
     58  </div>
     59  <div class="marginBox">
     60    bbb
     61  </div>
     62 </div>
     63 
     64 <div class="container" style="align-items: center">
     65  <div class="contentBox">
     66    aaa
     67  </div>
     68  <div class="marginBox">
     69    bbb
     70  </div>
     71 </div>
     72 <div id=log style="clear:both"></div>
     73 
     74 <script>
     75 test(function() {
     76  var elements = document.querySelectorAll(".contentBox, .marginBox");
     77  for (var i = 0; i < elements.length; i+=2) {
     78    assert_equals(elements[i].getBoundingClientRect().bottom,
     79                  elements[i+1].getBoundingClientRect().bottom);
     80  }
     81 }, "The bottom of each pair of boxes should be the same");
     82 </script>