summaryrefslogtreecommitdiffstats
path: root/layout/reftests/border-dotted
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/border-dotted')
-rw-r--r--layout/reftests/border-dotted/1752624-ref.html34
-rw-r--r--layout/reftests/border-dotted/1752624.html43
-rw-r--r--layout/reftests/border-dotted/1761756-ref.html17
-rw-r--r--layout/reftests/border-dotted/1761756.html19
-rw-r--r--layout/reftests/border-dotted/border-dashed-no-radius-filled-mask.pngbin0 -> 6204 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-no-radius-unfilled-mask.pngbin0 -> 5434 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-no-radius.html79
-rw-r--r--layout/reftests/border-dotted/border-dashed-non-integer.html80
-rw-r--r--layout/reftests/border-dotted/border-dashed-radius-filled-mask.pngbin0 -> 6140 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-radius-non-integer-filled-mask.pngbin0 -> 6168 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-radius-non-integer-unfilled-mask.pngbin0 -> 5700 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-radius-unfilled-mask.pngbin0 -> 5656 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-radius-zoom-filled-mask.pngbin0 -> 9717 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-radius-zoom-unfilled-mask.pngbin0 -> 8677 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-radius-zoom.html88
-rw-r--r--layout/reftests/border-dotted/border-dashed-radius.html80
-rw-r--r--layout/reftests/border-dotted/border-dotted-interaction-filled-mask.pngbin0 -> 7867 bytes
-rw-r--r--layout/reftests/border-dotted/border-dotted-interaction-unfilled-mask.pngbin0 -> 6136 bytes
-rw-r--r--layout/reftests/border-dotted/border-dotted-interaction.html67
-rw-r--r--layout/reftests/border-dotted/border-dotted-no-radius-filled-mask.pngbin0 -> 5638 bytes
-rw-r--r--layout/reftests/border-dotted/border-dotted-no-radius-unfilled-mask.pngbin0 -> 4693 bytes
-rw-r--r--layout/reftests/border-dotted/border-dotted-no-radius.html81
-rw-r--r--layout/reftests/border-dotted/border-dotted-radius-filled-mask.pngbin0 -> 6855 bytes
-rw-r--r--layout/reftests/border-dotted/border-dotted-radius-unfilled-mask.pngbin0 -> 6054 bytes
-rw-r--r--layout/reftests/border-dotted/border-dotted-radius-zero-filled-mask.pngbin0 -> 965 bytes
-rw-r--r--layout/reftests/border-dotted/border-dotted-radius-zero-unfilled-mask.pngbin0 -> 621 bytes
-rw-r--r--layout/reftests/border-dotted/border-dotted-radius-zero.html42
-rw-r--r--layout/reftests/border-dotted/border-dotted-radius.html87
-rw-r--r--layout/reftests/border-dotted/border-mixed-filled-mask.pngbin0 -> 8809 bytes
-rw-r--r--layout/reftests/border-dotted/border-mixed-unfilled-mask.pngbin0 -> 8298 bytes
-rw-r--r--layout/reftests/border-dotted/border-mixed.html79
-rw-r--r--layout/reftests/border-dotted/masked-small.html21
-rw-r--r--layout/reftests/border-dotted/masked-zoom.html21
-rw-r--r--layout/reftests/border-dotted/masked.html21
-rw-r--r--layout/reftests/border-dotted/reftest.list19
35 files changed, 878 insertions, 0 deletions
diff --git a/layout/reftests/border-dotted/1752624-ref.html b/layout/reftests/border-dotted/1752624-ref.html
new file mode 100644
index 0000000000..7d465c930b
--- /dev/null
+++ b/layout/reftests/border-dotted/1752624-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<style>
+#offset {
+ position: absolute;
+ left: 10px;
+ top: -150px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid red;
+}
+#outline-box {
+ width: 100px;
+ height: 100px;
+ position: relative;
+}
+#overflow-box {
+ border: 4px solid blue;
+ width: 10px;
+ height: 400px;
+ left: 10px;
+ top: 100px;
+ position: absolute;
+}
+</style>
+<body>
+<div id="offset">
+<div id="outline-box">
+<div id="overflow-box">
+</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-dotted/1752624.html b/layout/reftests/border-dotted/1752624.html
new file mode 100644
index 0000000000..116c34b2cd
--- /dev/null
+++ b/layout/reftests/border-dotted/1752624.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<style>
+/*
+ * The rendering of the dotted border should be skipped if the border's box
+ * don't intersect with the dirty rect, even if the child node overflows from
+ * the border's box and the child node intersect with the dirty rect.
+ */
+
+/* Moves the outline-box out of the visible area. */
+#offset {
+ position: absolute;
+ left: 10px;
+ top: -150px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid red;
+}
+#outline-box {
+ outline: 4px dotted;
+ width: 100px;
+ height: 100px;
+ position: relative;
+}
+/* Overflows from the parent outline-box, and this is visible. */
+#overflow-box {
+ border: 4px solid blue;
+ width: 10px;
+ height: 400px;
+ left: 10px;
+ top: 100px;
+ position: absolute;
+}
+</style>
+<body>
+<div id="offset">
+<div id="outline-box">
+<div id="overflow-box">
+</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/border-dotted/1761756-ref.html b/layout/reftests/border-dotted/1761756-ref.html
new file mode 100644
index 0000000000..1c5fd402a1
--- /dev/null
+++ b/layout/reftests/border-dotted/1761756-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+big {
+ border-block-end-style: dotted;
+}
+</style>
+</head>
+<body>
+<big id="big" dir="rtl"></big>
+<script>
+const big = document.getElementById("big");
+big.innerText = "\nA";
+</script>
+</body>
+</html>
diff --git a/layout/reftests/border-dotted/1761756.html b/layout/reftests/border-dotted/1761756.html
new file mode 100644
index 0000000000..efdf2b6219
--- /dev/null
+++ b/layout/reftests/border-dotted/1761756.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+big {
+ background-color: red;
+ background-clip: text !important;
+ border-block-end-style: dotted;
+}
+</style>
+</head>
+<body>
+<big id="big" dir="rtl"></big>
+<script>
+const big = document.getElementById("big");
+big.innerText = "\nA";
+</script>
+</body>
+</html>
diff --git a/layout/reftests/border-dotted/border-dashed-no-radius-filled-mask.png b/layout/reftests/border-dotted/border-dashed-no-radius-filled-mask.png
new file mode 100644
index 0000000000..aa70120afa
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-no-radius-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dashed-no-radius-unfilled-mask.png b/layout/reftests/border-dotted/border-dashed-no-radius-unfilled-mask.png
new file mode 100644
index 0000000000..34534e9f73
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-no-radius-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dashed-no-radius.html b/layout/reftests/border-dotted/border-dashed-no-radius.html
new file mode 100644
index 0000000000..20a6722370
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-no-radius.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>dashed border with no radius</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 10px;
+ empty-cells: show;
+}
+td {
+ border-style: dashed;
+ border-color: black;
+ height: 120px;
+ width: 120px;
+ box-sizing: border-box;
+}
+
+.A {
+ border-width: 1px;
+}
+.B {
+ border-width: 2px;
+}
+.C {
+ border-width: 6px;
+}
+.D {
+ border-width: 8px;
+}
+.E {
+ border-width: 16px;
+}
+.F {
+ border-width: 24px;
+}
+.G {
+ border-width: 32px;
+}
+.H {
+ border-width: 48px;
+}
+.I {
+ border-width: 60px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dashed-no-radius-filled-mask.png">
+ </div>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dashed-no-radius-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/border-dashed-non-integer.html b/layout/reftests/border-dotted/border-dashed-non-integer.html
new file mode 100644
index 0000000000..96e1d47538
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-non-integer.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>dashed border with non-integer radius</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 10px;
+ empty-cells: show;
+}
+td {
+ border-style: dashed;
+ border-radius: 24.01px;
+ border-color: black;
+ height: 120px;
+ width: 120px;
+ box-sizing: border-box;
+}
+
+.A {
+ border-width: 1px;
+}
+.B {
+ border-width: 2px;
+}
+.C {
+ border-width: 6px;
+}
+.D {
+ border-width: 8px;
+}
+.E {
+ border-width: 16px;
+}
+.F {
+ border-width: 24px;
+}
+.G {
+ border-width: 32px;
+}
+.H {
+ border-width: 48px;
+}
+.I {
+ border-width: 60px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dashed-radius-non-integer-filled-mask.png">
+ </div>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dashed-radius-non-integer-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/border-dashed-radius-filled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-filled-mask.png
new file mode 100644
index 0000000000..7c2bd791ba
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-radius-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dashed-radius-non-integer-filled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-non-integer-filled-mask.png
new file mode 100644
index 0000000000..8f0e74e6ac
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-radius-non-integer-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dashed-radius-non-integer-unfilled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-non-integer-unfilled-mask.png
new file mode 100644
index 0000000000..08de9bc493
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-radius-non-integer-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dashed-radius-unfilled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-unfilled-mask.png
new file mode 100644
index 0000000000..c930c18d85
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-radius-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dashed-radius-zoom-filled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-zoom-filled-mask.png
new file mode 100644
index 0000000000..7773c0d651
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-radius-zoom-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dashed-radius-zoom-unfilled-mask.png b/layout/reftests/border-dotted/border-dashed-radius-zoom-unfilled-mask.png
new file mode 100644
index 0000000000..30fc499470
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-radius-zoom-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dashed-radius-zoom.html b/layout/reftests/border-dotted/border-dashed-radius-zoom.html
new file mode 100644
index 0000000000..c6bce82f85
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-radius-zoom.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html reftest-zoom="1.3300000429153442" class="reftest-wait">
+ <head>
+ <meta charset="utf-8">
+ <title>dashed border with radius</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 420px;
+ height: 420px;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 10px;
+ empty-cells: show;
+}
+td {
+ border-style: dashed;
+ border-radius: 24px;
+ border-color: black;
+ height: 120px;
+ width: 120px;
+ box-sizing: border-box;
+}
+
+.A {
+ border-width: 1px;
+}
+.B {
+ border-width: 2px;
+}
+.C {
+ border-width: 6px;
+}
+.D {
+ border-width: 8px;
+}
+.E {
+ border-width: 16px;
+}
+.F {
+ border-width: 24px;
+}
+.G {
+ border-width: 32px;
+}
+.H {
+ border-width: 48px;
+}
+.I {
+ border-width: 60px;
+}
+ </style>
+ <script>
+ function doTest() {
+ document.documentElement.className='';
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+ </script>
+ </head>
+ <body>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dashed-radius-zoom-filled-mask.png">
+ </div>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dashed-radius-zoom-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/border-dashed-radius.html b/layout/reftests/border-dotted/border-dashed-radius.html
new file mode 100644
index 0000000000..cc818709d6
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dashed-radius.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>dashed border with radius</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 10px;
+ empty-cells: show;
+}
+td {
+ border-style: dashed;
+ border-radius: 24px;
+ border-color: black;
+ height: 120px;
+ width: 120px;
+ box-sizing: border-box;
+}
+
+.A {
+ border-width: 1px;
+}
+.B {
+ border-width: 2px;
+}
+.C {
+ border-width: 6px;
+}
+.D {
+ border-width: 8px;
+}
+.E {
+ border-width: 16px;
+}
+.F {
+ border-width: 24px;
+}
+.G {
+ border-width: 32px;
+}
+.H {
+ border-width: 48px;
+}
+.I {
+ border-width: 60px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dashed-radius-filled-mask.png">
+ </div>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dashed-radius-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/border-dotted-interaction-filled-mask.png b/layout/reftests/border-dotted/border-dotted-interaction-filled-mask.png
new file mode 100644
index 0000000000..1ef3ce778b
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-interaction-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dotted-interaction-unfilled-mask.png b/layout/reftests/border-dotted/border-dotted-interaction-unfilled-mask.png
new file mode 100644
index 0000000000..ed3ffbbf80
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-interaction-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dotted-interaction.html b/layout/reftests/border-dotted/border-dotted-interaction.html
new file mode 100644
index 0000000000..4ea3c0224d
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-interaction.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Corner interaction with dotted and other border</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 10px;
+ empty-cells: show;
+ margin: 0px;
+}
+td {
+ border-color: black;
+ border-width: 10px;
+ height: 60px;
+ width: 60px;
+ box-sizing: border-box;
+}
+
+table .a { border-top-style: none; border-right-style: none; }
+table .A { border-bottom-style: none; border-left-style: none; }
+table .b { border-top-style: solid; border-right-style: solid; }
+table .B { border-bottom-style: solid; border-left-style: solid; }
+table .c { border-top-style: double; border-right-style: double; }
+table .C { border-bottom-style: double; border-left-style: double; }
+table .d { border-top-style: dashed; border-right-style: dashed; }
+table .D { border-bottom-style: dashed; border-left-style: dashed; }
+table .e { border-top-style: dotted; border-right-style: dotted; }
+table .E { border-bottom-style: dotted; border-left-style: dotted; }
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <table>
+ <tr><td class="A a"></td><td class="A b"></td><td class="A c"></td><td class="A d"></td><td class="A e"></td></tr>
+ <tr><td class="B a"></td><td class="B b"></td><td class="B c"></td><td class="B d"></td><td class="B e"></td></tr>
+ <tr><td class="C a"></td><td class="C b"></td><td class="C c"></td><td class="C d"></td><td class="C e"></td></tr>
+ <tr><td class="D a"></td><td class="D b"></td><td class="D c"></td><td class="D d"></td><td class="D e"></td></tr>
+ <tr><td class="E a"></td><td class="E b"></td><td class="E c"></td><td class="E d"></td><td class="E e"></td></tr>
+ </table>
+ <img class="mask" src="border-dotted-interaction-filled-mask.png">
+ </div>
+ <div class="box">
+ <table>
+ <tr><td class="A a"></td><td class="A b"></td><td class="A c"></td><td class="A d"></td><td class="A e"></td></tr>
+ <tr><td class="B a"></td><td class="B b"></td><td class="B c"></td><td class="B d"></td><td class="B e"></td></tr>
+ <tr><td class="C a"></td><td class="C b"></td><td class="C c"></td><td class="C d"></td><td class="C e"></td></tr>
+ <tr><td class="D a"></td><td class="D b"></td><td class="D c"></td><td class="D d"></td><td class="D e"></td></tr>
+ <tr><td class="E a"></td><td class="E b"></td><td class="E c"></td><td class="E d"></td><td class="E e"></td></tr>
+ </table>
+ <img class="mask" src="border-dotted-interaction-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/border-dotted-no-radius-filled-mask.png b/layout/reftests/border-dotted/border-dotted-no-radius-filled-mask.png
new file mode 100644
index 0000000000..243052f66c
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-no-radius-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dotted-no-radius-unfilled-mask.png b/layout/reftests/border-dotted/border-dotted-no-radius-unfilled-mask.png
new file mode 100644
index 0000000000..ebf49c48fa
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-no-radius-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dotted-no-radius.html b/layout/reftests/border-dotted/border-dotted-no-radius.html
new file mode 100644
index 0000000000..3bf244ea20
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-no-radius.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>dotted border with no radius</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 10px;
+ empty-cells: show;
+}
+td {
+ border-style: dotted;
+ border-color: black;
+ height: 120px;
+ width: 120px;
+ box-sizing: border-box;
+}
+
+.A {
+ /* Rendering with 1px depends on OS due to optimization */
+ border-width: 0px;
+}
+.B {
+ /* Rendering with 2px depends on OS due to optimization */
+ border-width: 0px;
+}
+.C {
+ border-width: 6px;
+}
+.D {
+ border-width: 8px;
+}
+.E {
+ border-width: 16px;
+}
+.F {
+ border-width: 24px;
+}
+.G {
+ border-width: 32px;
+}
+.H {
+ border-width: 48px;
+}
+.I {
+ border-width: 60px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dotted-no-radius-filled-mask.png">
+ </div>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dotted-no-radius-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/border-dotted-radius-filled-mask.png b/layout/reftests/border-dotted/border-dotted-radius-filled-mask.png
new file mode 100644
index 0000000000..401c6e3d1e
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-radius-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dotted-radius-unfilled-mask.png b/layout/reftests/border-dotted/border-dotted-radius-unfilled-mask.png
new file mode 100644
index 0000000000..a35d2f3678
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-radius-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dotted-radius-zero-filled-mask.png b/layout/reftests/border-dotted/border-dotted-radius-zero-filled-mask.png
new file mode 100644
index 0000000000..193f5f2dae
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-radius-zero-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dotted-radius-zero-unfilled-mask.png b/layout/reftests/border-dotted/border-dotted-radius-zero-unfilled-mask.png
new file mode 100644
index 0000000000..5b20585fb0
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-radius-zero-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-dotted-radius-zero.html b/layout/reftests/border-dotted/border-dotted-radius-zero.html
new file mode 100644
index 0000000000..8b8980ac4c
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-radius-zero.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>dashed border with radius</title>
+ <style>
+.box {
+ position: relative;
+ width: 220px;
+ height: 220px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 220px;
+ height: 220px;
+}
+
+div.border {
+ border-style: dotted;
+ border-width: 4px 0 4px 0px;
+ width: 200px;
+ height: 200px;
+ border-top-right-radius: 40px 200px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <div class="border">
+ </div>
+ <img class="mask" src="border-dotted-radius-zero-filled-mask.png">
+ </div>
+ <div class="box">
+ <div class="border">
+ </div>
+ <img class="mask" src="border-dotted-radius-zero-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/border-dotted-radius.html b/layout/reftests/border-dotted/border-dotted-radius.html
new file mode 100644
index 0000000000..a303e70145
--- /dev/null
+++ b/layout/reftests/border-dotted/border-dotted-radius.html
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>dotted border with radius</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 10px;
+ empty-cells: show;
+}
+td {
+ border-style: dotted;
+ border-radius: 24px;
+ border-color: black;
+ height: 120px;
+ width: 120px;
+ box-sizing: border-box;
+}
+
+/* Bug 1303094 - Disable unreliable 1px and 2px tests. */
+.no-fill {
+ border-style: solid;
+}
+.no-unfill {
+ border-style: none;
+}
+.A {
+ border-width: 1px;
+}
+.B {
+ border-width: 2px;
+}
+.C {
+ border-width: 6px;
+}
+.D {
+ border-width: 8px;
+}
+.E {
+ border-width: 16px;
+}
+.F {
+ border-width: 24px;
+}
+.G {
+ border-width: 32px;
+}
+.H {
+ border-width: 48px;
+}
+.I {
+ border-width: 60px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <table>
+ <tr><td class="A no-fill"></td><td class="B no-fill"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dotted-radius-filled-mask.png">
+ </div>
+ <div class="box">
+ <table>
+ <tr><td class="A no-unfill"></td><td class="B no-unfill"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-dotted-radius-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/border-mixed-filled-mask.png b/layout/reftests/border-dotted/border-mixed-filled-mask.png
new file mode 100644
index 0000000000..b36fec5371
--- /dev/null
+++ b/layout/reftests/border-dotted/border-mixed-filled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-mixed-unfilled-mask.png b/layout/reftests/border-dotted/border-mixed-unfilled-mask.png
new file mode 100644
index 0000000000..dab78f742e
--- /dev/null
+++ b/layout/reftests/border-dotted/border-mixed-unfilled-mask.png
Binary files differ
diff --git a/layout/reftests/border-dotted/border-mixed.html b/layout/reftests/border-dotted/border-mixed.html
new file mode 100644
index 0000000000..145759e9f0
--- /dev/null
+++ b/layout/reftests/border-dotted/border-mixed.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>mixed border with mixed radius</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+.mask {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 10px;
+ empty-cells: show;
+}
+td {
+ border-color: black;
+ border-width: 12px 18px 8px 24px;
+ border-style: dotted dotted dashed double;
+ height: 120px;
+ width: 120px;
+ box-sizing: border-box;
+}
+
+.A {
+}
+.B {
+ border-radius: 8px;
+}
+.C {
+ border-radius: 16px;
+}
+.D {
+ border-radius: 32px;
+}
+.E {
+ border-radius: 48px;
+}
+.F {
+ border-radius: 60px;
+}
+.G {
+ border-radius: 60px/24px;
+}
+.H {
+ border-radius: 0px 60px;
+}
+.I {
+ border-radius: 60px 0px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-mixed-filled-mask.png">
+ </div>
+ <div class="box">
+ <table>
+ <tr><td class="A"></td><td class="B"></td><td class="C"></td></tr>
+ <tr><td class="D"></td><td class="E"></td><td class="F"></td></tr>
+ <tr><td class="G"></td><td class="H"></td><td class="I"></td></tr>
+ </table>
+ <img class="mask" src="border-mixed-unfilled-mask.png">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/masked-small.html b/layout/reftests/border-dotted/masked-small.html
new file mode 100644
index 0000000000..b5869f4d64
--- /dev/null
+++ b/layout/reftests/border-dotted/masked-small.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Correctly masked page</title>
+ <style>
+.box {
+ position: relative;
+ width: 220px;
+ height: 220px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box" style="background-color: black;">
+ </div>
+ <div class="box" style="background-color: white;">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/masked-zoom.html b/layout/reftests/border-dotted/masked-zoom.html
new file mode 100644
index 0000000000..afe936b876
--- /dev/null
+++ b/layout/reftests/border-dotted/masked-zoom.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html reftest-zoom="1.3300000429153442">
+ <head>
+ <meta charset="utf-8">
+ <title>Correctly masked page</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box" style="background-color: black;">
+ </div>
+ <div class="box" style="background-color: white;">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/masked.html b/layout/reftests/border-dotted/masked.html
new file mode 100644
index 0000000000..80599fb013
--- /dev/null
+++ b/layout/reftests/border-dotted/masked.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Correctly masked page</title>
+ <style>
+.box {
+ position: relative;
+ width: 420px;
+ height: 420px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="box" style="background-color: black;">
+ </div>
+ <div class="box" style="background-color: white;">
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/border-dotted/reftest.list b/layout/reftests/border-dotted/reftest.list
new file mode 100644
index 0000000000..329775b20f
--- /dev/null
+++ b/layout/reftests/border-dotted/reftest.list
@@ -0,0 +1,19 @@
+# Composing dotted/dashed border rendering and not-filled or not-unfilled mask
+# matches to full-filled box, using fuzzyy because of anti-aliasing.
+# These check filled and unfilled regions with solid opaque color,
+# so difference less than 80 is ignorable.
+
+# XXX: We mark fails-if to these tests for now to enable styled border in WR.
+# We should remove them after Bug 1399485 is fixed.
+fuzzy(0-80,0-1500) fails-if(!useDrawSnapshot) == border-dotted-interaction.html masked.html
+fuzzy(0-80,0-1500) fails == border-dotted-no-radius.html masked.html
+fuzzy(0-80,0-1500) fails == border-dotted-radius.html masked.html
+fuzzy(0-80,0-1500) fails-if(!useDrawSnapshot) == border-dashed-no-radius.html masked.html
+fuzzy(0-80,0-1500) fails == border-dashed-radius.html masked.html
+fuzzy(0-80,0-1500) fails == border-mixed.html masked.html
+fuzzy(0-80,0-1500) fails == border-dashed-non-integer.html masked.html
+fuzzy(0-80,0-1500) fails fails-if(useDrawSnapshot) == border-dashed-radius-zoom.html masked-zoom.html
+fuzzy(0-80,0-1500) fails-if(!useDrawSnapshot) == border-dotted-radius-zero.html masked-small.html
+== 1752624.html 1752624-ref.html
+# 1761756.html uses the fallback rendering and the result is slightly different
+fuzzy(0-200,0-200) == 1761756.html 1761756-ref.html