box-shadow-029.html (1858B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 6 <title>CSS Backgrounds Test: box-shadow and empty box (edge)</title> 7 8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 9 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-box-shadow"> 10 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 11 12 <meta content="This test checks that an empty box can have a box shadow." name="assert"> 13 14 <!-- 15 16 <shadow> = inset? && <length>{2,4} && <color>? 17 18 A comma-separated pair of numbers in curly braces {A,B} 19 indicates that the preceding type, word, or group occurs 20 at least A and at most B times. 21 22 A question mark (?) indicates that the preceding type, 23 word, or group is optional (occurs zero or one times). 24 25 The components of each <shadow> are interpreted as follows: 26 27 1st <length> 28 Specifies the horizontal offset 29 of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left. 30 2nd <length> 31 Specifies the vertical offset 32 of the shadow. A positive value offsets the shadow down, a negative one up. 33 4th <length> 34 Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract. 35 36 --> 37 38 <style> 39 div#green-overlapping-test 40 { 41 background-color: red; 42 height: 0px; 43 width: 0px; 44 45 box-shadow: green 50px 50px 0px 50px; 46 } 47 48 div#red-overlapped-reference 49 { 50 background-color: red; 51 height: 100px; 52 position: relative; 53 width: 100px; 54 z-index: -1; 55 } 56 </style> 57 58 <p>Test passes if there is a filled green square and <strong>no red</strong>. 59 60 <div id="green-overlapping-test"></div> 61 62 <div id="red-overlapped-reference"></div>