mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
48 lines
No EOL
2.1 KiB
HTML
48 lines
No EOL
2.1 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>CSS Test: blur computation for box-shadow</title>
|
|
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
|
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
|
|
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow">
|
|
<meta name="flags" content="">
|
|
<meta name="assert" content="the resulting shadow must approximate (with each pixel being within 5% of its expected value) the image that would be generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius">
|
|
<style type="text/css">
|
|
div.stripecontainer {
|
|
width: 600px;
|
|
height: 30px;
|
|
border: medium solid blue;
|
|
}
|
|
div.refimage, div.blurcontainer {
|
|
width: 600px;
|
|
height: 10px;
|
|
}
|
|
div.refimage img {
|
|
display: block;
|
|
}
|
|
div.blurcontainer { position: relative; overflow: hidden }
|
|
div.blur {
|
|
position: absolute;
|
|
width: 2000px;
|
|
height: 2010px;
|
|
top: -1000px; /* places 1000px both above and below container */
|
|
left: -2000px; /* places right edge at left of container */
|
|
box-shadow: 300px 0 100px black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>The following test should contain three grayscale stripes, each 10
|
|
pixels tall, with no space between them, but all enclosed within a
|
|
blue border. At all points, the middle stripe must be <strong>the
|
|
same color as or darker than</strong> the top stripe, and <strong>the
|
|
same color as or lighter than</strong> the bottom stripe. (This tests
|
|
that the blurring algorithm produces results within 5% of a Gaussian
|
|
blur.)</p>
|
|
<div class="stripecontainer">
|
|
<div class="refimage"><img height="10" width="600" src="support/box-shadow-blur-definition-001-light-bound.png" alt="[reference stripe image]"></div>
|
|
<div class="blurcontainer"><div class="blur"></div></div>
|
|
<div class="refimage"><img height="10" width="600" src="support/box-shadow-blur-definition-001-dark-bound.png" alt="[reference stripe image]"></div>
|
|
</div>
|
|
</body>
|
|
</html> |