shrink-to-avoid-float-complexity.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">


 
  <style type="text/css">
  div.container
  {
  background-color: silver; 
  /* height: 200px; */
  margin: 0em 0em;
  overflow: hidden;
  width: 100%;
  font-size: 14px;
  }

  div.float
  {
  background-color: yellow;
  border: green solid 4px;
  float: left;
  height: 80px;
  padding: 4px;
  width: 100px;
  }
  
  /*

  offsetHeight of div.float
  -------------------------
  
      4px (border-top)
  +
      4px (padding-top)
  +    
     80px (height)
  +
      4px (padding-bottom)
  +
      4px (border-bottom)
   =======
     96px


  offsetWidth of div.float
  ------------------------
  
      4px (border-left)
  +
      4px (padding-left)
  +    
    100px (width)
  +
      4px (padding-right)
  +
      4px (border-right)
   =======
    116px

  */

  div.overflow
  {
  background-color: orange; 
  /* height: 200px; */
  overflow: hidden;
  }
  
  li.correct
  {
  color: green;
  font-weight: bolder;
  }  

  li.incorrect
  {
  color: red;
  font-weight: bolder;
  }

  h2 {
  margin: 0;
  }
  </style>

 </head>

 <body style="columns: 2">

 
  <!--
  non-positioned block boxes created before and after the float box 
  flow vertically as if the float did not exist.
  http://www.w3.org/TR/CSS21/visuren.html#floats
  
  The border box of (...) an element in the normal flow that 
  establishes a new block formatting context (such as an element with 
  'overflow' other than 'visible') must not overlap the margin box of 
  any floats in the same block formatting context as the element itself.
  http://www.w3.org/TR/CSS21/visuren.html#floats
  -->

  <h2 id="test1">Test 1 (1 float)</h2>

  <div class="container">
    <div class="float">This yellow square is floated left and it has no margin.</div>
    <div style="margin: 0px 50px" class="overflow">This orange rectangle:<br>
        – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
        – has a 50px left margin and a 50px right margin;
    </div>
  </div><!-- .container -->


  <hr>

  <h2 id="test2">Test 2 (1 float)</h2>

  <div class="container">
    <div class="float">This yellow square is floated left and it has no margin.</div>
    <div style="margin-left: 116px;" class="overflow">This orange rectangle:<br>
        – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
        – has a 116px left margin;
    </div>
  </div><!-- .container -->


  <hr>

  <h2 id="test3">Test 3 (1 float)</h2>

  <div class="container">
    <div style="margin-right: 50px;" class="float">This yellow square is a floated left and it has a right margin of 50px.</div>

    <div style="margin-right: 50px;" class="overflow">This orange rectangle:<br>
        – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
        – has a 0px left margin and a 50px right margin;
    </div>
  </div><!-- .container -->

 
  <hr>

  <div style="break-inside: avoid">
  <h2 id="test4">Test 4 (2 floats)</h2>

  <div class="container">
    <div class="float">This yellow square is floated left and it has no margin.</div>
    <div style="float: right;" class="float">This yellow square is a floated right and it has no margin.</div>
    <div style="margin: 0px 50px;" class="overflow">This orange rectangle:<br>
        – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
        – has a 50px left margin and a 50px right margin;
    </div>
  </div><!-- .container -->
  <hr>
  </div>

  <h2 id="test5">Test 5 (2 floats)</h2>

  <div class="container">
    <div class="float">This yellow square is floated left and it has no margin.</div>
    <div style="float: right;" class="float">This yellow square is a floated right and it has no margin.</div>
    <div style="margin-right: 100px;" class="overflow">This orange rectangle:<br>
        – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
        – has a 100px right margin;
    </div>
  </div><!-- .container -->

 
  <hr>

  <h2 id="test6">Test 6 (2 floats)</h2>

  <div class="container">
    <div style="margin-right: 20px;" class="float">This yellow square is floated left and it has a right margin of 20px.</div>
    <div style="float: right; margin-left: 20px;" class="float">This yellow square is floated right and it has a left margin of 20px.</div>
    <div class="overflow">This orange rectangle:<br>
        – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
        – has a 0px left margin and a 0px right margin;
    </div>
  </div><!-- .container -->

  <!--
  non-positioned block boxes created before and after the float box 
  flow vertically as if the float did not exist.
  http://www.w3.org/TR/CSS21/visuren.html#floats  
  
  The border box of (...) an element in the normal flow that 
  establishes a new block formatting context (such as an element with 
  'overflow' other than 'visible') must not overlap the margin box of 
  any floats in the same block formatting context as the element itself.
  http://www.w3.org/TR/CSS21/visuren.html#floats
  -->

 

 </body>
</html>
chromium/third_party/blink/web_tests/fast/block/float/shrink-to-avoid-float-complexity.html
