| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- <!DOCTYPE HTML>
- <!--
- Any copyright is dedicated to the Public Domain.
- http://creativecommons.org/publicdomain/zero/1.0/
- -->
- <html>
- <head>
- <title>CSS Test: Testing box-decoration-break:clone with inset box-shadow</title>
- <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613659">
- <meta charset="utf-8">
- <style>
- span { border:3px dashed pink; margin:0 1em; line-height:4em; }
- span {
- font-family:monospace;
- padding:1em 1em;
- background-image: url(green-circle-alpha-32x32.png);
- }
- .o0 {
- border-radius: 12px;
- -webkit-box-shadow: inset 0px 0px 0px 10px #00F;
- box-shadow: inset 0px 0px 0px 10px #00F;
- }
- .o10 {
- border-radius: 12px;
- -webkit-box-shadow: inset 0px 0px 7px 10px #00F;
- box-shadow: inset 0px 0px 7px 10px #00F;
- }
- .o10x {
- border-radius: 12px;
- -webkit-box-shadow: inset 0px 0px 7px 0px #00F;
- box-shadow: inset 0px 0px 7px 0px #00F;
- }
- .p0 {
- border-radius: 12px;
- -webkit-box-shadow: inset 15px 9px 0px 10px #00F;
- box-shadow: inset 15px 9px 0px 10px #00F;
- }
- .p10 {
- border-radius: 12px;
- -webkit-box-shadow: inset 15px 9px 7px 10px #00F;
- box-shadow: inset 15px 9px 7px 10px #00F;
- }
- .p10x {
- border-radius: 12px;
- -webkit-box-shadow: inset 15px 9px 7px 0px #00F;
- box-shadow: inset 15px 9px 7px 0px #00F;
- }
- .so0 {
- border-radius: 0px;
- -webkit-box-shadow: inset 0px 0px 0px 10px #00F;
- box-shadow: inset 0px 0px 0px 10px #00F;
- }
- .so10 {
- border-radius: 0px;
- -webkit-box-shadow: inset 0px 0px 7px 10px #00F;
- box-shadow: inset 0px 0px 7px 10px #00F;
- }
- .so10x {
- border-radius: 0px;
- -webkit-box-shadow: inset 0px 0px 7px 0px #00F;
- box-shadow: inset 0px 0px 7px 0px #00F;
- }
- .sp0 {
- border-radius: 0px;
- -webkit-box-shadow: inset 15px 9px 0px 10px #00F;
- box-shadow: inset 15px 9px 0px 10px #00F;
- }
- .sp10 {
- border-radius: 0px;
- -webkit-box-shadow: inset 15px 9px 7px 10px #00F;
- box-shadow: inset 15px 9px 7px 10px #00F;
- }
- .sp10x {
- border-radius: 0px;
- -webkit-box-shadow: inset 15px 9px 7px 0px #00F;
- box-shadow: inset 15px 9px 7px 0px #00F;
- }
- .m b { visibility:hidden; }
- .m { box-shadow:none; background:none; border-style:solid; border-radius:0; border-color:transparent; }
- .m.o0, .m.o10, .m.o10x, .m.p0, .m.p10, .m.p10x { border-bottom-color: black; }
- </style>
- </head>
- <body style="margin:49px 50px;">
- <div style="position:relative">
- <table border=1 cellpadding=10><tr><td>
- <span class="o0"><b> a </b></span><br><span class="o0"><b> b </b></span><br><span class="o0"><b> c </b></span><br>
- <span class="o10"><b> a </b></span><br><span class="o10"><b> b </b></span><br><span class="o10"><b> c </b></span><br>
- <span class="o10x"><b> a </b></span><br><span class="o10x"><b> b </b></span><br><span class="o10x"><b> c </b></span><br>
- </td><td>
- <span class="p0"><b> a </b></span><br><span class="p0"><b> b </b></span><br></span><span class="p0"><b> c </b></span><br>
- <span class="p10"><b> a </b></span><br><span class="p10"><b> b </b></span><br><span class="p10"><b> c </b></span><br>
- <span class="p10x"><b> a </b></span><br><span class="p10x"><b> b </b></span><br><span class="p10x"><b> c </b></span><br>
- </td><td>
- <span class="so0"><b> a </b></span><br><span class="so0"><b> b </b></span><br><span class="so0"><b> c </b></span><br>
- <span class="so10"><b> a </b></span><br><span class="so10"><b> b </b></span><br><span class="so10"><b> c </b></span><br>
- <span class="so10x"><b> a </b></span><br><span class="so10x"><b> b </b></span><br><span class="so10x"><b> c </b></span><br>
- </td><td>
- <span class="sp0"><b> a </b></span><br><span class="sp0"><b> b </b></span><br><span class="sp0"><b> c </b></span><br>
- <span class="sp10"><b> a </b></span><br><span class="sp10"><b> b </b></span><br><span class="sp10"><b> c </b></span><br>
- <span class="sp10x"><b> a </b></span><br><span class="sp10x"><b> b </b></span><br><span class="sp10x"><b> c </b></span><br>
- </td></tr>
- </table>
- <div style="position:absolute; top:0px;left:0;">
- <!-- mask out 1px of outer edge of the rounded borders at some places due to rounding errors -->
- <table border=1 cellpadding=10><tr><td>
- <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>
- <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>
- <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>
- </td><td>
- <span class="m p0"><b> a </b></span><br><span class="m p0"><b> b </b></span><br></span><span class="m p0"><b> c </b></span><br>
- <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>
- <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>
- </td><td>
- <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>
- <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>
- <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>
- </td><td>
- <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>
- <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>
- <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>
- </td></tr>
- </table>
- </div>
- </div>
- </body>
|
