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

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