diff options
Diffstat (limited to 'layout/reftests/css-break')
28 files changed, 1953 insertions, 0 deletions
diff --git a/layout/reftests/css-break/1405443-ref.html b/layout/reftests/css-break/1405443-ref.html new file mode 100644 index 0000000000..096dd6c3ea --- /dev/null +++ b/layout/reftests/css-break/1405443-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> + #block { page-break-inside: avoid; } + span { padding-left: 1px; } + #columns { columns: 0px; column-gap: 0; ) +</style> +<body> + There word 'Hello' should appear below. + <div id="columns"> + H + <div id="block"> + <span> <!-- Just need an inline with nonzero width --> + <div style="padding-left: 1ch"> ello</div> + </span> + </div> + </div> +</body> diff --git a/layout/reftests/css-break/1405443.html b/layout/reftests/css-break/1405443.html new file mode 100644 index 0000000000..8fb19ffb1a --- /dev/null +++ b/layout/reftests/css-break/1405443.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> + #float { page-break-inside: avoid; float: left } + span { padding-left: 1px; } + #columns { columns: 0px; column-gap: 0; ) +</style> +<body> + There word 'Hello' should appear below. + <div id="columns"> + H + <div id="float"> + <span> <!-- Just need an inline with nonzero width --> + <div style="padding-left: 1ch"> ello</div> + </span> + </div> + </div> +</body> diff --git a/layout/reftests/css-break/box-decoration-break-1-ref.html b/layout/reftests/css-break/box-decoration-break-1-ref.html new file mode 100644 index 0000000000..431c499a1f --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-1-ref.html @@ -0,0 +1,67 @@ +<!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</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613659"> + <meta charset="utf-8"> +<style> + +span { + line-height:4em; + font-family:monospace; + padding: 3px 5px 7px 11px; + background-color: #0F0; + margin: 13px 17px 19px 23px; + border-left:13px dashed pink; + border-top:7px dashed blue; + border-right:3px dashed black; + border-bottom:1px dashed blue; +} +.o0 { + border-radius: 17px; +} +.o10 { + border-radius: 17px; + margin-left:0; +} +.o10x { + border-radius: 17px; + padding-right:0; +} +.so0 { + border-radius: 0px; +} +.so10 { + border-radius: 0px; + margin-right:0; +} +.so10x { + border-radius: 0px; + padding-left:0; +} +</style> +</head> +<body style="margin:10px"> + +<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></td> +<td><span class="o10"><b> a </b></span><br><span class="o10"><b> b </b></span><br><span class="o10"><b> c </b></span></td> +<td><span class="o10x"><b> a </b></span><br><span class="o10x"><b> b </b></span><br><span class="o10x"><b> c </b></span></td> +</tr> +</table> + +<br> + +<table border=1 cellpadding=10><tr> +<td><span class="so0"><b> a </b></span><br><span class="so0"><b> b </b></span><br><span class="so0"><b> c </b></span></td> +<td><span class="so10"><b> a </b></span><br><span class="so10"><b> b </b></span><br><span class="so10"><b> c </b></span></td> +<td><span class="so10x"><b> a </b></span><br><span class="so10x"><b> b </b></span><br><span class="so10x"><b> c </b></span></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-1.html b/layout/reftests/css-break/box-decoration-break-1.html new file mode 100644 index 0000000000..e0326ccc1f --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-1.html @@ -0,0 +1,71 @@ +<!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</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613659"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="match" href="box-decoration-break-1-ref.html"> + <meta charset="utf-8"> +<style> + +span { + box-decoration-break:clone; + + line-height:4em; + font-family:monospace; + padding: 3px 5px 7px 11px; + background-color: #0F0; + margin: 13px 17px 19px 23px; + border-left:13px dashed pink; + border-top:7px dashed blue; + border-right:3px dashed black; + border-bottom:1px dashed blue; +} +.o0 { + border-radius: 17px; +} +.o10 { + border-radius: 17px; + margin-left:0; +} +.o10x { + border-radius: 17px; + padding-right:0; +} +.so0 { + border-radius: 0px; +} +.so10 { + border-radius: 0px; + margin-right:0; +} +.so10x { + border-radius: 0px; + padding-left:0; +} +</style> +</head> +<body style="margin:10px"> + +<table border=1 cellpadding=10><tr> +<td><span class="o0"><b> a <br> b <br> c </b></span></td> +<td><span class="o10"><b> a <br> b <br> c </b></span></td> +<td><span class="o10x"><b> a <br> b <br> c </b></span></td> +</tr> +</table> + +<br> + +<table border=1 cellpadding=10><tr> +<td><span class="so0"><b> a <br> b <br> c </b></span><br></td> +<td><span class="so10"><b> a <br> b <br> c </b></span><br></td> +<td><span class="so10x"><b> a <br> b <br> c </b></span><br></td> +</tr> +</table> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-block-border-padding-ref.html b/layout/reftests/css-break/box-decoration-break-block-border-padding-ref.html new file mode 100644 index 0000000000..2720386c11 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-block-border-padding-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Testcase for box-decoration-break:clone, block border+padding</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=988653"> + <meta charset="utf-8"> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:10px; margin:0; + } + + .inner { + border: 5px dashed blue; + height: 33px; + width: 40px; + background: lime; + background-clip: content-box; + margin-bottom: 12px; + } + + .columns { + columns: 3; + width: 250px; + height: 50px; + background: grey; + margin-top: 2px; + } + + .unbalanced { + column-fill: auto; + } + + .inner.p { height:31px; padding:1px 3px 5px 7px; } + .unbalanced .inner { height:40px; margin-bottom: 0px;} + .unbalanced .inner.p { height:34px; } + </style> +</head> +<body> + +<div class="columns"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div> +<div class="columns unbalanced"><div class="inner"></div><div class="inner"></div><div class="inner" style="height:19px"></div></div> +<div class="columns"><div class="p inner"></div><div class="p inner"></div><div class="p inner"></div></div> +<div class="columns unbalanced"><div class="p inner"></div><div class="p inner"></div><div class="p inner" style="height:25px"></div></div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-block-border-padding.html b/layout/reftests/css-break/box-decoration-break-block-border-padding.html new file mode 100644 index 0000000000..73f3e9503c --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-block-border-padding.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Testcase for box-decoration-break:clone, block border+padding</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=988653"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="match" href="box-decoration-break-block-border-padding-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:10px; margin:0; + } + + .inner { + box-decoration-break: clone; + border: 5px dashed blue; + height: 99px; + width: 40px; + background: lime; + background-clip: content-box; + } + + .columns { + columns: 3; + width: 250px; + height: 50px; + background: grey; + margin-top: 2px; + } + + .unbalanced { + column-fill: auto; + } + + .inner.p { height:93px; padding:1px 3px 5px 7px; } + </style> +</head> +<body> + +<div class="columns"><div class="inner"></div></div> +<div class="columns unbalanced"><div class="inner"></div></div> +<div class="columns"><div class="p inner"></div></div> +<div class="columns unbalanced"><div class="p inner"></div></div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-block-margin-ref.html b/layout/reftests/css-break/box-decoration-break-block-margin-ref.html new file mode 100644 index 0000000000..cbc8e3c42d --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-block-margin-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Testcase for box-decoration-break:clone, block margin</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1025669"> + <meta charset="utf-8"> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:10px; margin:0; + } + + .inner { + border: 5px dashed blue; + width: 40px; + background: lime; + background-clip: padding-box; + margin: 0px 3px 15px 1px; + position: relative; + } + + .inner.first { + top: 7px; + } + + .columns { + columns: 3; + width: 250px; + height: 50px; + background: grey; + } + + .outer { + margin-top: 2px; + height: 50px; + width: 250px; + background: grey; + } + + .unbalanced { + column-fill: auto; + } + + #t2 .inner { border-style:none; height: 38px; } + </style> +</head> +<body> + +<div class="outer"><div class="columns"><div class="inner first" style="height:22px;" ></div><div class="inner" style="height:29px;"></div><div class="inner" style="height:28px;"></div></div></div> +<div class="outer"><div class="columns unbalanced"><div class="inner first" style="height:33px;"></div><div class="inner" style="height:40px;"></div><div class="inner" style="height:6px"></div></div></div> +<div class="outer"><div class="columns"><div class="inner first" style="height:25px;"></div><div class="inner" style="height:32px"></div><div class="inner" style="height:30px"></div></div></div> +<div class="outer"><div class="columns unbalanced"><div class="inner first" style="height:33px;"></div><div class="inner" style="height:40px;"></div><div class="inner" style="height:11px"></div></div></div> + +<div id="t2"> +<div class="outer"><div class="columns unbalanced"><div class="inner first" style="height:43px"></div><div class="inner" style="height:36px"></div></div></div> +<div class="outer"><div class="columns unbalanced"><div style="height:4px"></div><div class="inner first" style="height:39px"></div><div class="inner" style="height:40px"></div></div></div> +<div class="outer"><div class="columns unbalanced"><div class="inner first" style="height:43px"></div><div class="inner" style="height:36px"></div></div></div> +<div class="outer"><div class="columns unbalanced"><div style="height:4px"></div><div class="inner first" style="height:39px"></div><div class="inner" style="height:40px"></div></div></div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-block-margin.html b/layout/reftests/css-break/box-decoration-break-block-margin.html new file mode 100644 index 0000000000..5c3b7e2d41 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-block-margin.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Testcase for box-decoration-break:clone, block margin</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1025669"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="match" href="box-decoration-break-block-margin-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:10px; margin:0; + } + + .inner { + box-decoration-break: clone; + border: 5px dashed blue; + margin: 7px 3px 5px 1px; + height: 79px; + width: 40px; + background: lime; + background-clip: content-box; + } + + .columns { + columns: 3; + width: 250px; + height: 50px; + background: grey; + margin-top: 2px; + } + + .unbalanced { + column-fill: auto; + } + + .inner.p { height:87px; } + .inner.p2 { height:84px; } + + .p3, .p4, .p5, .p6 { border-style:none; } + .inner div { height:16px; } + .inner.p3 div { margin: 3px; } + .inner.p4 div { margin: 11px 3px 5px 1px; } + .inner.p5 div { box-decoration-break: clone; margin: 3px; } + .inner.p6 div { box-decoration-break: clone; margin: 11px 3px 5px 1px; } + </style> +</head> +<body> + +<div class="columns"><div class="inner"></div></div> +<div class="columns unbalanced"><div class="inner"></div></div> +<div class="columns"><div class="p inner"></div></div> +<div class="columns unbalanced"><div class="p2 inner"></div></div> + +<!-- margin collapsing with innermost DIV --> +<div class="columns unbalanced"><div class="p3 inner"><div></div></div></div> +<div class="columns unbalanced"><div class="p4 inner"><div></div></div></div> +<div class="columns unbalanced"><div class="p5 inner"><div></div></div></div> +<div class="columns unbalanced"><div class="p6 inner"><div></div></div></div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-border-image-ref.html b/layout/reftests/css-break/box-decoration-break-border-image-ref.html new file mode 100644 index 0000000000..98d8e75ba9 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-border-image-ref.html @@ -0,0 +1,137 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Testcase for border-image + box-decoration-break</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=988653"> + <meta charset="utf-8"> + <style type="text/css"> +@font-face { + font-family: DejaVuSansMono; + src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff); +} +* { font-family: DejaVuSansMono; } + +html,body { + color:black; background-color:white; font-size:16px; padding:0; padding-left:10px; margin:0; +} + +b1,b2,b3,b4,b5,b6,b7,b8,b9,b10,.b.clone { + border: 5px solid red; + border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) 10 10 repeat; + border-image-outset: 7px 3px 5px 9px; +} +.b { + border: 5px solid transparent; + background: pink; +} +.b.clone { + background: pink; + height:28px; +} +.col3 .b.clone { + height:32px; +} + +.columns { + columns: 2; + width: 200px; + height: 50px; + background: grey; + margin-right: 20px; + margin-bottom: 20px; + float:left; +} +.col3 { + columns: 3; +} +.unbalanced { column-fill:auto; } +.vbreak { height:66px; width:41px; } +.unbalanced .vbreak { height:40px; } +.h { width:30px;height:30px; background:grey; } +.m { margin-left:15px; } +.col3 .vbreak { height:116px; } +.unbalanced.col3 .vbreak { height:40px; } +x { display:inline-block; width:31px; height:18px; line-height:1; } +y { display:inline-block; width:47px; height:18px; line-height:1; } +pos1 { position:absolute; top:50px; width:700px; } +pos2 { position:absolute; top:150px; width:700px; } +pos3 { position:absolute; top:380px; width:700px; } +pos4 { position:absolute; top:510px; width:700px; } + +b1,b2,b3,b4,b5,b6,b7,b8,b9,b10,c1,c2,c3,c4,c5,c6,c7,c8,c9,c10,m1,m2,m3,m4,m5,m6,m7,m8,m9,m10 {position:absolute;} +c1,c2,c3,c4,c5,c6,c7,c8,c9,c10 {position:absolute; overflow:hidden; z-index:1;} + + +b1 { top:50px; left:20px; height:66px; width:41px; } +c1 { top:0; left:0; height:88px; width:200px; } + +b2 { top:-38px; left:128px; height:66px; width:41px; } +c2 { top:50px; left:0; height:61px; width:200px; } + +b3 { top:50px; left:240px; height:116px; width:41px; } +c3 { top:0; left:0; height:92px; width:600px; } + +b4 { top:-42px; left:312px; height:116px; width:41px; } +c4 { top:50px; left:0; height:42px; width:600px; } + +b5 { top:-84px; left:384px; height:116px; width:41px; } +c5 { top:50px; left:0; height:100px; width:600px; } + +b6 { top:148px; left:20px; height:19px; z-index:1; } +m6 { top:135px; left:56px; height:55px; width:100px; background:white; z-index:2; } + +b7 { top:30px; left:-36px; width:78px; height:19px; } +c7 { top:170px; left:20px; height:300px; width:200px; } + +b8 { top:30px; left:67px; width:125px; height:19px; } +m8 { top:15px; left:103px; width:125px; height:55px; background:white; } +c8 { top:170px; left:20px; height:300px; width:600px; } + +b9 { top:30px; left:-36px; width:125px; height:19px; } +c9 { top:222px; left:20px; height:300px; width:47px; } + +b10 { top:30px; left:-83px; width:125px; height:19px; } +c10 { top:274px; left:20px; height:300px; width:156px; } + + </style> +</head> +<body> +<c1><b1></b1></c1> +<c2><b2></b2></c2> +<c3><b3></b3></c3> +<c4><b4></b4></c4> +<c5><b5></b5></c5> +<b6><x></x><y></y><br></b6><m6></m6> +<c7><b7><x></x><y></y></b7></c7> +<c8><b8><x></x><y></y><y></y></b8><m8></m8></c8> +<c9><b9><x></x><y></y><y></y></b9></c9> +<c10><b10><x></x><y></y><y></y></b10></c10> +<pre>box-decoration-break:slice</pre> + +<pos1> +<div class="columns"><div class="b vbreak slice"></div></div> +<div class="columns col3"><div class="b vbreak slice"></div></div> +</pos1> + +<pos2> +<span class="b slice"><x></x><div class="h"></div><y></y></span><span class="b slice m"><x></x><div class="h"></div><y></y><div class="h"></div><y></y></span> + +<pre>box-decoration-break:clone</pre> +</pos2> + +<pos3> +<div class="unbalanced columns"><div class="b vbreak clone"></div><div class="b vbreak clone" style="height:26px"></div></div> +<div class="unbalanced columns col3"><div class="b vbreak clone"></div><div class="b vbreak clone"></div><div class="b vbreak clone" style="height:36px"></div></div> +</pos3> + +<pos4> +<span class="b clone"><x></x></span><div class="h"></div><span class="b clone"><y></y></span> +<span class="b clone m"><x></x></span><div class="h"></div><span class="b clone m"><y></y></span><div class="h"></div><span class="b clone m"><y></y></span> +</pos4> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-border-image.html b/layout/reftests/css-break/box-decoration-break-border-image.html new file mode 100644 index 0000000000..31d8dabb66 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-border-image.html @@ -0,0 +1,83 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>Testcase for border-image + box-decoration-break</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=988653"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="match" href="box-decoration-break-border-image-ref.html"> + <meta charset="utf-8"> + <style type="text/css"> +@font-face { + font-family: DejaVuSansMono; + src: url(../fonts/DejaVuSansMono.woff),url(DejaVuSansMono.woff); +} +* { font-family: DejaVuSansMono; } + +html,body { + color:black; background-color:white; font-size:16px; padding:0; padding-left:10px; margin:0; +} + +.b { + border: 5px solid red; + border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) 10 10 repeat; + background: pink; + border-image-outset: 7px 3px 5px 9px; +} + +.columns { + columns: 2; + width: 200px; + height: 50px; + background: grey; + margin-right: 20px; + margin-bottom: 20px; + float:left; +} +.col3 { + columns: 3; +} +.unbalanced { column-fill:auto; } +.vbreak { height:66px; width:41px; } +.h { width:30px;height:30px; background:grey; } +.m { margin-left:15px; } +.col3 .vbreak { height:116px; } +.clone { box-decoration-break:clone; } +.slice { box-decoration-break:slice; } +x { display:inline-block; width:31px; height:18px; line-height:1; } +y { display:inline-block; width:47px; height:18px; line-height:1; } +pos1 { position:absolute; top:50px; width:700px; } +pos2 { position:absolute; top:150px; width:700px; } +pos3 { position:absolute; top:380px; width:700px; } +pos4 { position:absolute; top:510px; width:700px; } + </style> +</head> +<body> +<pre>box-decoration-break:slice</pre> + +<pos1> +<div class="columns"><div class="b vbreak slice"></div></div> +<div class="columns col3"><div class="b vbreak slice"></div></div> +</pos1> + +<pos2> +<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> + +<pre>box-decoration-break:clone</pre> +</pos2> + +<pos3> +<div class="unbalanced columns"><div class="b vbreak clone"></div></div> +<div class="unbalanced columns col3"><div class="b vbreak clone"></div></div> +</pos3> + +<pos4> +<span class="b clone" style="border-style:dashed;"><x></x><div class="h"></div><y></y></span> +<span class="b clone m" style="border-style:dashed;"><x></x><div class="h"></div><y></y><div class="h"></div><y></y></span> +</pos4> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-bug-1235152-ref.html b/layout/reftests/css-break/box-decoration-break-bug-1235152-ref.html new file mode 100644 index 0000000000..ec53798020 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-bug-1235152-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1235152</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font: 16px monospace; +} + +div { + float: left; + background: #ccc; + clear: both; + padding-left: 10px; +} + +.rtl { + direction: rtl; +} +.pr { + padding-left: 0; + padding-right: 13px; +} +.plr { + padding-right: 13px; +} + +</style> +</head> +<body> + +<div class="rtl"> + <span>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl pr"> + <span>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl plr"> + <span>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl" style="width:190px"> + <span>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl pr" style="width:187px"> + <span>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl plr" style="width:177px"> + <span>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-bug-1235152.html b/layout/reftests/css-break/box-decoration-break-bug-1235152.html new file mode 100644 index 0000000000..7cb9fc9234 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-bug-1235152.html @@ -0,0 +1,61 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1235152</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font: 16px monospace; +} + +div { + float: left; + background: #ccc; + clear: both; +} + +.rtl { + direction: rtl; +} + +span { + box-decoration-break: clone; + padding-left: 10px; +} +.pr { + padding-left: 0; + padding-right: 13px; +} +.plr { + padding-right: 13px; +} + +</style> +</head> +<body> + +<div class="rtl"> + <span>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl"> + <span class="pr">לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl"> + <span class="plr">לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl" style="width:200px"> + <span>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl" style="width:200px"> + <span class="pr">לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +<div class="rtl" style="width:200px"> + <span class="plr">לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית קונסקטורר</span> +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-bug-1249913-ref.html b/layout/reftests/css-break/box-decoration-break-bug-1249913-ref.html new file mode 100644 index 0000000000..cc9c93f862 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-bug-1249913-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: 'box-decoration-break' with child overflow</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1249913"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +p { height: 27px; width: 100px; margin:0; background:lime; } +.border { border:3px solid black; } +.outline { outline:3px solid brown; } +.shadow { box-shadow: 2px 2px 0 0 blue; } + +.columns { + -ms-columns: 2; + -webkit-columns: 2; + columns: 2; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + width:500px; + height:30px; + border:solid silver; + margin: 2px 0; +} + +.columns div { height: 10px; } + +x { height: 27px; width: 100px; margin:0; background:lime; display:block; } +y { height: 23px; width: 100px; margin:0; background:lime; display:block; } + +</style> +</head> +<body> + +<div class="columns"><div class="border"><p></p><y></y></div></div> +<div class="columns"><div class="outline"><p style="height:30px"></p><y style="height:20px"></y></div></div> +<div class="columns"><div class="shadow"><p style="height:30px"></p><y style="height:20px"></y></div></div> +<div class="columns"><div class="border outline"><p></p><y></y></div></div> +<div class="columns"><div class="border shadow"><p></p><y></y></div></div> + +<div class="columns"><div class="border"><x></x><y></y></div></div> +<div class="columns"><div class="outline"><x></x><y></y></div></div> +<div class="columns"><div class="shadow"><x></x><y></y></div></div> +<div class="columns"><div class="border outline"><x></x><y></y></div></div> +<div class="columns"><div class="border shadow"><x></x><y></y></div></div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-bug-1249913.html b/layout/reftests/css-break/box-decoration-break-bug-1249913.html new file mode 100644 index 0000000000..adba4bb125 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-bug-1249913.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>'box-decoration-break' with child overflow</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1249913"> + <link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration"> + <link rel="match" href="box-decoration-break-bug-1249913-ref.html"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +p { height: 50px; width: 100px; margin:0; background:lime; } +.clone { height: 10px; box-decoration-break:clone; } +.border { border:3px solid black; } +.outline { outline:3px solid brown; } +.shadow { box-shadow: 2px 2px 0 0 blue; } + +.columns { + -ms-columns: 2; + -webkit-columns: 2; + columns: 2; + -ms-column-fill: auto; + -webkit-column-fill: auto; + column-fill: auto; + width:500px; + height:30px; + border:solid silver; + margin: 2px 0; +} + +.columns div { height: 10px; } + +</style> +</head> +<body> + +<div class="columns"><div class="clone border"><p></p></div></div> +<div class="columns"><div class="clone outline"><p></p></div></div> +<div class="columns"><div class="clone shadow"><p></p></div></div> +<div class="columns"><div class="clone border outline"><p></p></div></div> +<div class="columns"><div class="clone border shadow"><p></p></div></div> + +<div class="columns"><div class="border"><p></p></div></div> +<div class="columns"><div class="outline"><p></p></div></div> +<div class="columns"><div class="shadow"><p></p></div></div> +<div class="columns"><div class="border outline"><p></p></div></div> +<div class="columns"><div class="border shadow"><p></p></div></div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-first-letter-ref.html b/layout/reftests/css-break/box-decoration-break-first-letter-ref.html new file mode 100644 index 0000000000..4875b4716e --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-first-letter-ref.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>::first-letter with border-radius</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1067088"> +<style> +html,body { color:black; background-color:white; font-size:24px; } +div { line-height:36px; } +.b { background: blue; } +.r100p { border-radius: 100%; } +.r10p { border-radius: 10%; } +.s1 { border:1px solid black; } +.i { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR%2FmAAAAAXNSR0IArs4c6QAAADpJREFUWMPtzgENAAAIA6Br%2F85aQzdIQGVyUCdaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpan1oLQKsBY3S7VU8AAAAASUVORK5CYII%3D); } +.shadowi { box-shadow: inset 15px 9px 7px 0px #00F; } +.shadowo { box-shadow: 0px 0px 7px 0px #00F;} +.shadowio { box-shadow: inset 15px 9px 7px 0px #00F, 0px 0px 7px 0px #00F;} +.bi { + border: 5px solid red; + border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) 10 10 repeat; + background: pink; + border-image-outset: 7px 3px 5px 9px; +} +</style> +</head> +<body> +<table cellpadding="10"><tr><td> + <div><span class="b r100p">F</span>irst-letter</div> + <div><span class="b r10p">F</span>irst-letter</div> + <div><span class="b s1 r100p">F</span>irst-letter</div> + <div><span class="b s1 r10p">F</span>irst-letter</div> + <div><span class="shadowo r100p">F</span>irst-letter</div> + <div><span class="shadowo s1 r10p">F</span>irst-letter</div> + <div><span class="shadowi s1 r100p">F</span>irst-letter</div> + <div><span class="shadowi r10p">F</span>irst-letter</div> + <div><span class="shadowio r100p">F</span>irst-letter</div> + <div><span class="shadowio s1 r10p">F</span>irst-letter</div> + <div><span class="s1 r100p">F</span>irst-letter</div> + <div><span class="s1 r10p">F</span>irst-letter</div> + <div><span class="i r100p">F</span>irst-letter</div> + <div><span class="i r10p">F</span>irst-letter</div> + <div><span class="i s1 r100p">F</span>irst-letter</div> + <div><span class="i s1 r10p">F</span>irst-letter</div> + <div><span class="bi">F</span>irst-letter</div> +</td> +<td> + <div><span class="b r100p">F</span>irst-letter</div> + <div><span class="b r10p">F</span>irst-letter</div> + <div><span class="b s1 r100p">F</span>irst-letter</div> + <div><span class="b s1 r10p">F</span>irst-letter</div> + <div><span class="shadowo r100p">F</span>irst-letter</div> + <div><span class="shadowo s1 r10p">F</span>irst-letter</div> + <div><span class="shadowi s1 r100p">F</span>irst-letter</div> + <div><span class="shadowi r10p">F</span>irst-letter</div> + <div><span class="shadowio r100p">F</span>irst-letter</div> + <div><span class="shadowio s1 r10p">F</span>irst-letter</div> + <div><span class="s1 r100p">F</span>irst-letter</div> + <div><span class="s1 r10p">F</span>irst-letter</div> + <div><span class="i r100p">F</span>irst-letter</div> + <div><span class="i r10p">F</span>irst-letter</div> + <div><span class="i s1 r100p">F</span>irst-letter</div> + <div><span class="i s1 r10p">F</span>irst-letter</div> + <div><span class="bi">F</span>irst-letter</div> +</td> +</tr></table> +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-first-letter.html b/layout/reftests/css-break/box-decoration-break-first-letter.html new file mode 100644 index 0000000000..16853af338 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-first-letter.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>::first-letter with border-radius</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1067088"> +<style> +html,body { color:black; background-color:white; font-size:24px; } +div { line-height:36px; } +.b::first-letter { background: blue; } +.c::first-letter { box-decoration-break:clone; } +.r100p::first-letter { border-radius: 100%; } +.r10p::first-letter { border-radius: 10%; } +.s1::first-letter { border:1px solid black; } +.i::first-letter { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR%2FmAAAAAXNSR0IArs4c6QAAADpJREFUWMPtzgENAAAIA6Br%2F85aQzdIQGVyUCdaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpaWlpan1oLQKsBY3S7VU8AAAAASUVORK5CYII%3D); } +.shadowi::first-letter { box-shadow: inset 15px 9px 7px 0px #00F; } +.shadowo::first-letter { box-shadow: 0px 0px 7px 0px #00F;} +.shadowio::first-letter { box-shadow: inset 15px 9px 7px 0px #00F, 0px 0px 7px 0px #00F;} +.bi::first-letter { + border: 5px solid red; + border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD%2FgAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVR42u3bwQ0AIAgEwcOmtXttgScmsxWQCTyp3EysJo61IliwYMGCBUuwYMGCBQuWYMGCBQsWLMGCBQsWLFiCBQsWLFiwBAsWLFiwYAkWLFiwYMESLFiwYMGCpXaVka%2BsO8dmOUNYggULFixYsAQLFixYsGAJFixYsGDBEixYsGDBgiVYsGDBggVLsGDBggULlmDBggULFizBggUL1t89N%2FYEtBGStpoAAAAASUVORK5CYII%3D) 10 10 repeat; + background: pink; + border-image-outset: 7px 3px 5px 9px; +} +</style> +</head> +<body> +<table cellpadding="10"><tr><td> + <div class="b r100p">First-letter</div> + <div class="b r10p">First-letter</div> + <div class="b s1 r100p">First-letter</div> + <div class="b s1 r10p">First-letter</div> + <div class="shadowo r100p">First-letter</div> + <div class="shadowo s1 r10p">First-letter</div> + <div class="shadowi s1 r100p">First-letter</div> + <div class="shadowi r10p">First-letter</div> + <div class="shadowio r100p">First-letter</div> + <div class="shadowio s1 r10p">First-letter</div> + <div class="s1 r100p">First-letter</div> + <div class="s1 r10p">First-letter</div> + <div class="i r100p">First-letter</div> + <div class="i r10p">First-letter</div> + <div class="i s1 r100p">First-letter</div> + <div class="i s1 r10p">First-letter</div> + <div class="bi">First-letter</div> +</td> +<td> + <!-- box-decoration-break:clone should render the same for ::first-letter --> + <div class="c b r100p">First-letter</div> + <div class="c b r10p">First-letter</div> + <div class="c b s1 r100p">First-letter</div> + <div class="c b s1 r10p">First-letter</div> + <div class="c shadowo r100p">First-letter</div> + <div class="c shadowo s1 r10p">First-letter</div> + <div class="c shadowi s1 r100p">First-letter</div> + <div class="c shadowi r10p">First-letter</div> + <div class="c shadowio r100p">First-letter</div> + <div class="c shadowio s1 r10p">First-letter</div> + <div class="c s1 r100p">First-letter</div> + <div class="c s1 r10p">First-letter</div> + <div class="c i r100p">First-letter</div> + <div class="c i r10p">First-letter</div> + <div class="c i s1 r100p">First-letter</div> + <div class="c i s1 r10p">First-letter</div> + <div class="c bi">First-letter</div> +</td> +</tr></table> +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-with-bidi-ref.html b/layout/reftests/css-break/box-decoration-break-with-bidi-ref.html new file mode 100644 index 0000000000..976d5b5ce9 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-with-bidi-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testing box-decoration-break with bidi resolution</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1210877"> + <style type="text/css"> + +.test { + box-decoration-break: slice; + background: black; +} +.p { + padding:11px 3px 5px 7px; +} +.b { + border: 1px solid blue; + border-width:3px 5px 7px 11px; +} +.m { + margin:5px 7px 11px 3px; +} +.direction { + direction: rtl; +} + +x {display:inline-block; width:20px; height:10px; background:lime; } +y {display:inline-block; width:30px; height:1px; background:lime; } +d {display:inline-block; border:10px solid red } + </style> +</head> +<body> + +<div style="float:left; width: 100px;"> +<span class="test p"><x></x></span><br> +<span class="test p"><y></y></span><br><br><br> +<span class="test b"><x></x></span><br> +<span class="test b"><y></y></span><br><br><br> +<span class="test p b"><x></x></span><br> +<span class="test p b"><y></y></span><br><br><br> +<span class="test m"><x></x></span><br> +<span class="test m"><y></y></span><br><br><br> +<span class="test p m"><x></x></span><br> +<span class="test p m"><y></y></span><br><br><br> +<span class="test b m"><x></x></span><br> +<span class="test b m"><y></y></span><br><br><br> +<span class="test p b m"><x></x></span><br> +<span class="test p b m"><y></y></span><br><br><br> + + +</div><div style="float:left; width: 100px; text-align:right"> + +<span class="test p"><y></y></span><br> +<span class="test p"><x></x></span><br><br><br> +<span class="test b"><y></y></span><br> +<span class="test b"><x></x></span><br><br><br> +<span class="test p b"><y></y></span><br> +<span class="test p b"><x></x></span><br><br><br> +<span class="test m"><y></y></span><br> +<span class="test m"><x></x></span><br><br><br> +<span class="test p m"><y></y></span><br> +<span class="test p m"><x></x></span><br><br><br> +<span class="test b m"><y></y></span><br> +<span class="test b m"><x></x></span><br><br><br> +<span class="test p b m"><y></y></span><br> +<span class="test p b m"><x></x></span><br><br><br> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-with-bidi.html b/layout/reftests/css-break/box-decoration-break-with-bidi.html new file mode 100644 index 0000000000..1dec2105f6 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-with-bidi.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testing box-decoration-break with bidi resolution</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1210877"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="match" href="box-decoration-break-with-bidi-ref.html"> + <style type="text/css"> + +.test { + box-decoration-break: clone; + background: black; +} +.p { + padding:11px 3px 5px 7px; +} +.b { + border: 1px solid blue; + border-width:3px 5px 7px 11px; +} +.m { + margin:5px 7px 11px 3px; +} +.direction { + direction: rtl; +} + +x {display:inline-block; width:20px; height:10px; background:lime; } +y {display:inline-block; width:30px; height:1px; background:lime; } +d {display:inline-block; border:10px solid red } + </style> +</head> +<body> + +<div style="float:left; width: 100px;"> +<span class="test p"><x></x><br><y></y></span><br><br><br> +<span class="test b"><x></x><br><y></y></span><br><br><br> +<span class="test p b"><x></x><br><y></y></span><br><br><br> +<span class="test m"><x></x><br><y></y></span><br><br><br> +<span class="test p m"><x></x><br><y></y></span><br><br><br> +<span class="test b m"><x></x><br><y></y></span><br><br><br> +<span class="test p b m"><x></x><br><y></y></span><br><br><br> + +<div class="direction"></div> <!-- to trigger bidi resolution --> + +</div><div style="float:left; width: 100px; text-align:right"> + +<span class="test p"><y></y><br><x></x></span><br><br><br> +<span class="test b"><y></y><br><x></x></span><br><br><br> +<span class="test p b"><y></y><br><x></x></span><br><br><br> +<span class="test m"><y></y><br><x></x></span><br><br><br> +<span class="test p m"><y></y><br><x></x></span><br><br><br> +<span class="test b m"><y></y><br><x></x></span><br><br><br> +<span class="test p b m"><y></y><br><x></x></span><br><br><br> + +<div class="direction"></div> <!-- to trigger bidi resolution --> +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1-ref.html b/layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1-ref.html new file mode 100644 index 0000000000..f372a0f920 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1-ref.html @@ -0,0 +1,132 @@ +<!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> + diff --git a/layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1.html b/layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1.html new file mode 100644 index 0000000000..97e64700cc --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1.html @@ -0,0 +1,134 @@ +<!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"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="match" href="box-decoration-break-with-inset-box-shadow-1-ref.html"> + <meta charset="utf-8"> +<style> +span { border:3px dashed pink; margin:0 1em; line-height:4em; box-decoration-break:clone; } + +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 <br> b <br> c </b></span><br> +<span class="o10"><b> a <br> b <br> c </b></span><br> +<span class="o10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="p0"><b> a <br> b <br> c </b></span><br> +<span class="p10"><b> a <br> b <br> c </b></span><br> +<span class="p10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="so0"><b> a <br> b <br> c </b></span><br> +<span class="so10"><b> a <br> b <br> c </b></span><br> +<span class="so10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="sp0"><b> a <br> b <br> c </b></span><br> +<span class="sp10"><b> a <br> b <br> c </b></span><br> +<span class="sp10x"><b> a <br> b <br> 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 <br> b <br> c </b></span><br> +<span class="m o10"><b> a <br> b <br> c </b></span><br> +<span class="m o10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="m p0"><b> a <br> b <br> c </b></span><br> +<span class="m p10"><b> a <br> b <br> c </b></span><br> +<span class="m p10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="m so0"><b> a <br> b <br> c </b></span><br> +<span class="m so10"><b> a <br> b <br> c </b></span><br> +<span class="m so10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="m sp0"><b> a <br> b <br> c </b></span><br> +<span class="m sp10"><b> a <br> b <br> c </b></span><br> +<span class="m sp10x"><b> a <br> b <br> c </b></span><br> +</td></tr> +</table> +</div> + +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1-ref.html b/layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1-ref.html new file mode 100644 index 0000000000..938fc39148 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1-ref.html @@ -0,0 +1,131 @@ +<!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 outset 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; line-height:80px; } + +span { + font-family:monospace; + padding:1em 1em; + background-image: url(green-circle-alpha-32x32.png); +} +.o0 { + border-radius: 12px; + -webkit-box-shadow: 0px 0px 0px 10px #00F; + box-shadow: 0px 0px 0px 10px #00F; +} +.o10 { + border-radius: 12px; + -webkit-box-shadow: 0px 0px 7px 10px #00F; + box-shadow: 0px 0px 7px 10px #00F; +} +.o10x { + border-radius: 12px; + -webkit-box-shadow: 0px 0px 7px 0px #00F; + box-shadow: 0px 0px 7px 0px #00F; +} +.p0 { + border-radius: 12px; + -webkit-box-shadow: 15px 9px 0px 10px #00F; + box-shadow: 15px 9px 0px 10px #00F; +} +.p10 { + border-radius: 12px; + -webkit-box-shadow: 15px 9px 7px 10px #00F; + box-shadow: 15px 9px 7px 10px #00F; +} +.p10x { + border-radius: 12px; + -webkit-box-shadow: 15px 9px 7px 0px #00F; + box-shadow: 15px 9px 7px 0px #00F; +} +.so0 { + border-radius: 0px; + -webkit-box-shadow: 0px 0px 0px 10px #00F; + box-shadow: 0px 0px 0px 10px #00F; +} +.so10 { + border-radius: 0px; + -webkit-box-shadow: 0px 0px 7px 10px #00F; + box-shadow: 0px 0px 7px 10px #00F; +} +.so10x { + border-radius: 0px; + -webkit-box-shadow: 0px 0px 7px 0px #00F; + box-shadow: 0px 0px 7px 0px #00F; +} +.sp0 { + border-radius: 0px; + -webkit-box-shadow: 15px 9px 0px 10px #00F; + box-shadow: 15px 9px 0px 10px #00F; +} +.sp10 { + border-radius: 0px; + -webkit-box-shadow: 15px 9px 7px 10px #00F; + box-shadow: 15px 9px 7px 10px #00F; +} +.sp10x { + border-radius: 0px; + -webkit-box-shadow: 15px 9px 7px 0px #00F; + box-shadow: 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=50 ><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 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=50 ><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 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> + diff --git a/layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1.html b/layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1.html new file mode 100644 index 0000000000..417bf76ca4 --- /dev/null +++ b/layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1.html @@ -0,0 +1,133 @@ +<!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 outset box-shadow</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613659"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="match" href="box-decoration-break-with-outset-box-shadow-1-ref.html"> + <meta charset="utf-8"> +<style> +span { border:3px dashed pink; line-height:80px; box-decoration-break:clone; } + +span { + font-family:monospace; + padding:1em 1em; + background-image: url(green-circle-alpha-32x32.png); +} +.o0 { + border-radius: 12px; + -webkit-box-shadow: 0px 0px 0px 10px #00F; + box-shadow: 0px 0px 0px 10px #00F; +} +.o10 { + border-radius: 12px; + -webkit-box-shadow: 0px 0px 7px 10px #00F; + box-shadow: 0px 0px 7px 10px #00F; +} +.o10x { + border-radius: 12px; + -webkit-box-shadow: 0px 0px 7px 0px #00F; + box-shadow: 0px 0px 7px 0px #00F; +} +.p0 { + border-radius: 12px; + -webkit-box-shadow: 15px 9px 0px 10px #00F; + box-shadow: 15px 9px 0px 10px #00F; +} +.p10 { + border-radius: 12px; + -webkit-box-shadow: 15px 9px 7px 10px #00F; + box-shadow: 15px 9px 7px 10px #00F; +} +.p10x { + border-radius: 12px; + -webkit-box-shadow: 15px 9px 7px 0px #00F; + box-shadow: 15px 9px 7px 0px #00F; +} +.so0 { + border-radius: 0px; + -webkit-box-shadow: 0px 0px 0px 10px #00F; + box-shadow: 0px 0px 0px 10px #00F; +} +.so10 { + border-radius: 0px; + -webkit-box-shadow: 0px 0px 7px 10px #00F; + box-shadow: 0px 0px 7px 10px #00F; +} +.so10x { + border-radius: 0px; + -webkit-box-shadow: 0px 0px 7px 0px #00F; + box-shadow: 0px 0px 7px 0px #00F; +} +.sp0 { + border-radius: 0px; + -webkit-box-shadow: 15px 9px 0px 10px #00F; + box-shadow: 15px 9px 0px 10px #00F; +} +.sp10 { + border-radius: 0px; + -webkit-box-shadow: 15px 9px 7px 10px #00F; + box-shadow: 15px 9px 7px 10px #00F; +} +.sp10x { + border-radius: 0px; + -webkit-box-shadow: 15px 9px 7px 0px #00F; + box-shadow: 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=50 ><tr><td> +<span class="o0"><b> a <br> b <br> c </b></span><br> +<span class="o10"><b> a <br> b <br> c </b></span><br> +<span class="o10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="p0"><b> a <br> b <br> c </b></span><br> +<span class="p10"><b> a <br> b <br> c </b></span><br> +<span class="p10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="so0"><b> a <br> b <br> c </b></span><br> +<span class="so10"><b> a <br> b <br> c </b></span><br> +<span class="so10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="sp0"><b> a <br> b <br> c </b></span><br> +<span class="sp10"><b> a <br> b <br> c </b></span><br> +<span class="sp10x"><b> a <br> b <br> 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=50 ><tr><td> +<span class="m o0"><b> a <br> b <br> c </b></span><br> +<span class="m o10"><b> a <br> b <br> c </b></span><br> +<span class="m o10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="m p0"><b> a <br> b <br> c </b></span><br> +<span class="m p10"><b> a <br> b <br> c </b></span><br> +<span class="m p10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="m so0"><b> a <br> b <br> c </b></span><br> +<span class="m so10"><b> a <br> b <br> c </b></span><br> +<span class="m so10x"><b> a <br> b <br> c </b></span><br> +</td><td> +<span class="m sp0"><b> a <br> b <br> c </b></span><br> +<span class="m sp10"><b> a <br> b <br> c </b></span><br> +<span class="m sp10x"><b> a <br> b <br> c </b></span><br> +</td></tr> +</table> +</div> + +</div> +</body> + diff --git a/layout/reftests/css-break/green-circle-alpha-32x32.png b/layout/reftests/css-break/green-circle-alpha-32x32.png Binary files differnew file mode 100644 index 0000000000..a007675a17 --- /dev/null +++ b/layout/reftests/css-break/green-circle-alpha-32x32.png diff --git a/layout/reftests/css-break/reftest.list b/layout/reftests/css-break/reftest.list new file mode 100644 index 0000000000..b1b9017e14 --- /dev/null +++ b/layout/reftests/css-break/reftest.list @@ -0,0 +1,13 @@ +== box-decoration-break-1.html box-decoration-break-1-ref.html +fuzzy(0-1,0-700) == box-decoration-break-with-inset-box-shadow-1.html box-decoration-break-with-inset-box-shadow-1-ref.html +fuzzy(0-64,0-484) fuzzy-if(Android,0-70,0-1330) == box-decoration-break-with-outset-box-shadow-1.html box-decoration-break-with-outset-box-shadow-1-ref.html # Bug 1386543, bug 1392106 +== box-decoration-break-border-image.html box-decoration-break-border-image-ref.html +== box-decoration-break-block-border-padding.html box-decoration-break-block-border-padding-ref.html +== box-decoration-break-block-margin.html box-decoration-break-block-margin-ref.html +fuzzy-if(!Android,0-1,0-62) fuzzy-if(Android,0-8,0-6627) == box-decoration-break-first-letter.html box-decoration-break-first-letter-ref.html #Bug 1313773 +== box-decoration-break-with-bidi.html box-decoration-break-with-bidi-ref.html +== box-decoration-break-bug-1235152.html box-decoration-break-bug-1235152-ref.html +== box-decoration-break-bug-1249913.html box-decoration-break-bug-1249913-ref.html +== vertical-wm-001.html vertical-wm-001-ref.html +== vertical-wm-002.html vertical-wm-002-ref.html +random-if(Android) == 1405443.html 1405443-ref.html diff --git a/layout/reftests/css-break/vertical-wm-001-ref.html b/layout/reftests/css-break/vertical-wm-001-ref.html new file mode 100644 index 0000000000..bfc4d308d8 --- /dev/null +++ b/layout/reftests/css-break/vertical-wm-001-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: splitting vertical writing-mode blocks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1328095"> +<style type="text/css"> +body,html { padding:30px; margin:0; } +.col { + columns: 2; + column-gap: 0; + column-fill: auto; + + block-size: 90px; + inline-size: 140px; + border:1px solid; +} +.vl { writing-mode: vertical-lr; } + +x { + display:block; + break-inside:avoid; + page-break-inside:avoid; + vertical-align: top; + inline-size: 20px; + block-size: 20px; + background:silver; +} +x:nth-of-type(2n) {background:purple;} + +blue { display:block; inline-size: 70px; border-block-start: 25px solid blue; } +grey { display:block; inline-size: 70px; border-block-start: 17px solid grey; } +</style> +</head> +<body> + +<div class="col vl"> +<div class="inner" style="margin-left:40px"></div> +<blue></blue> +<x></x><x></x> +<grey></grey> +</div> + +<div class="col"> +<div class="inner" style="margin-top:40px"></div> +<blue></blue> +<x></x><x></x> +<grey></grey> +</div> + +<div class="col vl"> +<div class="inner" style="margin-left:40px"></div> +<blue></blue> +<x></x><x></x> +<div style="width:45px"></div> +<grey></grey> +</div> + +<div class="col vl"> +<div class="inner" style="margin-left:40px"></div> +<blue></blue> +<x></x><x></x> +<div style="width:60px"></div> +<grey></grey> +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/vertical-wm-001.html b/layout/reftests/css-break/vertical-wm-001.html new file mode 100644 index 0000000000..7a4c5087ad --- /dev/null +++ b/layout/reftests/css-break/vertical-wm-001.html @@ -0,0 +1,71 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase: splitting vertical writing-mode blocks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1328095"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/"> + <link rel="match" href="vertical-wm-001-ref.html"> +<style type="text/css"> +body,html { padding:30px; margin:0; } +.col { + columns: 2; + column-gap: 0; + column-fill: auto; + + block-size: 90px; + inline-size: 140px; + border:1px solid; +} +.vl { writing-mode: vertical-lr; } + +.inner { + border-block-start: 25px solid blue; + border-block-end: 17px solid grey; + inline-size: 70px; +} + +x { + display:block; + break-inside:avoid; + page-break-inside:avoid; + vertical-align: top; + inline-size: 20px; + block-size: 20px; + background:silver; +} +x:nth-of-type(2n) {background:purple;} +</style> +</head> +<body> + +<div class="col vl"> +<div class="inner" style="margin-block-start:40px"> +<x></x><x></x> +</div> +</div> + +<div class="col"> +<div class="inner" style="margin-block-start:40px"> +<x></x><x></x> +</div> +</div> + +<div class="col vl"> +<div class="inner" style="margin-block-start:40px; block-size:90px"> +<x></x><x></x> +</div> +</div> + +<div class="col vl"> +<div class="inner" style="margin-block-start:40px; block-size:100px"> +<x></x><x></x> +</div> +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/vertical-wm-002-ref.html b/layout/reftests/css-break/vertical-wm-002-ref.html new file mode 100644 index 0000000000..e4f5d655d8 --- /dev/null +++ b/layout/reftests/css-break/vertical-wm-002-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: splitting vertical writing-mode blocks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1328095"> +<style type="text/css"> +body,html { padding:30px; margin:0; } +.col { + columns: 2; + column-gap: 0; + column-fill: auto; + + block-size: 90px; + inline-size: 140px; + border:1px solid; +} +.vl { writing-mode: vertical-rl; } + +x { + display:block; + break-inside:avoid; + page-break-inside:avoid; + vertical-align: top; + inline-size: 20px; + block-size: 20px; + background:silver; +} +x:nth-of-type(2n) {background:purple;} + +blue { display:block; inline-size: 70px; border-block-start: 25px solid blue; } +grey { display:block; inline-size: 70px; border-block-start: 17px solid grey; } +</style> +</head> +<body> + +<div class="col vl"> +<div class="inner" style="margin-left:40px"></div> +<blue></blue> +<x></x><x></x> +<grey></grey> +</div> + +<div class="col"> +<div class="inner" style="margin-top:40px"></div> +<blue></blue> +<x></x><x></x> +<grey></grey> +</div> + +<div class="col vl"> +<div class="inner" style="margin-left:40px"></div> +<blue></blue> +<x></x><x></x> +<div style="width:45px"></div> +<grey></grey> +</div> + +<div class="col vl"> +<div class="inner" style="margin-left:40px"></div> +<blue></blue> +<x></x><x></x> +<div style="width:60px"></div> +<grey></grey> +</div> + +</body> +</html> diff --git a/layout/reftests/css-break/vertical-wm-002.html b/layout/reftests/css-break/vertical-wm-002.html new file mode 100644 index 0000000000..5d77634680 --- /dev/null +++ b/layout/reftests/css-break/vertical-wm-002.html @@ -0,0 +1,71 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Testcase: splitting vertical writing-mode blocks</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1328095"> + <link rel="help" href="http://dev.w3.org/csswg/css-break/#break-decoration"> + <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/"> + <link rel="match" href="vertical-wm-002-ref.html"> +<style type="text/css"> +body,html { padding:30px; margin:0; } +.col { + columns: 2; + column-gap: 0; + column-fill: auto; + + block-size: 90px; + inline-size: 140px; + border:1px solid; +} +.vl { writing-mode: vertical-rl; } + +.inner { + border-block-start: 25px solid blue; + border-block-end: 17px solid grey; + inline-size: 70px; +} + +x { + display:block; + break-inside:avoid; + page-break-inside:avoid; + vertical-align: top; + inline-size: 20px; + block-size: 20px; + background:silver; +} +x:nth-of-type(2n) {background:purple;} +</style> +</head> +<body> + +<div class="col vl"> +<div class="inner" style="margin-block-start:40px"> +<x></x><x></x> +</div> +</div> + +<div class="col"> +<div class="inner" style="margin-block-start:40px"> +<x></x><x></x> +</div> +</div> + +<div class="col vl"> +<div class="inner" style="margin-block-start:40px; block-size:90px"> +<x></x><x></x> +</div> +</div> + +<div class="col vl"> +<div class="inner" style="margin-block-start:40px; block-size:100px"> +<x></x><x></x> +</div> +</div> + +</body> +</html> |
