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