| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <title></title> |
| <script> |
| if (window.testRunner) |
| testRunner.testRepaint(); |
| </script> |
| <style> |
| .square { margin: 10px; width: 40px; height: 40px; background-color: #ff7; } |
| .shadowTL { -webkit-box-shadow: black -5px -5px 0; } |
| .shadowBL { -webkit-box-shadow: black -5px 5px 0; } |
| .shadowBR { -webkit-box-shadow: black 5px 5px 0; } |
| .shadowTR { -webkit-box-shadow: black 5px -5px 0; } |
| .shadowB { -webkit-box-shadow: black 0 0 5px; } |
| .shadowFirstLine:first-line { -webkit-box-shadow: black -5px -5px 0; } |
| </style> |
| </head> |
| <body> |
| <div style="float: left;"> |
| <div class="square shadowTL"></div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute;" class="square shadowTL"></div> |
| </div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute; clip: rect(-5px, 0, 0, -5px)" class="square shadowTL"></div> |
| </div> |
| |
| <div class="square shadowTL" style="opacity: 0.8;"></div> |
| |
| <div class="square shadowTL" style="overflow: auto;"></div> |
| |
| <table class="square shadowTL"></table> |
| |
| <canvas class="square shadowTL"></canvas> |
| |
| <p> |
| Lorem <span class="shadowTL">ipsum</span> dolor |
| </p> |
| |
| <p class="shadowFirstLine"> |
| Lorem ipsum<br> |
| dolor sit amet |
| </p> |
| </div> |
| |
| <div style="float: left; margin-left: 10px;"> |
| <div class="square shadowBL"></div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute;" class="square shadowBL"></div> |
| </div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute; clip: rect(40px, 0, 45px, -5px)" class="square shadowBL"></div> |
| </div> |
| |
| <div class="square shadowBL" style="opacity: 0.8;"></div> |
| |
| <div class="square shadowBL" style="overflow: auto;"></div> |
| |
| <table class="square shadowBL"></table> |
| |
| <canvas class="square shadowBL"></canvas> |
| |
| <p> |
| Lorem <span class="shadowBL">ipsum</span> dolor |
| </p> |
| </div> |
| |
| <div style="float: left; margin-left: 10px;"> |
| <div class="square shadowBR"></div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute;" class="square shadowBR"></div> |
| </div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute; clip: rect(40px, 45px, 45px, 40px)" class="square shadowBR"></div> |
| </div> |
| |
| <div class="square shadowBR" style="opacity: 0.8;"></div> |
| |
| <div class="square shadowBR" style="overflow: auto;"></div> |
| |
| <table class="square shadowBR"></table> |
| |
| <canvas class="square shadowBR"></canvas> |
| |
| <p> |
| Lorem <span class="shadowBR">ipsum</span> dolor |
| </p> |
| </div> |
| |
| <div style="float: left; margin-left: 10px;"> |
| <div class="square shadowTR"></div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute;" class="square shadowTR"></div> |
| </div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute; clip: rect(-5px, 45px, 0, 40px)" class="square shadowTR"></div> |
| </div> |
| |
| <div class="square shadowTR" style="opacity: 0.8;"></div> |
| |
| <div class="square shadowTR" style="overflow: auto;"></div> |
| |
| <table class="square shadowTR"></table> |
| |
| <canvas class="square shadowTR"></canvas> |
| |
| <p> |
| Lorem <span class="shadowTR">ipsum</span> dolor |
| </p> |
| </div> |
| |
| <div style="float: left; margin-left: 10px;"> |
| <div class="square shadowB"></div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <div style="position: absolute;" class="square shadowB"></div> |
| </div> |
| |
| <div style="position: relative; width: 60px; height: 60px;"> |
| <!-- space --> |
| </div> |
| |
| <div class="square shadowB" style="opacity: 0.8;"></div> |
| |
| <div class="square shadowB" style="overflow: auto;"></div> |
| |
| <table class="square shadowB"></table> |
| |
| <canvas class="square shadowB"></canvas> |
| |
| <p> |
| Lorem <span class="shadowB">ipsum</span> dolor |
| </p> |
| </div> |
| </body> |
| </html> |
