summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-break
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /layout/reftests/css-break
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/css-break')
-rw-r--r--layout/reftests/css-break/1405443-ref.html17
-rw-r--r--layout/reftests/css-break/1405443.html17
-rw-r--r--layout/reftests/css-break/box-decoration-break-1-ref.html67
-rw-r--r--layout/reftests/css-break/box-decoration-break-1.html71
-rw-r--r--layout/reftests/css-break/box-decoration-break-block-border-padding-ref.html50
-rw-r--r--layout/reftests/css-break/box-decoration-break-block-border-padding.html50
-rw-r--r--layout/reftests/css-break/box-decoration-break-block-margin-ref.html65
-rw-r--r--layout/reftests/css-break/box-decoration-break-block-margin.html65
-rw-r--r--layout/reftests/css-break/box-decoration-break-border-image-ref.html137
-rw-r--r--layout/reftests/css-break/box-decoration-break-border-image.html83
-rw-r--r--layout/reftests/css-break/box-decoration-break-bug-1235152-ref.html57
-rw-r--r--layout/reftests/css-break/box-decoration-break-bug-1235152.html61
-rw-r--r--layout/reftests/css-break/box-decoration-break-bug-1249913-ref.html53
-rw-r--r--layout/reftests/css-break/box-decoration-break-bug-1249913.html53
-rw-r--r--layout/reftests/css-break/box-decoration-break-first-letter-ref.html70
-rw-r--r--layout/reftests/css-break/box-decoration-break-first-letter.html72
-rw-r--r--layout/reftests/css-break/box-decoration-break-with-bidi-ref.html74
-rw-r--r--layout/reftests/css-break/box-decoration-break-with-bidi.html64
-rw-r--r--layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1-ref.html132
-rw-r--r--layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1.html134
-rw-r--r--layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1-ref.html131
-rw-r--r--layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1.html133
-rw-r--r--layout/reftests/css-break/green-circle-alpha-32x32.pngbin0 -> 396 bytes
-rw-r--r--layout/reftests/css-break/reftest.list13
-rw-r--r--layout/reftests/css-break/vertical-wm-001-ref.html71
-rw-r--r--layout/reftests/css-break/vertical-wm-001.html71
-rw-r--r--layout/reftests/css-break/vertical-wm-002-ref.html71
-rw-r--r--layout/reftests/css-break/vertical-wm-002.html71
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">&nbsp;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">&nbsp;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>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span></td>
+<td><span class="o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span></td>
+<td><span class="o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span></td>
+</tr>
+</table>
+
+<br>
+
+<table border=1 cellpadding=10><tr>
+<td><span class="so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span></td>
+<td><span class="so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span></td>
+<td><span class="so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span></td>
+<td><span class="o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span></td>
+<td><span class="o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span></td>
+</tr>
+</table>
+
+<br>
+
+<table border=1 cellpadding=10><tr>
+<td><span class="so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br></td>
+<td><span class="so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br></td>
+<td><span class="so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="p0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="p0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br></span><span class="p0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="p10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="p10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="p10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="p10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="p10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="p10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="sp0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="sp0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="sp0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="sp10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="sp10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="sp10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="sp10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="sp10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="sp10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m o0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m o0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m o10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m o10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m o10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m o10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m p0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m p0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br></span><span class="m p0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m p10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m p10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m p10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m p10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m p10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m p10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m so0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m so0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m so10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m so10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m so10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m so10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m sp0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m sp0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m sp0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m sp10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m sp10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m sp10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m sp10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m sp10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m sp10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="p0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="p10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="p10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="sp0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="sp10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="sp10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m p0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m p10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m p10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m sp0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m sp10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m sp10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="o10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="o10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="p0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="p0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="p0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="p10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="p10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="p10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="p10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="p10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="p10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="so10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="so10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="sp0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="sp0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="sp0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="sp10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="sp10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="sp10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="sp10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="sp10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="sp10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m o0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m o0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m o10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m o10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m o10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m o10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m p0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m p0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m p0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m p10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m p10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m p10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m p10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m p10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m p10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m so0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m so0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m so10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m so10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m so10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m so10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m sp0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m sp0"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m sp0"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m sp10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m sp10"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m sp10"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m sp10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;</b></span><br><span class="m sp10x"><b>&nbsp;&nbsp;b&nbsp;&nbsp;</b></span><br><span class="m sp10x"><b>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="p0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="p10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="p10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="sp0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="sp10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="sp10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</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>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m o10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m o10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m p0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m p10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m p10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m so0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m so10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m so10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+</td><td>
+<span class="m sp0"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m sp10"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</b></span><br>
+<span class="m sp10x"><b>&nbsp;&nbsp;a&nbsp;&nbsp;<br>&nbsp;&nbsp;b&nbsp;&nbsp;<br>&nbsp;&nbsp;c&nbsp;&nbsp;</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
new file mode 100644
index 0000000000..a007675a17
--- /dev/null
+++ b/layout/reftests/css-break/green-circle-alpha-32x32.png
Binary files differ
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>