box-shadow-inset-without-border-radius.html (2659B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds and Borders Test: box-shadow inset without border-radius</title> 6 7 <link rel="author" title="Zhang Xiaochong" href="mailto:joy.xczhang@gmail.com"> 8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 9 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> 10 <link rel="match" href="reference/box-shadow-inset-without-border-radius-ref.html"> 11 12 <meta content="" name="flags"> 13 14 <!-- 15 16 Reviewed by Gérard Talbot on April 9th 2023 17 18 More info: https://github.com/web-platform-tests/wpt/issues/10013 19 20 https://github.com/web-platform-tests/wpt/pull/39445 21 22 --> 23 24 <style> 25 div 26 { 27 border: transparent solid 8px; 28 display: inline-block; 29 height: 32px; 30 margin: 0px 8px 8px 0px; 31 padding: 16px; 32 vertical-align: top; 33 width: 32px; 34 } 35 36 /* 37 38 An inner box-shadow casts a shadow as if everything outside 39 the padding edge were opaque. Assuming a spread distance of 40 zero, its perimeter has the exact same size and shape as the 41 padding box. The shadow is drawn inside the padding edge only: 42 it is clipped outside the padding box of the element. 43 44 If a spread distance is defined, the shadow perimeter 45 defined above is contracted inward (for inner box-shadows) 46 by insetting the shadow’s straight edges by the spread 47 distance (and flooring the resulting width/height at zero). 48 49 */ 50 51 div#first-subtest /* inset with NO spread */ 52 { 53 box-shadow: black 10px 10px 0px 0px inset; 54 } 55 56 div#second-subtest /* inset with a 15px spread */ 57 { 58 box-shadow: black 10px 10px 0px 15px inset; 59 } 60 61 div#third-subtest /* inset with NO spread */ 62 { 63 box-shadow: black 10px -10px 0px 0px inset; 64 } 65 66 div#fourth-subtest /* inset with a 15px spread */ 67 { 68 box-shadow: black 10px -10px 0px 15px inset; 69 } 70 71 div#fifth-subtest /* inset with NO spread */ 72 { 73 box-shadow: black -10px 10px 0px 0px inset; 74 } 75 76 div#sixth-subtest /* inset with a 15px spread */ 77 { 78 box-shadow: black -10px 10px 0px 15px inset; 79 } 80 81 div#seventh-subtest /* inset with NO spread */ 82 { 83 box-shadow: black -10px -10px 0px 0px inset; 84 } 85 86 div#eighth-subtest /* inset with a 15px spread */ 87 { 88 box-shadow: black -10px -10px 0px 15px inset; 89 } 90 </style> 91 92 <div id="first-subtest"></div><div id="second-subtest"></div><div id="third-subtest"></div><div id="fourth-subtest"></div><br> 93 94 <div id="fifth-subtest"></div><div id="sixth-subtest"></div><div id="seventh-subtest"></div><div id="eighth-subtest"></div>