box-decoration-break-first-letter.html (3320B)
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>::first-letter with border-radius</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1067088"> 10 <style> 11 html,body { color:black; background-color:white; font-size:24px; } 12 div { line-height:36px; } 13 .b::first-letter { background: blue; } 14 .c::first-letter { box-decoration-break:clone; } 15 .r100p::first-letter { border-radius: 100%; } 16 .r10p::first-letter { border-radius: 10%; } 17 .s1::first-letter { border:1px solid black; } 18 .i::first-letter { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR%2FmAAAAAXNSR0IArs4c6QAAADpJREFUWMPtzgENAAAIA6Br%2F85aQzdIQGVyUCdaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpan1oLQKsBY3S7VU8AAAAASUVORK5CYII%3D); } 19 .shadowi::first-letter { box-shadow: inset 15px 9px 7px 0px #00F; } 20 .shadowo::first-letter { box-shadow: 0px 0px 7px 0px #00F;} 21 .shadowio::first-letter { box-shadow: inset 15px 9px 7px 0px #00F, 0px 0px 7px 0px #00F;} 22 .bi::first-letter { 23 border: 5px solid red; 24 border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) 10 10 repeat; 25 background: pink; 26 border-image-outset: 7px 3px 5px 9px; 27 } 28 </style> 29 </head> 30 <body> 31 <table cellpadding="10"><tr><td> 32 <div class="b r100p">First-letter</div> 33 <div class="b r10p">First-letter</div> 34 <div class="b s1 r100p">First-letter</div> 35 <div class="b s1 r10p">First-letter</div> 36 <div class="shadowo r100p">First-letter</div> 37 <div class="shadowo s1 r10p">First-letter</div> 38 <div class="shadowi s1 r100p">First-letter</div> 39 <div class="shadowi r10p">First-letter</div> 40 <div class="shadowio r100p">First-letter</div> 41 <div class="shadowio s1 r10p">First-letter</div> 42 <div class="s1 r100p">First-letter</div> 43 <div class="s1 r10p">First-letter</div> 44 <div class="i r100p">First-letter</div> 45 <div class="i r10p">First-letter</div> 46 <div class="i s1 r100p">First-letter</div> 47 <div class="i s1 r10p">First-letter</div> 48 <div class="bi">First-letter</div> 49 </td> 50 <td> 51 <!-- box-decoration-break:clone should render the same for ::first-letter --> 52 <div class="c b r100p">First-letter</div> 53 <div class="c b r10p">First-letter</div> 54 <div class="c b s1 r100p">First-letter</div> 55 <div class="c b s1 r10p">First-letter</div> 56 <div class="c shadowo r100p">First-letter</div> 57 <div class="c shadowo s1 r10p">First-letter</div> 58 <div class="c shadowi s1 r100p">First-letter</div> 59 <div class="c shadowi r10p">First-letter</div> 60 <div class="c shadowio r100p">First-letter</div> 61 <div class="c shadowio s1 r10p">First-letter</div> 62 <div class="c s1 r100p">First-letter</div> 63 <div class="c s1 r10p">First-letter</div> 64 <div class="c i r100p">First-letter</div> 65 <div class="c i r10p">First-letter</div> 66 <div class="c i s1 r100p">First-letter</div> 67 <div class="c i s1 r10p">First-letter</div> 68 <div class="c bi">First-letter</div> 69 </td> 70 </tr></table> 71 </body> 72 </html>