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