3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
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">
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;}
23 border:
5px solid red;
24 border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%
2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%
2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%
2FYEtBGStpoAAAAASUVORK5CYII%
3D)
10 10 repeat;
26 border-image-outset:
7px
3px
5px
9px;
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>
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>