box-shadow-radius-000-ref.html (3543B)
1 <!DOCTYPE html> 2 <title>Box Shadow Border Radius (Outset)</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 4 <!-- This test is complicated, so leaving the reference code identical to the test, minus colors. Please keep them in sync. --> 5 6 <style> 7 body > div { 8 /* Isolate tests from each other */ 9 position: relative; 10 width: 100px; 11 height: 100px; 12 float: left; 13 } 14 div > div { 15 position: absolute; 16 box-sizing: border-box; 17 /* opacity: 0.7; /* uncomment this line for debugging */ 18 } 19 20 .floor > .test { 21 color: silver; 22 } 23 .trap > .test { 24 color: transparent; 25 } 26 27 .floor > .ref { 28 border: solid transparent; 29 width: 58px; 30 height: 58px; 31 top: 22px; 32 left: 22px; 33 } 34 .trap > .ref { 35 border: solid silver; 36 width: 62px; 37 height: 62px; 38 top: 19px; 39 left: 19px; 40 } 41 42 /* Keep tests centered by (top|left)*2 + (width|height) = 100. 43 Keep tests consistent spread + (width|height) = 60 44 Floor = spread - 2px 45 Trap = spread + 2px */ 46 47 .once > .test { 48 border-radius: 10px; 49 box-shadow: 0 0 0 10px; 50 /* shadow radius = 20px */ 51 top: 30px; left: 30px; 52 width: 40px; height: 40px; 53 } 54 .once > .ref { 55 border-radius: 20px; 56 } 57 .once.floor > .ref { 58 border-width: 8px; 59 } 60 .once.trap > .ref { 61 border-width: 12px; 62 } 63 64 .twice > .test { 65 border-radius: 10px; 66 box-shadow: 0 0 0 5px; 67 /* shadow radius = 15px */ 68 top: 25px; left: 25px; 69 width: 50px; height: 50px; 70 } 71 .twice > .ref { 72 border-radius: 15px; 73 } 74 .twice.floor > .ref { 75 border-width: 3px; 76 } 77 .twice.trap > .ref { 78 border-width: 7px; 79 } 80 81 .half > .test { 82 border-radius: 8px; 83 box-shadow: 0 0 0 16px; 84 /* shadow radius = 22px */ 85 top: 36px; left: 36px; 86 width: 28px; height: 28px; 87 } 88 .half > .ref { 89 border-radius: 22px; 90 } 91 .half.floor > .ref { 92 border-width: 14px; 93 } 94 .half.trap > .ref { 95 border-width: 20px; 96 } 97 98 .fourth > .test { 99 border-radius: 5px; 100 box-shadow: 0 0 0 20px; 101 /* shadow radius = 16.56px */ 102 top: 40px; left: 40px; 103 width: 20px; height: 20px; 104 } 105 .fourth > .ref { 106 border-radius: 17px; 107 } 108 .fourth.floor > .ref { 109 border-width: 18px; 110 } 111 .fourth.trap > .ref { 112 border-width: 23px; 113 } 114 115 .eighth > .test { 116 border-radius: 2px; 117 box-shadow: 0 0 0 16px; 118 /* shadow radius = 7.28 */ 119 top: 36px; left: 36px; 120 width: 28px; height: 28px; 121 } 122 .eighth > .ref { 123 border-radius: 7.28px; 124 } 125 .eighth.floor > .ref { 126 border-width: 14px; 127 } 128 .eighth.trap > .ref { 129 border-width: 18px; 130 } 131 132 133 </style> 134 135 <p>Test passes if there is no red. 136 137 <div class="once floor"> 138 <div class="ref"></div> 139 <div class="test"></div> 140 </div> 141 <div class="once trap"> 142 <div class="test"></div> 143 <div class="ref"></div> 144 </div> 145 146 <div class="twice floor"> 147 <div class="ref"></div> 148 <div class="test"></div> 149 </div> 150 <div class="twice trap"> 151 <div class="test"></div> 152 <div class="ref"></div> 153 </div> 154 155 <div class="half floor"> 156 <div class="ref"></div> 157 <div class="test"></div> 158 </div> 159 <div class="half trap"> 160 <div class="test"></div> 161 <div class="ref"></div> 162 </div> 163 164 <div class="fourth floor"> 165 <div class="ref"></div> 166 <div class="test"></div> 167 </div> 168 <div class="fourth trap"> 169 <div class="test"></div> 170 <div class="ref"></div> 171 </div> 172 173 <div class="eighth floor"> 174 <div class="ref"></div> 175 <div class="test"></div> 176 </div> 177 <div class="eighth trap"> 178 <div class="test"></div> 179 <div class="ref"></div> 180 </div>