box-shadow-outset-without-border-radius-001.html (2617B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds and Borders Test: box-shadow outset 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-outset-without-border-radius-001-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: 32px 20px; 31 padding: 16px; 32 vertical-align: top; 33 width: 32px; 34 } 35 36 /* 37 38 An outer box-shadow casts a shadow as if the border-box 39 of the element were opaque. Assuming a spread distance 40 of zero, its perimeter has the exact same size and 41 shape as the border box. The shadow is drawn outside 42 the border edge only: it is clipped inside the border-box 43 of the element. 44 45 If a spread distance is defined, the shadow perimeter 46 defined above is expanded outward (for outer box-shadows) 47 by outset withting the shadow’s straight edges by the spread 48 distance (and flooring the resulting width/height at zero). 49 50 */ 51 52 div#first-subtest /* outset with NO spread */ 53 { 54 box-shadow: black 10px 10px 0px 0px; 55 } 56 57 div#second-subtest /* outset with a 15px spread */ 58 { 59 box-shadow: black 10px 10px 0px 15px; 60 } 61 62 div#third-subtest /* outset with NO spread */ 63 { 64 box-shadow: black 10px -10px 0px 0px; 65 } 66 67 div#fourth-subtest /* outset with a 15px spread */ 68 { 69 box-shadow: black 10px -10px 0px 15px; 70 } 71 72 div#fifth-subtest /* outset with NO spread */ 73 { 74 box-shadow: black -10px 10px 0px 0px; 75 } 76 77 div#sixth-subtest /* outset with a 15px spread */ 78 { 79 box-shadow: black -10px 10px 0px 15px; 80 } 81 82 div#seventh-subtest /* outset with NO spread */ 83 { 84 box-shadow: black -10px -10px 0px 0px; 85 } 86 87 div#eighth-subtest /* outset with a 15px spread */ 88 { 89 box-shadow: black -10px -10px 0px 15px; 90 } 91 </style> 92 93 <div id="first-subtest"></div><div id="second-subtest"></div><div id="third-subtest"></div><div id="fourth-subtest"></div><br> 94 95 <div id="fifth-subtest"></div><div id="sixth-subtest"></div><div id="seventh-subtest"></div><div id="eighth-subtest"></div>