3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>Testcase for border-image + box-decoration-break
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=988653">
10 <link rel=
"help" href=
"http://dev.w3.org/csswg/css-break/#break-decoration">
11 <link rel=
"match" href=
"box-decoration-break-border-image-ref.html">
12 <meta charset=
"utf-8">
13 <style type=
"text/css">
15 font-family: DejaVuSansMono
;
16 src: url
(../fonts/DejaVuSansMono.woff),url
(DejaVuSansMono.woff);
18 * { font-family: DejaVuSansMono
; }
21 color:black
; background-color:white
; font-size:16px; padding:0; padding-left:10px; margin:0;
25 border: 5px solid red
;
26 border-image: url
(data:image
/png
;base64
,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD
%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) 10 10 repeat
;
28 border-image-outset: 7px 3px 5px 9px;
43 .unbalanced { column-fill:auto
; }
44 .vbreak { height:66px; width:41px; }
45 .h { width:30px;height:30px; background:grey
; }
46 .m { margin-left:15px; }
47 .col3 .vbreak { height:116px; }
48 .clone { box-decoration-break:clone
; }
49 .slice { box-decoration-break:slice
; }
50 x
{ display:inline-block
; width:31px; height:18px; line-height:1; }
51 y
{ display:inline-block
; width:47px; height:18px; line-height:1; }
52 pos1
{ position:absolute
; top:50px; width:700px; }
53 pos2
{ position:absolute
; top:150px; width:700px; }
54 pos3
{ position:absolute
; top:380px; width:700px; }
55 pos4
{ position:absolute
; top:510px; width:700px; }
59 <pre>box-decoration-break:slice
</pre>
62 <div class=
"columns"><div class=
"b vbreak slice"></div></div>
63 <div class=
"columns col3"><div class=
"b vbreak slice"></div></div>
67 <span class=
"b slice" style=
"border-style:dashed;"><x></x><div class=
"h"></div><y></y></span><span class=
"b slice m" style=
"border-style:dashed;"><x></x><div class=
"h"></div><y></y><div class=
"h"></div><y></y></span>
69 <pre>box-decoration-break:clone
</pre>
73 <div class=
"unbalanced columns"><div class=
"b vbreak clone"></div></div>
74 <div class=
"unbalanced columns col3"><div class=
"b vbreak clone"></div></div>
78 <span class=
"b clone" style=
"border-style:dashed;"><x></x><div class=
"h"></div><y></y></span>
79 <span class=
"b clone m" style=
"border-style:dashed;"><x></x><div class=
"h"></div><y></y><div class=
"h"></div><y></y></span>