From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/css-break/1405443-ref.html         |  17 +++
 layout/reftests/css-break/1405443.html             |  17 +++
 .../css-break/box-decoration-break-1-ref.html      |  67 ++++++++++
 .../reftests/css-break/box-decoration-break-1.html |  71 +++++++++++
 ...-decoration-break-block-border-padding-ref.html |  50 ++++++++
 .../box-decoration-break-block-border-padding.html |  50 ++++++++
 .../box-decoration-break-block-margin-ref.html     |  65 ++++++++++
 .../box-decoration-break-block-margin.html         |  65 ++++++++++
 .../box-decoration-break-border-image-ref.html     | 137 +++++++++++++++++++++
 .../box-decoration-break-border-image.html         |  83 +++++++++++++
 .../box-decoration-break-bug-1235152-ref.html      |  57 +++++++++
 .../box-decoration-break-bug-1235152.html          |  61 +++++++++
 .../box-decoration-break-bug-1249913-ref.html      |  53 ++++++++
 .../box-decoration-break-bug-1249913.html          |  53 ++++++++
 .../box-decoration-break-first-letter-ref.html     |  70 +++++++++++
 .../box-decoration-break-first-letter.html         |  72 +++++++++++
 .../box-decoration-break-with-bidi-ref.html        |  74 +++++++++++
 .../css-break/box-decoration-break-with-bidi.html  |  64 ++++++++++
 ...coration-break-with-inset-box-shadow-1-ref.html | 132 ++++++++++++++++++++
 ...x-decoration-break-with-inset-box-shadow-1.html | 134 ++++++++++++++++++++
 ...oration-break-with-outset-box-shadow-1-ref.html | 131 ++++++++++++++++++++
 ...-decoration-break-with-outset-box-shadow-1.html | 133 ++++++++++++++++++++
 .../css-break/green-circle-alpha-32x32.png         | Bin 0 -> 396 bytes
 layout/reftests/css-break/reftest.list             |  13 ++
 layout/reftests/css-break/vertical-wm-001-ref.html |  71 +++++++++++
 layout/reftests/css-break/vertical-wm-001.html     |  71 +++++++++++
 layout/reftests/css-break/vertical-wm-002-ref.html |  71 +++++++++++
 layout/reftests/css-break/vertical-wm-002.html     |  71 +++++++++++
 28 files changed, 1953 insertions(+)
 create mode 100644 layout/reftests/css-break/1405443-ref.html
 create mode 100644 layout/reftests/css-break/1405443.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-1-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-1.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-block-border-padding-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-block-border-padding.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-block-margin-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-block-margin.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-border-image-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-border-image.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-bug-1235152-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-bug-1235152.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-bug-1249913-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-bug-1249913.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-first-letter-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-first-letter.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-with-bidi-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-with-bidi.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-with-inset-box-shadow-1.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1-ref.html
 create mode 100644 layout/reftests/css-break/box-decoration-break-with-outset-box-shadow-1.html
 create mode 100644 layout/reftests/css-break/green-circle-alpha-32x32.png
 create mode 100644 layout/reftests/css-break/reftest.list
 create mode 100644 layout/reftests/css-break/vertical-wm-001-ref.html
 create mode 100644 layout/reftests/css-break/vertical-wm-001.html
 create mode 100644 layout/reftests/css-break/vertical-wm-002-ref.html
 create mode 100644 layout/reftests/css-break/vertical-wm-002.html

(limited to 'layout/reftests/css-break')

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
Binary files /dev/null and b/layout/reftests/css-break/green-circle-alpha-32x32.png 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>
-- 
cgit v1.2.3