third_party/WebKit/LayoutTests/fast/block/float/centered-float-avoidance-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
   7   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   8
   9   <title>Floats and BFCs with horizontal margins</title>
  10
  11
  12   <style type="text/css">
  13   div.container
  14   {
  15   border: silver solid 5px;
  16   margin: 1em;
  17   width: 640px;
  18   }
  19
  20   div.floatL
  21   {
  22   background-color: lime;
  23   float: left;
  24   height: 1em;
  25   }
  26
  27   div.floatR
  28   {
  29   background-color: lime;
  30   float: right;
  31   height: 1em;
  32   }
  33
  34   div.overflow
  35   {
  36   background-color: orange;
  37   margin-left: 100px;
  38   margin-right: 100px;
  39   overflow: auto;
  40   }
  41
  42   .width0 {width: 0;}
  43
  44   .width50 {width: 50px;}
  45
  46   .width100 {width: 100px;}
  47
  48   .width150 {width: 150px;}
  49   </style>
  50
  51  </head>
  52
  53  <body>
  54
  55   <h1>Margins and block formating contexts (<a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0975.html">additional tests from Alan Gresley</a>)</h1>
  56
  57   <!--
  58   non-positioned block boxes created before and after the float box
  59   flow vertically as if the float did not exist.
  60   http://www.w3.org/TR/CSS21/visuren.html#floats
  61
  62   The border box of (...) an element in the normal flow that
  63   establishes a new block formatting context (such as an element with
  64   'overflow' other than 'visible') must not overlap the margin box of
  65   any floats in the same block formatting context as the element itself.
  66   http://www.w3.org/TR/CSS21/visuren.html#floats
  67   -->
  68
  69   <h3>The orange stripe has 'overflow: auto', 'margin-left: 100px' and 'margin-right: 100px'<br> The lime stripes are floats with various width (topmost is 0, bottommost is 150px)<br>The wrapping container has a solid silver border.</h3>
  70
  71   <div class="container"><div class="width0 floatL">floatL</div><div
  72 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
  73
  74   <div class="container"><div class="width50 floatL">floatL</div><div
  75 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
  76
  77   <div class="container"><div class="width100 floatL">floatL</div><div
  78 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
  79
  80   <div class="container"><div class="width150 floatL">floatL 150px</div><div
  81 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
  82
  83   <div class="container"><div class="width0 floatR">floatR</div><div
  84 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
  85
  86   <div class="container"><div class="width50 floatR">floatR</div><div
  87 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
  88
  89   <div class="container"><div class="width100 floatR">floatR</div><div
  90 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
  91
  92   <div class="container"><div class="width150 floatR">floatR 150px</div><div
  93 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
  94
  95   <!--
  96   non-positioned block boxes created before and after the float box
  97   flow vertically as if the float did not exist.
  98   http://www.w3.org/TR/CSS21/visuren.html#floats
  99
 100   The border box of (...) an element in the normal flow that
 101   establishes a new block formatting context (such as an element with
 102   'overflow' other than 'visible') must not overlap the margin box of
 103   any floats in the same block formatting context as the element itself.
 104   http://www.w3.org/TR/CSS21/visuren.html#floats
 105   -->
 106
 107   <h3>The orange stripe has 'overflow: auto', 'margin-left: auto' and 'margin-right: auto'<br> The lime stripes are floats with various width (topmost is 0, bottommost is 150px)<br>The wrapping container has a solid silver border.</h3>
 108
 109  </body>
 110 </html>