box-decoration-break-with-outset-box-shadow-1-ref.html (7169B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing box-decoration-break:clone with outset box-shadow</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613659"> 10 <meta charset="utf-8"> 11 <style> 12 span { border:3px dashed pink; line-height:80px; } 13 14 span { 15 font-family:monospace; 16 padding:1em 1em; 17 background-image: url(green-circle-alpha-32x32.png); 18 } 19 .o0 { 20 border-radius: 12px; 21 -webkit-box-shadow: 0px 0px 0px 10px #00F; 22 box-shadow: 0px 0px 0px 10px #00F; 23 } 24 .o10 { 25 border-radius: 12px; 26 -webkit-box-shadow: 0px 0px 7px 10px #00F; 27 box-shadow: 0px 0px 7px 10px #00F; 28 } 29 .o10x { 30 border-radius: 12px; 31 -webkit-box-shadow: 0px 0px 7px 0px #00F; 32 box-shadow: 0px 0px 7px 0px #00F; 33 } 34 .p0 { 35 border-radius: 12px; 36 -webkit-box-shadow: 15px 9px 0px 10px #00F; 37 box-shadow: 15px 9px 0px 10px #00F; 38 } 39 .p10 { 40 border-radius: 12px; 41 -webkit-box-shadow: 15px 9px 7px 10px #00F; 42 box-shadow: 15px 9px 7px 10px #00F; 43 } 44 .p10x { 45 border-radius: 12px; 46 -webkit-box-shadow: 15px 9px 7px 0px #00F; 47 box-shadow: 15px 9px 7px 0px #00F; 48 } 49 .so0 { 50 border-radius: 0px; 51 -webkit-box-shadow: 0px 0px 0px 10px #00F; 52 box-shadow: 0px 0px 0px 10px #00F; 53 } 54 .so10 { 55 border-radius: 0px; 56 -webkit-box-shadow: 0px 0px 7px 10px #00F; 57 box-shadow: 0px 0px 7px 10px #00F; 58 } 59 .so10x { 60 border-radius: 0px; 61 -webkit-box-shadow: 0px 0px 7px 0px #00F; 62 box-shadow: 0px 0px 7px 0px #00F; 63 } 64 .sp0 { 65 border-radius: 0px; 66 -webkit-box-shadow: 15px 9px 0px 10px #00F; 67 box-shadow: 15px 9px 0px 10px #00F; 68 } 69 .sp10 { 70 border-radius: 0px; 71 -webkit-box-shadow: 15px 9px 7px 10px #00F; 72 box-shadow: 15px 9px 7px 10px #00F; 73 } 74 .sp10x { 75 border-radius: 0px; 76 -webkit-box-shadow: 15px 9px 7px 0px #00F; 77 box-shadow: 15px 9px 7px 0px #00F; 78 } 79 80 .m b { visibility:hidden; } 81 .m { box-shadow:none; background:none; border-style:solid; border-radius:0; border-color:transparent; } 82 .m.o0, .m.o10, .m.o10x, .m.p0, .m.p10, .m.p10x { border-bottom-color: black; } 83 </style> 84 </head> 85 <body style="margin:49px 50px;"> 86 87 <div style="position:relative"> 88 <table border=1 cellpadding=50 ><tr><td> 89 <span class="o0"><b> a </b></span><br><span class="o0"><b> b </b></span><br><span class="o0"><b> c </b></span><br> 90 <span class="o10"><b> a </b></span><br><span class="o10"><b> b </b></span><br><span class="o10"><b> c </b></span><br> 91 <span class="o10x"><b> a </b></span><br><span class="o10x"><b> b </b></span><br><span class="o10x"><b> c </b></span><br> 92 </td><td> 93 <span class="p0"><b> a </b></span><br><span class="p0"><b> b </b></span><br><span class="p0"><b> c </b></span><br> 94 <span class="p10"><b> a </b></span><br><span class="p10"><b> b </b></span><br><span class="p10"><b> c </b></span><br> 95 <span class="p10x"><b> a </b></span><br><span class="p10x"><b> b </b></span><br><span class="p10x"><b> c </b></span><br> 96 </td><td> 97 <span class="so0"><b> a </b></span><br><span class="so0"><b> b </b></span><br><span class="so0"><b> c </b></span><br> 98 <span class="so10"><b> a </b></span><br><span class="so10"><b> b </b></span><br><span class="so10"><b> c </b></span><br> 99 <span class="so10x"><b> a </b></span><br><span class="so10x"><b> b </b></span><br><span class="so10x"><b> c </b></span><br> 100 </td><td> 101 <span class="sp0"><b> a </b></span><br><span class="sp0"><b> b </b></span><br><span class="sp0"><b> c </b></span><br> 102 <span class="sp10"><b> a </b></span><br><span class="sp10"><b> b </b></span><br><span class="sp10"><b> c </b></span><br> 103 <span class="sp10x"><b> a </b></span><br><span class="sp10x"><b> b </b></span><br><span class="sp10x"><b> c </b></span><br> 104 </td></tr> 105 </table> 106 107 <div style="position:absolute; top:0px;left:0;"> 108 <!-- mask out 1px of outer edge of the rounded borders at some places due to rounding errors --> 109 <table border=1 cellpadding=50 ><tr><td> 110 <span class="m o0"><b> a </b></span><br><span class="m o0"><b> b </b></span><br><span class="m o0"><b> c </b></span><br> 111 <span class="m o10"><b> a </b></span><br><span class="m o10"><b> b </b></span><br><span class="m o10"><b> c </b></span><br> 112 <span class="m o10x"><b> a </b></span><br><span class="m o10x"><b> b </b></span><br><span class="m o10x"><b> c </b></span><br> 113 </td><td> 114 <span class="m p0"><b> a </b></span><br><span class="m p0"><b> b </b></span><br><span class="m p0"><b> c </b></span><br> 115 <span class="m p10"><b> a </b></span><br><span class="m p10"><b> b </b></span><br><span class="m p10"><b> c </b></span><br> 116 <span class="m p10x"><b> a </b></span><br><span class="m p10x"><b> b </b></span><br><span class="m p10x"><b> c </b></span><br> 117 </td><td> 118 <span class="m so0"><b> a </b></span><br><span class="m so0"><b> b </b></span><br><span class="m so0"><b> c </b></span><br> 119 <span class="m so10"><b> a </b></span><br><span class="m so10"><b> b </b></span><br><span class="m so10"><b> c </b></span><br> 120 <span class="m so10x"><b> a </b></span><br><span class="m so10x"><b> b </b></span><br><span class="m so10x"><b> c </b></span><br> 121 </td><td> 122 <span class="m sp0"><b> a </b></span><br><span class="m sp0"><b> b </b></span><br><span class="m sp0"><b> c </b></span><br> 123 <span class="m sp10"><b> a </b></span><br><span class="m sp10"><b> b </b></span><br><span class="m sp10"><b> c </b></span><br> 124 <span class="m sp10x"><b> a </b></span><br><span class="m sp10x"><b> b </b></span><br><span class="m sp10x"><b> c </b></span><br> 125 </td></tr> 126 </table> 127 </div> 128 129 </div> 130 </body>