| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <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> |