148 lines
4.6 KiB
HTML
148 lines
4.6 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title></title>
|
|
<script>
|
|
if (window.testRunner) {
|
|
testRunner.testRepaint();
|
|
testRunner.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>
|