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/border-dashed-no-radius-filled-mask.pngbin0 -> 6163 bytes
-rw-r--r--layout/reftests/border-dotted/border-dashed-no-radius-unfilled-mask.pngbin0 -> 5450 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-stylo.list13
-rw-r--r--layout/reftests/border-dotted/reftest.list13
32 files changed, 772 insertions, 0 deletions
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 000000000..b2d0110c4
--- /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 000000000..69799f41b
--- /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 000000000..20a672237
--- /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 000000000..96e1d4753
--- /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 000000000..7c2bd791b
--- /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 000000000..8f0e74e6a
--- /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 000000000..08de9bc49
--- /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 000000000..c930c18d8
--- /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 000000000..7773c0d65
--- /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 000000000..30fc49947
--- /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 000000000..c6bce82f8
--- /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 000000000..cc818709d
--- /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 000000000..1ef3ce778
--- /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 000000000..ed3ffbbf8
--- /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 000000000..4ea3c0224
--- /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 000000000..243052f66
--- /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 000000000..ebf49c48f
--- /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 000000000..3bf244ea2
--- /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 000000000..401c6e3d1
--- /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 000000000..a35d2f367
--- /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 000000000..193f5f2da
--- /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 000000000..5b20585fb
--- /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 000000000..8b8980ac4
--- /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 000000000..a303e7014
--- /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 000000000..b36fec537
--- /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 000000000..dab78f742
--- /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 000000000..145759e9f
--- /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 000000000..b5869f4d6
--- /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 000000000..afe936b87
--- /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 000000000..80599fb01
--- /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-stylo.list b/layout/reftests/border-dotted/reftest-stylo.list
new file mode 100644
index 000000000..23436b7ff
--- /dev/null
+++ b/layout/reftests/border-dotted/reftest-stylo.list
@@ -0,0 +1,13 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# 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.
+== border-dotted-interaction.html border-dotted-interaction.html
+== border-dotted-no-radius.html border-dotted-no-radius.html
+== border-dotted-radius.html border-dotted-radius.html
+== border-dashed-no-radius.html border-dashed-no-radius.html
+== border-dashed-radius.html border-dashed-radius.html
+== border-mixed.html border-mixed.html
+== border-dashed-non-integer.html border-dashed-non-integer.html
+== border-dashed-radius-zoom.html border-dashed-radius-zoom.html
diff --git a/layout/reftests/border-dotted/reftest.list b/layout/reftests/border-dotted/reftest.list
new file mode 100644
index 000000000..af75f9d52
--- /dev/null
+++ b/layout/reftests/border-dotted/reftest.list
@@ -0,0 +1,13 @@
+# 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.
+fuzzy(80,1500) == border-dotted-interaction.html masked.html
+fuzzy(80,1500) == border-dotted-no-radius.html masked.html
+fuzzy(80,1500) == border-dotted-radius.html masked.html
+fuzzy(80,1500) == border-dashed-no-radius.html masked.html
+fuzzy(80,1500) == border-dashed-radius.html masked.html
+fuzzy(80,1500) == border-mixed.html masked.html
+fuzzy(80,1500) == border-dashed-non-integer.html masked.html
+fuzzy(80,1500) == border-dashed-radius-zoom.html masked-zoom.html
+fuzzy(80,1500) == border-dotted-radius-zero.html masked-small.html