box-shadow-blur-definition-001.xht (2194B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: blur computation for box-shadow</title> 5 <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> 6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 7 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"/> 8 <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" /> 9 <style type="text/css"> 10 div.stripecontainer { 11 width: 600px; 12 height: 30px; 13 border: medium solid blue; 14 } 15 div.refimage, div.blurcontainer { 16 width: 600px; 17 height: 10px; 18 } 19 div.refimage img { 20 display: block; 21 } 22 div.blurcontainer { position: relative; overflow: hidden } 23 div.blur { 24 position: absolute; 25 width: 2000px; 26 height: 2010px; 27 top: -1000px; /* places 1000px both above and below container */ 28 left: -2000px; /* places right edge at left of container */ 29 box-shadow: 300px 0 100px black; 30 } 31 </style> 32 </head> 33 <body> 34 <p>The following test should contain three grayscale stripes, each 10 35 pixels tall, with no space between them, but all enclosed within a 36 blue border. At all points, the middle stripe must be <strong>the 37 same color as or darker than</strong> the top stripe, and <strong>the 38 same color as or lighter than</strong> the bottom stripe. (This tests 39 that the blurring algorithm produces results within 5% of a Gaussian 40 blur.)</p> 41 <div class="stripecontainer"> 42 <div class="refimage"><img height="10" width="600" src="support/box-shadow-blur-definition-001-light-bound.png" alt="[reference stripe image]" /></div> 43 <div class="blurcontainer"><div class="blur"></div></div> 44 <div class="refimage"><img height="10" width="600" src="support/box-shadow-blur-definition-001-dark-bound.png" alt="[reference stripe image]" /></div> 45 </div> 46 </body> 47 </html>