src/third_party/WebKit/LayoutTests/fast/repaint/float-overflow.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4     <title>Repaint test for http://bugs.webkit.org/show_bug.cgi?id=12123</title>
   5     <style>
   6         .spacer { width: 0; }
   7         .test { border: thin dotted lightgray; margin: 2px; height: 35px; }
   8         .outer { border: thin solid purple; padding: 5px; width: 50px; margin-left: 50px; }
   9         .outer > div { height: 10px; background-color: pink; }
  10         .outer > div > div { width: 40px; height: 10px; background-color: lightblue; }
  11         span { font-family: Ahem; color: blue; }
  12         .box { display: -webkit-box; }
  13     </style>
  14     <script src="resources/repaint.js"></script>
  15     <script>
  16         function repaintTest()
  17         {
  18             for (i = 1; i < 15; ++i)
  19                 document.getElementById("spacer" + i).style.height = "6px";
  20         }
  21     </script>
  22 </head>
  23 <body onload="runRepaintTest()">
  24     <div class="test">
  25         <div class="spacer" id="spacer1"></div>
  26         <div class="outer">
  27             <div>
  28                 <div style="float: left; margin-left: -2px;">
  29                     <span style="margin-left: -2px;">x</span>
  30                 </div>
  31             </div>
  32         </div>
  33     </div>
  34
  35     <div class="test">
  36         <div class="spacer" id="spacer2"></div>
  37         <div class="outer">
  38             <div>
  39                 <div style="float: left; margin-left: -2px;">
  40                     <span style="margin-left: -8px;">x</span>
  41                 </div>
  42             </div>
  43         </div>
  44     </div>
  45
  46     <div class="test">
  47         <div class="spacer" id="spacer3"></div>
  48         <div class="outer">
  49             <div>
  50                 <div style="float: left; margin-left: -8px;">
  51                     <span style="margin-left: -2px;">x</span>
  52                 </div>
  53             </div>
  54         </div>
  55     </div>
  56
  57     <div class="test">
  58         <div class="spacer" id="spacer4"></div>
  59         <div class="outer">
  60             <div>
  61                 <div style="float: left;">
  62                     <span style="margin-left: -8px;">x</span>
  63                 </div>
  64             </div>
  65         </div>
  66     </div>
  67
  68     <div class="test">
  69         <div class="spacer" id="spacer5"></div>
  70         <div class="outer">
  71             <div>
  72                 <div style="float: left; margin-left: -8px;">
  73                     <span>x</span>
  74                 </div>
  75             </div>
  76         </div>
  77     </div>
  78
  79     <div class="test">
  80         <div class="spacer" id="spacer6"></div>
  81         <div class="outer box" style="-webkit-box-orient: vertical;">
  82             <div>
  83                 <div style="float: left; margin-left: -8px;">
  84                     <span>x</span>
  85                 </div>
  86             </div>
  87         </div>
  88     </div>
  89
  90     <div class="test">
  91         <div class="spacer" id="spacer12"></div>
  92         <div class="outer box" style="-webkit-box-orient: horizontal;">
  93             <div>
  94                 <div style="float: left; margin-left: -8px;">
  95                     <span>x</span>
  96                 </div>
  97             </div>
  98         </div>
  99     </div>
 100
 101     <div class="test">
 102         <div class="spacer" id="spacer7"></div>
 103         <table class="outer">
 104             <tr>
 105                 <td style="height: 10px; background-color: pink; width: 100%;">
 106                     <div style="width: 40px; height: 10px; background-color: lightblue; float: left;">
 107                         <span style="margin-left: -4px;">x</span>
 108                     </div>
 109                 </td>
 110             </tr>
 111         </table>
 112     </div>
 113
 114     <div class="test">
 115         <div class="spacer" id="spacer8"></div>
 116         <table class="outer">
 117             <tr>
 118                 <td style="height: 10px; background-color: pink; width: 100%;">
 119                     <div style="width: 40px; height: 10px; background-color: lightblue; float: left;">
 120                         <span style="margin-left: -12px;">x</span>
 121                     </div>
 122                 </td>
 123             </tr>
 124         </table>
 125     </div>
 126
 127     <div class="test" style="height: 50px;">
 128         <div class="spacer" id="spacer14"></div>
 129         <table class="outer" style="display: inline-table;">
 130             <tr>
 131                 <td style="height: 10px; background-color: pink; width: 100%;">
 132                     <div style="width: 40px; height: 10px; background-color: lightblue; float: left;">
 133                         <span style="margin-left: -12px;">x</span>
 134                     </div>
 135                 </td>
 136             </tr>
 137         </table>
 138     </div>
 139
 140     <div class="test">
 141         <div class="spacer" id="spacer9"></div>
 142         <div class="outer">
 143             <div>
 144                 <div style="opacity: 0.75; float: left; margin-left: -8px;">
 145                     <span>x</span>
 146                 </div>
 147             </div>
 148         </div>
 149     </div>
 150
 151     <div class="test">
 152         <div class="spacer" id="spacer10"></div>
 153         <div class="outer">
 154             <div style="opacity: 0.75;">
 155                 <div style="float: left; margin-left: -8px;">
 156                     <span>x</span>
 157                 </div>
 158             </div>
 159         </div>
 160     </div>
 161
 162     <div class="test">
 163         <div class="spacer" id="spacer11"></div>
 164         <div class="outer" style="opacity: 0.75">
 165             <div>
 166                 <div style="float: left; margin-left: -8px;">
 167                     <span>x</span>
 168                 </div>
 169             </div>
 170         </div>
 171     </div>
 172     <div class="test" style="height: 48px">
 173         <div class="spacer" id="spacer13"></div>
 174         <div class="outer">
 175             <div style="display: inline-block; height: 20px;">
 176                 <div style="float: left; margin-left: -8px;">
 177                     <span>x</span>
 178                 </div>
 179             </div>
 180         </div>
 181     </div>
 182 </body>
 183 </html>