layout/reftests/bugs/134706-4.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="https://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; }
  16
  17         </style>
  18 </head>
  19 <body>
  20
  21 <table width="300" style="background: aqua"><tr><td>
  22   <div style="float:left; background:blue; width: 100px; height: 20px"></div>
  23   <div style="float:left; background:silver; width: 100px; height: 6px"></div>
  24   <table style="background: yellow"><tr><td>
  25     <div style="width: 150px; height: 10px; background: purple"></div>
  26   </td></tr></table>
  27 </td></tr></table>
  28
  29 <table width="300" style="background: aqua"><tr><td>
  30   <div style="float:left; background:blue; width: 100px; height: 20px"></div>
  31   <div style="float:right; background:silver; width: 100px; height: 6px"></div>
  32   <table style="background: yellow"><tr><td>
  33     <div style="width: 150px; height: 10px; background: purple"></div>
  34   </td></tr></table>
  35 </td></tr></table>
  36
  37 <table width="300" style="background: aqua"><tr><td>
  38   <div style="float:right; background:blue; width: 100px; height: 20px"></div>
  39   <div style="float:left; background:silver; width: 100px; height: 6px"></div>
  40   <table style="background: yellow"><tr><td>
  41     <div style="width: 150px; height: 10px; background: purple"></div>
  42   </td></tr></table>
  43 </td></tr></table>
  44
  45 <table width="300" style="background: aqua"><tr><td>
  46   <div style="float:right; background:blue; width: 100px; height: 20px"></div>
  47   <div style="float:right; background:silver; width: 100px; height: 6px"></div>
  48   <table style="background: yellow"><tr><td>
  49     <div style="width: 150px; height: 10px; background: purple"></div>
  50   </td></tr></table>
  51 </td></tr></table>
  52
  53 <table width="300" style="background: aqua"><tr><td>
  54   <div style="float:left; background:blue; width: 100px; height: 20px"></div>
  55   <div style="float:left; background:silver; width: 100px; height: 6px"></div>
  56   <div style="overflow: hidden; background: yellow">
  57     <div style="width: 150px; height: 10px; background: purple"></div>
  58   </div>
  59 </td></tr></table>
  60
  61 <table width="300" style="background: aqua"><tr><td>
  62   <div style="float:left; background:blue; width: 100px; height: 20px"></div>
  63   <div style="float:right; background:silver; width: 100px; height: 6px"></div>
  64   <div style="overflow: hidden; background: yellow">
  65     <div style="width: 150px; height: 10px; background: purple"></div>
  66   </div>
  67 </td></tr></table>
  68
  69 <table width="300" style="background: aqua"><tr><td>
  70   <div style="float:right; background:blue; width: 100px; height: 20px"></div>
  71   <div style="float:left; background:silver; width: 100px; height: 6px"></div>
  72   <div style="overflow: hidden; background: yellow">
  73     <div style="width: 150px; height: 10px; background: purple"></div>
  74   </div>
  75 </td></tr></table>
  76
  77 <table width="300" style="background: aqua"><tr><td>
  78   <div style="float:right; background:blue; width: 100px; height: 20px"></div>
  79   <div style="float:right; background:silver; width: 100px; height: 6px"></div>
  80   <div style="overflow: hidden; background: yellow">
  81     <div style="width: 150px; height: 10px; background: purple"></div>
  82   </div>
  83 </td></tr></table>
  84
  85 </body>
  86 </html>