box-shadow-radius-001-ref.html (3334B)
1 <!DOCTYPE html> 2 <title>Box Shadow Border Radius (Inset)</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 .test { 27 width: 60px; 28 height: 60px; 29 top: 20px; 30 left: 20px; 31 } 32 33 .floor > .ref { 34 border: 8px transparent; 35 border-style: solid none none solid; 36 top: 21px; 37 left: 21px; 38 width: 59px; 39 height: 59px; 40 } 41 .trap > .ref { 42 border: 31px silver; 43 border-style: solid none none solid; 44 width: 81px; 45 height: 81px; 46 } 47 48 /* Keep tests consistent by offset - spread = 10 49 Trap radius = 32px + shadow radius (round up) 50 Floor radius = 8px + shadow radius (round down) */ 51 52 .once > .test { 53 border-top-left-radius: 10px; 54 box-shadow: 20px 20px 0 -10px inset; 55 /* shadow radius = 20px */ 56 } 57 .once.floor > .ref { 58 border-top-left-radius: 28px; 59 } 60 .once.trap > .ref { 61 border-top-left-radius: 52px; 62 } 63 64 .twice > .test { 65 border-top-left-radius: 10px; 66 box-shadow: 15px 15px 0 -5px inset; 67 /* shadow radius = 15 */ 68 } 69 .twice.floor > .ref { 70 border-top-left-radius: 23px; 71 } 72 .twice.trap > .ref { 73 border-top-left-radius: 47px; 74 } 75 76 .half > .test { 77 border-top-left-radius: 8px; 78 box-shadow: 26px 26px 0 -16px inset; 79 /* shadow radius = 21px */ 80 } 81 .half.floor > .ref { 82 border-top-left-radius: 29px; 83 } 84 .half.trap > .ref { 85 border-top-left-radius: 53px; 86 } 87 88 .fourth > .test { 89 border-top-left-radius: 5px; 90 box-shadow: 30px 30px 0 -20px inset; 91 /* shadow radius = 14.45 */ 92 } 93 .fourth.floor > .ref { 94 border-top-left-radius: 22px; 95 } 96 .fourth.trap > .ref { 97 border-top-left-radius: 47px; 98 } 99 100 .eighth > .test { 101 border-top-left-radius: 2px; 102 box-shadow: 26px 26px 0 -16px inset; 103 /* shadow radius = 5.28 */ 104 } 105 .eighth.floor > .ref { 106 border-top-left-radius: 12px; 107 } 108 .eighth.trap > .ref { 109 border-top-left-radius: 38px; 110 } 111 112 </style> 113 114 <p>Test passes if there is no red. 115 116 <div class="once floor"> 117 <div class="ref"></div> 118 <div class="test"></div> 119 </div> 120 <div class="once trap"> 121 <div class="test"></div> 122 <div class="ref"></div> 123 </div> 124 125 <div class="twice floor"> 126 <div class="ref"></div> 127 <div class="test"></div> 128 </div> 129 <div class="twice trap"> 130 <div class="test"></div> 131 <div class="ref"></div> 132 </div> 133 134 <div class="half floor"> 135 <div class="ref"></div> 136 <div class="test"></div> 137 </div> 138 <div class="half trap"> 139 <div class="test"></div> 140 <div class="ref"></div> 141 </div> 142 143 <div class="fourth floor"> 144 <div class="ref"></div> 145 <div class="test"></div> 146 </div> 147 <div class="fourth trap"> 148 <div class="test"></div> 149 <div class="ref"></div> 150 </div> 151 152 <div class="eighth floor"> 153 <div class="ref"></div> 154 <div class="test"></div> 155 </div> 156 <div class="eighth trap"> 157 <div class="test"></div> 158 <div class="ref"></div> 159 </div>