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

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