blob: 2d4c9aea898187235ed39a5e85afe9a321915291 [file] [log] [blame]
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script>
if (window.layoutTestController) {
layoutTestController.testRepaint();
layoutTestController.repaintSweepHorizontally();
}
</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>