third_party/WebKit/LayoutTests/fast/block/float/shrink-to-avoid-float-complexity.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2
   3 <html>
   4
   5  <head>
   6  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   7
   8
   9
  10   <style type="text/css">
  11   div.container
  12   {
  13   background-color: silver;
  14   /* height: 200px; */
  15   margin: 1em 0em;
  16   overflow: hidden;
  17   width: 100%;
  18   }
  19
  20   div.float
  21   {
  22   background-color: yellow;
  23   border: green solid 4px;
  24   float: left;
  25   height: 128px;
  26   padding: 2em;
  27   width: 128px;
  28   }
  29
  30   /*
  31
  32   offsetHeight of div.float
  33   -------------------------
  34
  35       4px (border-top)
  36   +
  37      32px (padding-top)
  38   +
  39     128px (height)
  40   +
  41      32px (padding-bottom)
  42   +
  43       4px (border-bottom)
  44    =======
  45     200px
  46
  47
  48   offsetWidth of div.float
  49   ------------------------
  50
  51       4px (border-left)
  52   +
  53      32px (padding-left)
  54   +
  55     128px (width)
  56   +
  57      32px (padding-right)
  58   +
  59       4px (border-right)
  60    =======
  61     200px
  62
  63   */
  64
  65   div.overflow
  66   {
  67   background-color: orange;
  68   /* height: 200px; */
  69   overflow: hidden;
  70   }
  71
  72   li.correct
  73   {
  74   color: green;
  75   font-weight: bolder;
  76   }
  77
  78   li.incorrect
  79   {
  80   color: red;
  81   font-weight: bolder;
  82   }
  83
  84   hr {margin: 3em;}
  85   </style>
  86
  87  </head>
  88
  89  <body>
  90
  91
  92   <!--
  93   non-positioned block boxes created before and after the float box
  94   flow vertically as if the float did not exist.
  95   http://www.w3.org/TR/CSS21/visuren.html#floats
  96
  97   The border box of (...) an element in the normal flow that
  98   establishes a new block formatting context (such as an element with
  99   'overflow' other than 'visible') must not overlap the margin box of
 100   any floats in the same block formatting context as the element itself.
 101   http://www.w3.org/TR/CSS21/visuren.html#floats
 102   -->
 103
 104   <h2 id="test1">Test 1 (1 float)</h2>
 105
 106   <div class="container">
 107     <div class="float">This yellow square is floated left and it has no margin.</div>
 108     <div style="margin: 0px 100px" class="overflow">This orange rectangle:<br>
 109         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 110         – has a 100px left margin and a 100px right margin;<br><br>
 111         This orange rectangle:<br>
 112         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 113         – has a 100px left margin and a 100px right margin;
 114     </div>
 115   </div><!-- .container -->
 116
 117
 118   <hr>
 119
 120   <h2 id="test2">Test 2 (1 float)</h2>
 121
 122   <div class="container">
 123     <div class="float">This yellow square is floated left and it has no margin.</div>
 124     <div style="margin-left: 200px;" class="overflow">This orange rectangle:<br>
 125         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 126         – has a 200px left margin;<br><br>
 127         This orange rectangle:<br>
 128         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 129         – has a 200px left margin;
 130     </div>
 131   </div><!-- .container -->
 132
 133
 134   <hr>
 135
 136   <h2 id="test3">Test 3 (1 float)</h2>
 137
 138   <div class="container">
 139     <div style="margin-right: 100px;" class="float">This yellow square is a floated left and it has a right margin of 100px.</div>
 140
 141     <div style="margin-right: 100px;" class="overflow">This orange rectangle:<br>
 142         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 143         – has a 0px left margin and a 100px right margin;<br><br>
 144         This orange rectangle:<br>
 145         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 146         – has a 0px left margin and a 100px right margin;
 147     </div>
 148   </div><!-- .container -->
 149
 150
 151   <hr>
 152
 153   <h2 id="test4">Test 4 (2 floats)</h2>
 154
 155   <div class="container">
 156     <div class="float">This yellow square is floated left and it has no margin.</div>
 157     <div style="float: right;" class="float">This yellow square is a floated right and it has no margin.</div>
 158     <div style="margin: 0px 100px;" class="overflow">This orange rectangle:<br>
 159         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 160         – has a 100px left margin and a 100px right margin;<br><br>
 161         This orange rectangle:<br>
 162         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 163         – has a 100px left margin and a 100px right margin;
 164     </div>
 165   </div><!-- .container -->
 166   <hr>
 167
 168   <h2 id="test5">Test 5 (2 floats)</h2>
 169
 170   <div class="container">
 171     <div class="float">This yellow square is floated left and it has no margin.</div>
 172     <div style="float: right;" class="float">This yellow square is a floated right and it has no margin.</div>
 173     <div style="margin-right: 200px;" class="overflow">This orange rectangle:<br>
 174         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 175         – has a 200px right margin;<br><br>
 176         This orange rectangle:<br>
 177         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 178         – has a 200px right margin;
 179     </div>
 180   </div><!-- .container -->
 181
 182
 183   <hr>
 184
 185   <h2 id="test6">Test 6 (2 floats)</h2>
 186
 187   <div class="container">
 188     <div style="margin-right: 100px;" class="float">This yellow square is floated left and it has a right margin of 100px.</div>
 189     <div style="float: right; margin-left: 100px;" class="float">This yellow square is floated right and it has a left margin of 100px.</div>
 190     <div class="overflow">This orange rectangle:<br>
 191         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 192         – has a 0px left margin and a 0px right margin;<br><br>
 193         This orange rectangle:<br>
 194         – establishes a <strong>new block formating context</strong> thanks to the CSS declaration <code>overflow: hidden</code>;<br>
 195         – has a 0px left margin and a 0px right margin;
 196     </div>
 197   </div><!-- .container -->
 198
 199   <!--
 200   non-positioned block boxes created before and after the float box
 201   flow vertically as if the float did not exist.
 202   http://www.w3.org/TR/CSS21/visuren.html#floats
 203
 204   The border box of (...) an element in the normal flow that
 205   establishes a new block formatting context (such as an element with
 206   'overflow' other than 'visible') must not overlap the margin box of
 207   any floats in the same block formatting context as the element itself.
 208   http://www.w3.org/TR/CSS21/visuren.html#floats
 209   -->
 210
 211
 212
 213  </body>
 214 </html>