layout/reftests/bugs/134706-7.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html lang="en-US">
   3 <head>
   4         <title>CSS 2.1 Test Suite: Test for flow around floats</title>
   5         <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
   6         <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
   7         <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" />
   8         <meta name="assert" content="The border box of a table, a block-level replaced element, or 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 any floats in the same block formatting context as the element itself." />
   9         <meta name="flags" content="" />
  10         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11         <meta http-equiv="Content-Style-Type" content="text/css">
  12         <style type="text/css">
  13
  14         table { margin: 0; border-spacing: 0; }
  15         td, th { padding: 0; vertical-align: top; }
  16
  17         </style>
  18 </head>
  19 <body>
  20
  21 <!-- 6px margin between (from top, from bottom, from both) -->
  22
  23 <table width="300" style="background: aqua"><tr><td>
  24     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  25     <div style="height: 5px; background: purple; margin-bottom: 6px;"></div>
  26     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow;"></div>
  27 </td></tr></table>
  28
  29 <table width="300" style="background: aqua"><tr><td>
  30     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  31     <div style="height: 5px; background: purple;"></div>
  32     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 6px;"></div>
  33 </td></tr></table>
  34
  35 <table width="300" style="background: aqua"><tr><td>
  36     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  37     <div style="height: 5px; background: purple; margin-bottom: 6px;"></div>
  38     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 6px;"></div>
  39 </td></tr></table>
  40
  41 <!-- 5px margin between (from both) -->
  42
  43 <table width="300" style="background: aqua"><tr><td>
  44     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  45     <div style="height: 5px; background: purple; margin-bottom: 5px;"></div>
  46     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div>
  47 </td></tr></table>
  48
  49 <table width="300" style="background: aqua"><tr><td>
  50     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  51     <div style="height: 5px; background: purple; margin-bottom: 10px;"></div>
  52     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -5px;"></div>
  53 </td></tr></table>
  54
  55 <table width="300" style="background: aqua"><tr><td>
  56     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  57     <div style="height: 5px; background: purple; margin-bottom: -5px;"></div>
  58     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 10px;"></div>
  59 </td></tr></table>
  60
  61 <!-- 4px margin between (from both) -->
  62
  63 <table width="300" style="background: aqua"><tr><td>
  64     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  65     <div style="height: 5px; background: purple; margin-bottom: 4px;"></div>
  66     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 4px;"></div>
  67 </td></tr></table>
  68
  69 <table width="300" style="background: aqua"><tr><td>
  70     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  71     <div style="height: 5px; background: purple; margin-bottom: -1px;"></div>
  72     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div>
  73 </td></tr></table>
  74
  75 <table width="300" style="background: aqua"><tr><td>
  76     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  77     <div style="height: 5px; background: purple; margin-bottom: -1px;"></div>
  78     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div>
  79 </td></tr></table>
  80
  81 <!-- negative margin between -->
  82
  83 <table width="300" style="background: aqua"><tr><td>
  84     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  85     <div style="height: 5px; background: purple; margin-bottom: -4px;"></div>
  86     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 0px;"></div>
  87 </td></tr></table>
  88
  89 <table width="300" style="background: aqua"><tr><td>
  90     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  91     <div style="height: 5px; background: purple; margin-bottom: 0px;"></div>
  92     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div>
  93 </td></tr></table>
  94
  95 <table width="300" style="background: aqua"><tr><td>
  96     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
  97     <div style="height: 5px; background: purple; margin-bottom: -4px;"></div>
  98     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -1px;"></div>
  99 </td></tr></table>
 100
 101 <table width="300" style="background: aqua"><tr><td>
 102     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
 103     <div style="height: 5px; background: purple; margin-bottom: -1px;"></div>
 104     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div>
 105 </td></tr></table>
 106
 107 <table width="300" style="background: aqua"><tr><td>
 108     <div style="float: left; height: 10px; width: 150px; background: blue"></div>
 109     <div style="height: 5px; background: purple; margin-bottom: -4px;"></div>
 110     <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div>
 111 </td></tr></table>
 112
 113 </body>
 114 </html>