src/third_party/WebKit/LayoutTests/fast/repaint/box-shadow-h.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4     <title></title>
   5     <script>
   6         if (window.internals) {
   7             window.internals.settings.setForceCompositingMode(true);
   8         }
   9     </script>
  10     <style>
  11         .square { margin: 10px; width: 40px; height: 40px; background-color: #ff7; }
  12         .shadowTL { -webkit-box-shadow: black -5px -5px 0; }
  13         .shadowBL { -webkit-box-shadow: black -5px 5px 0; }
  14         .shadowBR { -webkit-box-shadow: black 5px 5px 0; }
  15         .shadowTR { -webkit-box-shadow: black 5px -5px 0; }
  16         .shadowB { -webkit-box-shadow: black 0 0 5px; }
  17         .shadowFirstLine:first-line { -webkit-box-shadow: black -5px -5px 0; }
  18     </style>
  19 </head>
  20 <body>
  21     <div style="float: left;">
  22         <div class="square shadowTL"></div>
  23
  24         <div style="position: relative; width: 60px; height: 60px;">
  25             <div style="position: absolute;" class="square shadowTL"></div>
  26         </div>
  27
  28         <div style="position: relative; width: 60px; height: 60px;">
  29             <div style="position: absolute; clip: rect(-5px, 0, 0, -5px)" class="square shadowTL"></div>
  30         </div>
  31
  32         <div class="square shadowTL" style="opacity: 0.8;"></div>
  33
  34         <div class="square shadowTL" style="overflow: auto;"></div>
  35
  36         <table class="square shadowTL"></table>
  37
  38         <canvas class="square shadowTL"></canvas>
  39
  40         <p>
  41             Lorem <span class="shadowTL">ipsum</span> dolor
  42         </p>
  43
  44         <p class="shadowFirstLine">
  45             Lorem ipsum<br>
  46             dolor sit amet
  47         </p>
  48     </div>
  49
  50     <div style="float: left; margin-left: 10px;">
  51         <div class="square shadowBL"></div>
  52
  53         <div style="position: relative; width: 60px; height: 60px;">
  54             <div style="position: absolute;" class="square shadowBL"></div>
  55         </div>
  56
  57         <div style="position: relative; width: 60px; height: 60px;">
  58             <div style="position: absolute; clip: rect(40px, 0, 45px, -5px)" class="square shadowBL"></div>
  59         </div>
  60
  61         <div class="square shadowBL" style="opacity: 0.8;"></div>
  62
  63         <div class="square shadowBL" style="overflow: auto;"></div>
  64
  65         <table class="square shadowBL"></table>
  66
  67         <canvas class="square shadowBL"></canvas>
  68
  69         <p>
  70             Lorem <span class="shadowBL">ipsum</span> dolor
  71         </p>
  72     </div>
  73
  74     <div style="float: left; margin-left: 10px;">
  75         <div class="square shadowBR"></div>
  76
  77         <div style="position: relative; width: 60px; height: 60px;">
  78             <div style="position: absolute;" class="square shadowBR"></div>
  79         </div>
  80
  81         <div style="position: relative; width: 60px; height: 60px;">
  82             <div style="position: absolute; clip: rect(40px, 45px, 45px, 40px)" class="square shadowBR"></div>
  83         </div>
  84
  85         <div class="square shadowBR" style="opacity: 0.8;"></div>
  86
  87         <div class="square shadowBR" style="overflow: auto;"></div>
  88
  89         <table class="square shadowBR"></table>
  90
  91         <canvas class="square shadowBR"></canvas>
  92
  93         <p>
  94             Lorem <span class="shadowBR">ipsum</span> dolor
  95         </p>
  96     </div>
  97
  98     <div style="float: left; margin-left: 10px;">
  99         <div class="square shadowTR"></div>
 100
 101         <div style="position: relative; width: 60px; height: 60px;">
 102             <div style="position: absolute;" class="square shadowTR"></div>
 103         </div>
 104
 105         <div style="position: relative; width: 60px; height: 60px;">
 106             <div style="position: absolute; clip: rect(-5px, 45px, 0, 40px)" class="square shadowTR"></div>
 107         </div>
 108
 109         <div class="square shadowTR" style="opacity: 0.8;"></div>
 110
 111         <div class="square shadowTR" style="overflow: auto;"></div>
 112
 113         <table class="square shadowTR"></table>
 114
 115         <canvas class="square shadowTR"></canvas>
 116
 117         <p>
 118             Lorem <span class="shadowTR">ipsum</span> dolor
 119         </p>
 120     </div>
 121
 122     <div style="float: left; margin-left: 10px;">
 123         <div class="square shadowB"></div>
 124
 125         <div style="position: relative; width: 60px; height: 60px;">
 126             <div style="position: absolute;" class="square shadowB"></div>
 127         </div>
 128
 129         <div style="position: relative; width: 60px; height: 60px;">
 130             <!-- space -->
 131         </div>
 132
 133         <div class="square shadowB" style="opacity: 0.8;"></div>
 134
 135         <div class="square shadowB" style="overflow: auto;"></div>
 136
 137         <table class="square shadowB"></table>
 138
 139         <canvas class="square shadowB"></canvas>
 140
 141         <p>
 142             Lorem <span class="shadowB">ipsum</span> dolor
 143         </p>
 144     </div>
 145 </body>
 146 </html>