third_party/WebKit/LayoutTests/fast/block/float/021.html

   1 <html>
   2 <head>
   3 <style>
   4 .black {
   5   border:10px solid black;
   6   margin: 1em 0;
   7   height:220px;
   8   width:700px;
   9 }
  10
  11 .blue {
  12   float:left;
  13   width:1500px;
  14   height:100px;
  15   background-color: blue;
  16 }
  17
  18 .green {
  19  float:left;
  20   width:1500px;
  21   height:100px;
  22   background-color: green;
  23 }
  24
  25 .bluesnug {
  26   float:left;
  27   width:698px;
  28   height:100px;
  29   background-color: blue;
  30 }
  31
  32 .greensnug {
  33  float:left;
  34   width:698px;
  35   height:100px;
  36   background-color: green;
  37 }
  38 </style>
  39 </head>
  40 <body >
  41 In all of the examples, you should be able to see blue and green rectangles that spill way out of their
  42 containing blocks.  They should be 100px tall and not overlap one another at all. They should be stacked
  43 vertically.
  44
  45 <div class="black">
  46 You should see blue and green rectangles below.<br>
  47 <div class="blue"></div>
  48 <div class="green"></div>
  49 </div>
  50
  51 <div class="black">
  52 You should see blue and
  53 <div class="blue"></div>
  54 <div class="green"></div>
  55 green rectangles below.
  56 </div>
  57
  58 <div class="black">
  59 <div class="blue"></div>
  60 <div class="green"></div><br>
  61 You should see blue and green rectangles above.
  62 </div>
  63
  64
  65 <div class="black">
  66 <div class="blue"></div>
  67 <div class="green"></div>
  68 You should see blue and green rectangles above.
  69 </div>
  70
  71 <div class="black">
  72 <div class="blue"></div>
  73 You should see blue above and green below.
  74 <div class="green"></div>
  75 </div>
  76
  77 <div class="black">
  78 <div class="blue"></div>
  79 You should see blue above and green below.<br>
  80 <div class="green"></div>
  81 </div>
  82
  83 The next examples should have blue and green rectangles that snugly fit without spilling out.
  84
  85 <div class="black">
  86 You should see blue and green rectangles below.<br>
  87 <div class="bluesnug"></div>
  88 <div class="greensnug"></div>
  89 </div>
  90
  91 <div class="black">
  92 You should see blue and green rectangles below.
  93 <div class="bluesnug"></div>
  94 <div class="greensnug"></div>
  95 </div>
  96
  97 <div class="black">
  98 <div class="bluesnug"></div>
  99 <div class="greensnug"></div><br>
 100 You should see blue and green rectangles above.
 101 </div>
 102
 103 <div class="black">
 104 <div class="bluesnug"></div>
 105 <div class="greensnug"></div>
 106 You should see blue and green rectangles above.
 107 </div>
 108
 109 <div class="black">
 110 <div class="bluesnug"></div>
 111 You should see blue above and green below.
 112 <div class="greensnug"></div>
 113 </div>
 114
 115 <div class="black">
 116 <div class="bluesnug"></div>
 117 You should see blue above and green below.<br>
 118 <div class="greensnug"></div>
 119 </div>
 120
 121
 122 </body>
 123 </html>