tor-browser

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

adjoining-float-nested-forced-clearance-002.html (2270B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
      3 <link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
      4 <style>
      5 #container {
      6  width: 100px;
      7  background: green;
      8 }
      9 #left {
     10  float: left;
     11  width: 25px;
     12  height: 10px;
     13 }
     14 #right {
     15  float: right;
     16  width: 25px;
     17  height: 20px;
     18 }
     19 #clears-left {
     20  clear: left;
     21 }
     22 #zero {
     23  margin-bottom: 40px;
     24  margin-top: -20px;
     25 }
     26 #nested-float {
     27  float: left;
     28  width: 25px;
     29  height: 20px;
     30 }
     31 #new-formatting-context {
     32  overflow: hidden;
     33  width: 60px;
     34  height: 80px;
     35  margin-top: -30px;
     36 }
     37 </style>
     38 <p>Test passes if there is a filled green square.</p>
     39 <div id=container>
     40  <div id=left></div>
     41  <div id=right></div>
     42  <div>
     43    <div id=clears-left>
     44      <div>
     45        <div id=zero></div>
     46        <div id=nested-float></div>
     47        <!--
     48          The margins up to this new formatting context are chosen to hit an
     49          edge condition. At this point there are two possible margins:
     50           - (adjoining) {-30px, 40px} => 10px
     51           - (non-adjoining) {-20px, 40px} => 20px
     52 
     53          The logic for placing this new formatting context however shouldn't
     54          check these margins, as there is an ancestor ("clears-left") which
     55          has clearance past adjoining floats ("left", and "right").
     56 
     57          And "nested-float" should get placed at "10px".
     58 
     59          However if we didn't have this logic the following would occur.
     60           1. We'd try and place the formatting context using the "adjoining"
     61              margins.
     62           2. The new formatting context doesn't "fit" on the same edge as the
     63              floats, so it would trigger a retry using with a new position
     64              calculated using the "non-adjoining" margins.
     65           3. During the next pass, it still doesn't think the margins have
     66              been separated yet as the parent is still using the position
     67              calculated by the forced clearance from above.
     68           4. It will trigger a retry again (and if an implementation does this
     69              in a loop, will timeout).
     70        -->
     71        <div id=new-formatting-context></div>
     72      </div>
     73    </div>
     74  </div>
     75 </div>