Adding upstream version 86.0.1.upstream/86.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

73 files changed, 1828 insertions, 0 deletions

diff --git a/gfx/wr/wrench/reftests/border/blank.yaml b/gfx/wr/wrench/reftests/border/blank.yaml
new file mode 100644
index 0000000000..e3b000bcb2
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/blank.yaml
@@ -0,0 +1,3 @@
+---
+root:
+
diff --git a/gfx/wr/wrench/reftests/border/border-clamp-corner-radius.png b/gfx/wr/wrench/reftests/border/border-clamp-corner-radius.png
new file mode 100644
index 0000000000..bdeda43864
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-clamp-corner-radius.png
diff --git a/gfx/wr/wrench/reftests/border/border-clamp-corner-radius.yaml b/gfx/wr/wrench/reftests/border/border-clamp-corner-radius.yaml
new file mode 100644
index 0000000000..10859274c7
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-clamp-corner-radius.yaml
@@ -0,0 +1,24 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 420, 250]
+      items:
+        - type: border
+          bounds: [ 0, 0, 200, 200 ]
+          width: 10
+          border-type: normal
+          style: solid
+          radius: 180
+          color: blue
+        - type: border
+          bounds: [ 200, 0, 200, 200 ]
+          width: 10
+          border-type: normal
+          style: solid
+          radius:
+            top-left: [180, 180]
+            top-right: [0, 0]
+            bottom-left: [0, 0]
+            bottom-right: [180, 180]
+          color: blue
\ No newline at end of file
diff --git a/gfx/wr/wrench/reftests/border/border-dashed-dotted-caching.png b/gfx/wr/wrench/reftests/border/border-dashed-dotted-caching.png
new file mode 100644
index 0000000000..3eb49ff3e3
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-dashed-dotted-caching.png
diff --git a/gfx/wr/wrench/reftests/border/border-dashed-dotted-caching.yaml b/gfx/wr/wrench/reftests/border/border-dashed-dotted-caching.yaml
new file mode 100644
index 0000000000..ca224852fd
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-dashed-dotted-caching.yaml
@@ -0,0 +1,76 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+
+        - type: border
+          bounds: [ 0, 10, 25, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dashed ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 60, 200, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dashed ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 110, 300, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dashed ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 160, 400, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dashed ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 210, 500, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dashed ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 260, 25, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dotted ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 310, 200, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dotted ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 360, 300, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dotted ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 410, 400, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dotted ]
+          color: [ blue ]
+
+        - type: border
+          bounds: [ 0, 460, 500, 30 ]
+          width: [ 10 ]
+          border-type: normal
+          style: [ dotted ]
+          color: [ blue ]
diff --git a/gfx/wr/wrench/reftests/border/border-double-1px-ref.yaml b/gfx/wr/wrench/reftests/border/border-double-1px-ref.yaml
new file mode 100644
index 0000000000..f0c9eca1ca
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-double-1px-ref.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      items:
+        - type: border
+          bounds: [ 10, 10, 100, 20 ]
+          width: 1
+          border-type: normal
+          style: solid
+          color: red
+        - type: border
+          bounds: [ 12, 12, 96, 16 ]
+          width: 1
+          border-type: normal
+          style: solid
+          color: red
diff --git a/gfx/wr/wrench/reftests/border/border-double-1px.yaml b/gfx/wr/wrench/reftests/border/border-double-1px.yaml
new file mode 100644
index 0000000000..3a5f084108
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-double-1px.yaml
@@ -0,0 +1,11 @@
+---
+root:
+  items:
+    - type: stacking-context
+      items:
+        - type: border
+          bounds: [ 10, 10, 100, 20 ]
+          width: 3
+          border-type: normal
+          style: double
+          color: red
diff --git a/gfx/wr/wrench/reftests/border/border-double-simple-2-ref.yaml b/gfx/wr/wrench/reftests/border/border-double-simple-2-ref.yaml
new file mode 100644
index 0000000000..e7fa39f125
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-double-simple-2-ref.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 500, 500 ]
+          width: [ 1 ]
+          border-type: normal
+          style: [ solid ]
+          color: [ black ]
diff --git a/gfx/wr/wrench/reftests/border/border-double-simple-2.yaml b/gfx/wr/wrench/reftests/border/border-double-simple-2.yaml
new file mode 100644
index 0000000000..6fa6d634cd
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-double-simple-2.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 500, 500 ]
+          width: [ 1 ]
+          border-type: normal
+          style: [ double ]
+          color: [ black ]
diff --git a/gfx/wr/wrench/reftests/border/border-double-simple-ref.yaml b/gfx/wr/wrench/reftests/border/border-double-simple-ref.yaml
new file mode 100644
index 0000000000..564e4df163
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-double-simple-ref.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 4, 4, 4, 4 ]
+          border-type: normal
+          style: [ solid, solid, solid, solid ]
+          color: [ blue, blue, blue, blue ]
+    - type: stacking-context
+      bounds: [8, 8, 34, 34]
+      items:
+        - type: border
+          bounds: [ 0, 0, 34, 34 ]
+          width: [ 4, 4, 4, 4 ]
+          border-type: normal
+          style: [ solid, solid, solid, solid ]
+          color: [ blue, blue, blue, blue ]
diff --git a/gfx/wr/wrench/reftests/border/border-double-simple.yaml b/gfx/wr/wrench/reftests/border/border-double-simple.yaml
new file mode 100644
index 0000000000..4830485a8f
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-double-simple.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 12, 12, 12, 12 ]
+          border-type: normal
+          style: [ double, double, double, double ]
+          color: [ blue, blue, blue, blue ]
diff --git a/gfx/wr/wrench/reftests/border/border-gradient-nine-patch.png b/gfx/wr/wrench/reftests/border/border-gradient-nine-patch.png
new file mode 100644
index 0000000000..1f082e656e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-gradient-nine-patch.png
diff --git a/gfx/wr/wrench/reftests/border/border-gradient-nine-patch.yaml b/gfx/wr/wrench/reftests/border/border-gradient-nine-patch.yaml
new file mode 100644
index 0000000000..9a2d6991a0
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-gradient-nine-patch.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: border
+      bounds: [ 0, 0, 200, 200 ]
+      width: 30
+      border-type: gradient
+      start: [ 0, 200 ]
+      end: [ 200, 0 ]
+      stops: [ 0.0, red, 0.177, red, 0.177, yellow, 0.50, yellow, 0.50, red ]
+      slice: [ 50 ]
+      outset: 0
diff --git a/gfx/wr/wrench/reftests/border/border-gradient-simple-ref.yaml b/gfx/wr/wrench/reftests/border/border-gradient-simple-ref.yaml
new file mode 100644
index 0000000000..d961c12041
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-gradient-simple-ref.yaml
@@ -0,0 +1,55 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      items:
+        - type: gradient # top left
+          bounds: [ 0, 0, 10, 10]
+          start: [ 25, 0 ]
+          end: [ 25, 50 ]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: gradient # top right
+          bounds: [ 40, 0, 10, 10]
+          start: [ -15, 0 ]
+          end: [ -15, 50 ]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: gradient # bottom left
+          bounds: [ 0, 40, 10, 10]
+          start: [ 25, -40 ]
+          end: [ 25, 10 ]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: gradient # bottom right
+          bounds: [ 40, 40, 10, 10]
+          start: [ -15, -40 ]
+          end: [ -15, 10 ]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: gradient # top
+          bounds: [ 10, 0, 30, 10]
+          start: [ 15, 0 ]
+          end: [ 15, 50 ]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: gradient # right
+          bounds: [ 40, 10, 10, 30]
+          start: [ -15, -10 ]
+          end: [ -15, 40 ]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: gradient # bottom
+          bounds: [ 10, 40, 30, 10]
+          start: [ 15, -40 ]
+          end: [ 15, 10 ]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: gradient # left
+          bounds: [ 0, 10, 10, 30]
+          start: [ 25, -10 ]
+          end: [ 25, 40 ]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+
diff --git a/gfx/wr/wrench/reftests/border/border-gradient-simple.yaml b/gfx/wr/wrench/reftests/border/border-gradient-simple.yaml
new file mode 100644
index 0000000000..ef2d5a033a
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-gradient-simple.yaml
@@ -0,0 +1,14 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 10, 10, 10, 10 ]
+          border-type: gradient
+          start: [ 25, 0 ]
+          end: [ 25, 50 ]
+          stops: [ 0.0, red, 1.0, green ]
+          outset: [ 0, 0, 0, 0 ]
diff --git a/gfx/wr/wrench/reftests/border/border-groove-simple-ref.yaml b/gfx/wr/wrench/reftests/border/border-groove-simple-ref.yaml
new file mode 100644
index 0000000000..9dfe5f3358
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-groove-simple-ref.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 6, 6, 6, 6 ]
+          border-type: normal
+          style: [ solid, solid, solid, solid ]
+          color: [ 0 0 170 1.0, 0 0 255 1.0, 0 0 255 1.0, 0 0 170 1.0 ]
+    - type: stacking-context
+      bounds: [6, 6, 38, 38]
+      items:
+        - type: border
+          bounds: [ 0, 0, 38, 38 ]
+          width: [ 6, 6, 6, 6 ]
+          border-type: normal
+          style: [ solid, solid, solid, solid ]
+          color: [ 0 0 255 1.0, 0 0 170 1.0, 0 0 170 1.0, 0 0 255 1.0 ]
diff --git a/gfx/wr/wrench/reftests/border/border-groove-simple.yaml b/gfx/wr/wrench/reftests/border/border-groove-simple.yaml
new file mode 100644
index 0000000000..0d992d5dc6
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-groove-simple.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 12, 12, 12, 12 ]
+          border-type: normal
+          style: [ groove, groove, groove, groove ]
+          color: [ blue, blue, blue, blue ]
diff --git a/gfx/wr/wrench/reftests/border/border-image-crash-ref.yaml b/gfx/wr/wrench/reftests/border/border-image-crash-ref.yaml
new file mode 100644
index 0000000000..9ea9184348
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-crash-ref.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 100, 100, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 32
+          image-height: 32
+          slice: [ 3, 0, 1, 36 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: stretch
+          fill: true
+        - type: rect
+          bounds: [ 100, 100, 192, 192 ]
+          color: white
diff --git a/gfx/wr/wrench/reftests/border/border-image-crash.yaml b/gfx/wr/wrench/reftests/border/border-image-crash.yaml
new file mode 100644
index 0000000000..9ea9184348
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-crash.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 100, 100, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 32
+          image-height: 32
+          slice: [ 3, 0, 1, 36 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: stretch
+          fill: true
+        - type: rect
+          bounds: [ 100, 100, 192, 192 ]
+          color: white
diff --git a/gfx/wr/wrench/reftests/border/border-image-empty-slice-ref.png b/gfx/wr/wrench/reftests/border/border-image-empty-slice-ref.png
new file mode 100644
index 0000000000..8ba6808ac9
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-empty-slice-ref.png
diff --git a/gfx/wr/wrench/reftests/border/border-image-empty-slice.yaml b/gfx/wr/wrench/reftests/border/border-image-empty-slice.yaml
new file mode 100644
index 0000000000..16f22b32f4
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-empty-slice.yaml
@@ -0,0 +1,50 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 20, 20, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32, 0, 32, 0 ]
+          outset: 0
+          repeat-vertical: round
+          repeat-horizontal: round
+        - type: border
+          bounds: [ 240, 20, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 0, 32, 0, 32 ]
+          outset: 0
+          repeat-vertical: round
+          repeat-horizontal: round
+        - type: border
+          bounds: [ 20, 240, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32, 0, 0, 32 ]
+          outset: 0
+          repeat-vertical: round
+          repeat-horizontal: round
+        - type: border
+          bounds: [ 240, 240, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 0, 32, 32, 0 ]
+          outset: 0
+          repeat-vertical: round
+          repeat-horizontal: round
diff --git a/gfx/wr/wrench/reftests/border/border-image-fill-2-ref.png b/gfx/wr/wrench/reftests/border/border-image-fill-2-ref.png
new file mode 100644
index 0000000000..5bb7dc8fb2
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-fill-2-ref.png
diff --git a/gfx/wr/wrench/reftests/border/border-image-fill-2.yaml b/gfx/wr/wrench/reftests/border/border-image-fill-2.yaml
new file mode 100644
index 0000000000..653c4f34e4
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-fill-2.yaml
@@ -0,0 +1,55 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 20, 20, 200, 200 ]
+          width: [20, 40]
+          border-type: image
+          image-source: "border-image-src-2.png"
+          image-width: 100
+          image-height: 50
+          slice: [ 20, 40 ]
+          outset: 0
+          repeat-vertical: repeat
+          repeat-horizontal: repeat
+          fill: true
+        - type: border
+          bounds: [ 240, 20, 200, 200 ]
+          width: [20, 40]
+          slice: [ 20, 40 ]
+          border-type: image
+          image-source: "border-image-src-2.png"
+          image-width: 100
+          image-height: 50
+          slice: [ 20, 40 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: repeat
+          fill: true
+        - type: border
+          bounds: [ 20, 240, 200, 200 ]
+          width: [20, 40]
+          border-type: image
+          image-source: "border-image-src-2.png"
+          image-width: 100
+          image-height: 50
+          slice: [ 20, 40 ]
+          outset: 0
+          repeat-vertical: repeat
+          repeat-horizontal: stretch
+          fill: true
+        - type: border
+          bounds: [ 240, 240, 200, 200 ]
+          width: [20, 40]
+          border-type: image
+          image-source: "border-image-src-2.png"
+          image-width: 100
+          image-height: 50
+          slice: [ 20, 40 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: stretch
+          fill: true
diff --git a/gfx/wr/wrench/reftests/border/border-image-fill-ref.png b/gfx/wr/wrench/reftests/border/border-image-fill-ref.png
new file mode 100644
index 0000000000..9d618bc76e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-fill-ref.png
diff --git a/gfx/wr/wrench/reftests/border/border-image-fill.yaml b/gfx/wr/wrench/reftests/border/border-image-fill.yaml
new file mode 100644
index 0000000000..0e27b993c5
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-fill.yaml
@@ -0,0 +1,54 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 100, 100, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: repeat
+          repeat-horizontal: repeat
+          fill: true
+        - type: border
+          bounds: [ 300, 100, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: repeat
+          fill: true
+        - type: border
+          bounds: [ 100, 300, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: repeat
+          repeat-horizontal: stretch
+          fill: true
+        - type: border
+          bounds: [ 300, 300, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: stretch
+          fill: true
diff --git a/gfx/wr/wrench/reftests/border/border-image-ref.png b/gfx/wr/wrench/reftests/border/border-image-ref.png
new file mode 100644
index 0000000000..73e4eb5256
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-ref.png
diff --git a/gfx/wr/wrench/reftests/border/border-image-round-ref.png b/gfx/wr/wrench/reftests/border/border-image-round-ref.png
new file mode 100644
index 0000000000..62a18fbba9
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-round-ref.png
diff --git a/gfx/wr/wrench/reftests/border/border-image-round.yaml b/gfx/wr/wrench/reftests/border/border-image-round.yaml
new file mode 100644
index 0000000000..e46a90c056
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-round.yaml
@@ -0,0 +1,42 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        # The pattern fits exactly a whole number of times in the border.
+        - type: border
+          bounds: [ 50, 50, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: round
+          repeat-horizontal: round
+        # The pattern has to be stretched to fit.
+        - type: border
+          bounds: [ 300, 50, 200, 200 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: round
+          repeat-horizontal: round
+        # The pattern has to be shrunk to fit.
+        - type: border
+          bounds: [ 550, 50, 180, 180 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: round
+          repeat-horizontal: round
diff --git a/gfx/wr/wrench/reftests/border/border-image-src-2.png b/gfx/wr/wrench/reftests/border/border-image-src-2.png
new file mode 100644
index 0000000000..5ebebaf21f
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-src-2.png
diff --git a/gfx/wr/wrench/reftests/border/border-image-src.png b/gfx/wr/wrench/reftests/border/border-image-src.png
new file mode 100644
index 0000000000..128e560d90
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image-src.png
diff --git a/gfx/wr/wrench/reftests/border/border-image.yaml b/gfx/wr/wrench/reftests/border/border-image.yaml
new file mode 100644
index 0000000000..5dbc0acb1e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-image.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 100, 100, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: stretch
diff --git a/gfx/wr/wrench/reftests/border/border-invisible-ref.yaml b/gfx/wr/wrench/reftests/border/border-invisible-ref.yaml
new file mode 100644
index 0000000000..949868c9b2
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-invisible-ref.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 100, 100]
+      items:
+        - type: rect
+          bounds: [99, 10, 1, 90]
+          color: black
diff --git a/gfx/wr/wrench/reftests/border/border-invisible.yaml b/gfx/wr/wrench/reftests/border/border-invisible.yaml
new file mode 100644
index 0000000000..4838786299
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-invisible.yaml
@@ -0,0 +1,17 @@
+--- # checks that invisible border corners don't render
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 100, 100]
+      items:
+        - type: border
+          bounds: [ 10, 10, 90, 90 ]
+          width: [0, 0, 0, 1]
+          border-type: normal
+          style: solid
+          radius:
+            top-left: 10
+            bottom-right: 0
+            top-right: 0
+            bottom-left: 3
+          color: [red, black, red, red]
diff --git a/gfx/wr/wrench/reftests/border/border-no-bogus-line-ref.png b/gfx/wr/wrench/reftests/border/border-no-bogus-line-ref.png
new file mode 100644
index 0000000000..fefa2bcbce
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-no-bogus-line-ref.png
diff --git a/gfx/wr/wrench/reftests/border/border-no-bogus-line.yaml b/gfx/wr/wrench/reftests/border/border-no-bogus-line.yaml
new file mode 100644
index 0000000000..a030211da9
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-no-bogus-line.yaml
@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 100, 100]
+      items:
+        - type: border
+          bounds: [ 10, 10, 90, 80 ]
+          width: 3
+          border-type: normal
+          style: solid
+          color: [ black, black, black, black ]
+          radius: 40.5
diff --git a/gfx/wr/wrench/reftests/border/border-none-ref.yaml b/gfx/wr/wrench/reftests/border/border-none-ref.yaml
new file mode 100644
index 0000000000..e011c78eb5
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-none-ref.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: rect
+          bounds: [ 0, 0, 500, 12 ]
+          color: black
diff --git a/gfx/wr/wrench/reftests/border/border-none.yaml b/gfx/wr/wrench/reftests/border/border-none.yaml
new file mode 100644
index 0000000000..4b423c7da5
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-none.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 500, 500 ]
+          width: [ 12, 12, 12, 12 ]
+          border-type: normal
+          style: [ solid, none, none, none ]
+          color: [ black ]
diff --git a/gfx/wr/wrench/reftests/border/border-overlapping-corner-ref.yaml b/gfx/wr/wrench/reftests/border/border-overlapping-corner-ref.yaml
new file mode 100644
index 0000000000..3ffbaacc00
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-overlapping-corner-ref.yaml
@@ -0,0 +1,19 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 200, 200]
+      items:
+        - type: clip
+          bounds: [ 0, 0, 200, 200 ]
+          complex:
+            - rect: [ 10, 10, 180, 180 ]
+              radius:
+                top-left: [180, 180]
+                top-right: [0, 0]
+                bottom-left: [0, 0]
+                bottom-right: [180, 180]
+          items:
+            - type: rect
+              bounds: [ 0, 0, 200, 200 ]
+              color: [ 0, 0, 255, 0.5 ]
diff --git a/gfx/wr/wrench/reftests/border/border-overlapping-corner.yaml b/gfx/wr/wrench/reftests/border/border-overlapping-corner.yaml
new file mode 100644
index 0000000000..08e71fabef
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-overlapping-corner.yaml
@@ -0,0 +1,17 @@
+--- # Checks that corners are clipped correctly when they overlap with an adjacent corner
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 200, 200]
+      items:
+        - type: border
+          bounds: [ 10, 10, 180, 180 ]
+          width: 90
+          border-type: normal
+          style: solid
+          radius:
+            top-left: 180
+            bottom-right: 180
+            top-right: 0
+            bottom-left: 0
+          color: [ [0, 0, 255, 0.5] ]
diff --git a/gfx/wr/wrench/reftests/border/border-overlapping-edge-ref.yaml b/gfx/wr/wrench/reftests/border/border-overlapping-edge-ref.yaml
new file mode 100644
index 0000000000..5cb34e5ae2
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-overlapping-edge-ref.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 40]
+      items:
+        - type: rect
+          bounds: [ 10, 10, 100, 20 ]
+          color: [ 0, 0, 255, 0.5 ]
diff --git a/gfx/wr/wrench/reftests/border/border-overlapping-edge.yaml b/gfx/wr/wrench/reftests/border/border-overlapping-edge.yaml
new file mode 100644
index 0000000000..e39e06fddc
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-overlapping-edge.yaml
@@ -0,0 +1,12 @@
+--- # Checks that segments are clipped correctly when opposite edges of the border overlap
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 40]
+      items:
+        - type: border
+          bounds: [ 10, 10, 100, 20 ]
+          width: 15
+          border-type: normal
+          style: solid
+          color: [ [0, 0, 255, 0.5] ]
diff --git a/gfx/wr/wrench/reftests/border/border-radial-gradient-nine-patch.png b/gfx/wr/wrench/reftests/border/border-radial-gradient-nine-patch.png
new file mode 100644
index 0000000000..fd1ed84b8d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-radial-gradient-nine-patch.png
diff --git a/gfx/wr/wrench/reftests/border/border-radial-gradient-nine-patch.yaml b/gfx/wr/wrench/reftests/border/border-radial-gradient-nine-patch.yaml
new file mode 100644
index 0000000000..d3936a7424
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-radial-gradient-nine-patch.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: border
+      bounds: [ 0, 0, 200, 200 ]
+      width: 20
+      border-type: radial-gradient
+      center: [ 100, 100 ]
+      radius: [ 200, 200 ]
+      stops: [ 0.0, red, 0.5, red, 0.5, green ]
+      slice: [ 50 ]
+      outset: 0
diff --git a/gfx/wr/wrench/reftests/border/border-radial-gradient-simple-ref.yaml b/gfx/wr/wrench/reftests/border/border-radial-gradient-simple-ref.yaml
new file mode 100644
index 0000000000..7c3e93fd76
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-radial-gradient-simple-ref.yaml
@@ -0,0 +1,54 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      items:
+        - type: radial-gradient # top left
+          bounds: [ 0, 0, 10, 10]
+          center: [ 25, 25 ]
+          radius: [50, 50]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: radial-gradient # top right
+          bounds: [ 40, 0, 10, 10]
+          center: [ -15, 25 ]
+          radius: [50, 50]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: radial-gradient # bottom left
+          bounds: [ 0, 40, 10, 10]
+          center: [ 25, -15 ]
+          radius: [50, 50]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: radial-gradient # bottom right
+          bounds: [ 40, 40, 10, 10]
+          center: [ -15, -15 ]
+          radius: [50, 50]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: radial-gradient # top
+          bounds: [ 10, 0, 30, 10]
+          center: [ 15, 25 ]
+          radius: [50, 50]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: radial-gradient # right
+          bounds: [ 40, 10, 10, 30]
+          center: [ -15, 15 ]
+          radius: [50, 50]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: radial-gradient # bottom
+          bounds: [ 10, 40, 30, 10]
+          center: [ 15, -15 ]
+          radius: [50, 50]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
+        - type: radial-gradient # left
+          bounds: [ 0, 10, 10, 30]
+          center: [ 25, 15 ]
+          radius: [50, 50]
+          stops: [ 0.0, red, 1.0, green ]
+          repeat: false
diff --git a/gfx/wr/wrench/reftests/border/border-radial-gradient-simple.yaml b/gfx/wr/wrench/reftests/border/border-radial-gradient-simple.yaml
new file mode 100644
index 0000000000..d5110ce4ae
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-radial-gradient-simple.yaml
@@ -0,0 +1,14 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 10, 10, 10, 10 ]
+          border-type: radial-gradient
+          center: [ 25, 25 ]
+          radius: [ 50, 50 ]
+          stops: [ 0.0, red, 1.0, green ]
+          outset: [ 0, 0, 0, 0 ]
diff --git a/gfx/wr/wrench/reftests/border/border-radii.png b/gfx/wr/wrench/reftests/border/border-radii.png
new file mode 100644
index 0000000000..87d5b674fd
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-radii.png
diff --git a/gfx/wr/wrench/reftests/border/border-radii.yaml b/gfx/wr/wrench/reftests/border/border-radii.yaml
new file mode 100644
index 0000000000..c0b2fda968
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-radii.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 100, 100]
+      items:
+        - type: border
+          bounds: [ 10, 10, 90, 90 ]
+          width: 10
+          border-type: normal
+          style: solid
+          radius:
+            top-left: 16
+            bottom-right: 16
+            top-right: 8
+            bottom-left: 8
+          color: [ blue, blue, blue, blue ]
diff --git a/gfx/wr/wrench/reftests/border/border-ridge-simple-ref.yaml b/gfx/wr/wrench/reftests/border/border-ridge-simple-ref.yaml
new file mode 100644
index 0000000000..b940962d45
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-ridge-simple-ref.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 6, 6, 6, 6 ]
+          border-type: normal
+          style: [ solid, solid, solid, solid ]
+          color: [ 0 0 255 1.0, 0 0 170 1.0, 0 0 170 1.0, 0 0 255 1.0 ]
+    - type: stacking-context
+      bounds: [6, 6, 38, 38]
+      items:
+        - type: border
+          bounds: [ 0, 0, 38, 38 ]
+          width: [ 6, 6, 6, 6 ]
+          border-type: normal
+          style: [ solid, solid, solid, solid ]
+          color: [ 0 0 170 1.0, 0 0 255 1.0, 0 0 255 1.0, 0 0 170 1.0 ]
diff --git a/gfx/wr/wrench/reftests/border/border-ridge-simple.yaml b/gfx/wr/wrench/reftests/border/border-ridge-simple.yaml
new file mode 100644
index 0000000000..906b40fa42
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-ridge-simple.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 12, 12, 12, 12 ]
+          border-type: normal
+          style: [ ridge, ridge, ridge, ridge ]
+          color: [ blue, blue, blue, blue ]
diff --git a/gfx/wr/wrench/reftests/border/border-suite-2.png b/gfx/wr/wrench/reftests/border/border-suite-2.png
new file mode 100644
index 0000000000..4e7f6abc68
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-suite-2.png
diff --git a/gfx/wr/wrench/reftests/border/border-suite-2.yaml b/gfx/wr/wrench/reftests/border/border-suite-2.yaml
new file mode 100644
index 0000000000..f86b20da30
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-suite-2.yaml
@@ -0,0 +1,171 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 1000, 1000]
+      items:
+        - type: border
+          bounds: [ 10, 10, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: groove
+          color: [ red, green, blue, yellow ]
+          radius: 0
+        - type: border
+          bounds: [ 120, 10, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: groove
+          color: [ red, green, blue, yellow ]
+          radius: 10
+        - type: border
+          bounds: [ 230, 10, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: groove
+          color: [ red, green, blue, yellow ]
+          radius: 20
+        - type: border
+          bounds: [ 340, 10, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: groove
+          color: [ red, green, blue, yellow ]
+          radius: 30
+        - type: border
+          bounds: [ 450, 10, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: groove
+          color: [ red, green, blue, yellow ]
+          radius: 40
+        - type: border
+          bounds: [ 560, 10, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: groove
+          color: [ red, green, blue, yellow ]
+          radius: 50
+
+        - type: border
+          bounds: [ 10, 120, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: ridge
+          color: [ red, green, blue, yellow ]
+          radius: 0
+        - type: border
+          bounds: [ 120, 120, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: ridge
+          color: [ red, green, blue, yellow ]
+          radius: 10
+        - type: border
+          bounds: [ 230, 120, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: ridge
+          color: [ red, green, blue, yellow ]
+          radius: 20
+        - type: border
+          bounds: [ 340, 120, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: ridge
+          color: [ red, green, blue, yellow ]
+          radius: 30
+        - type: border
+          bounds: [ 450, 120, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: ridge
+          color: [ red, green, blue, yellow ]
+          radius: 40
+        - type: border
+          bounds: [ 560, 120, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: ridge
+          color: [ red, green, blue, yellow ]
+          radius: 50
+
+        - type: border
+          bounds: [ 10, 230, 100, 100 ]
+          width: 1
+          border-type: normal
+          style: dashed
+          color: [ red, green, blue, black ]
+          radius: 16
+        - type: border
+          bounds: [ 120, 230, 100, 100 ]
+          width: 2
+          border-type: normal
+          style: dashed
+          color: [ red, green, blue, black ]
+          radius: 32
+        - type: border
+          bounds: [ 230, 230, 100, 100 ]
+          width: 3
+          border-type: normal
+          style: dashed
+          color: [ red, green, blue, black ]
+          radius: 32
+        - type: border
+          bounds: [ 340, 230, 100, 100 ]
+          width: 8
+          border-type: normal
+          style: dashed
+          color: [ red, green, blue, black ]
+          radius: 32
+        - type: border
+          bounds: [ 450, 230, 200, 100 ]
+          width: 4
+          border-type: normal
+          style: dotted
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [32, 48],
+            top-right: [64, 32],
+            bottom-left: [10, 40],
+            bottom-right: [48, 48],
+          }
+
+        - type: border
+          bounds: [ 10, 340, 200, 200 ]
+          width: [4, 8, 16, 8]
+          border-type: normal
+          style: dashed
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [32, 64],
+            top-right: [32, 32],
+            bottom-left: [64, 32],
+            bottom-right: [32, 32],
+          }
+        - type: border
+          bounds: [ 230, 340, 200, 200 ]
+          width: 4
+          border-type: normal
+          style: dashed
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [64, 128],
+            top-right: [16, 32],
+            bottom-left: [40, 18],
+            bottom-right: [100, 50],
+          }
+        - type: border
+          bounds: [ 450, 340, 200, 100 ]
+          width: 8
+          border-type: normal
+          style: dotted
+          color: [ red, green, blue, black ]
+          radius: 32
+        - type: border
+          bounds: [ 450, 450, 200, 100 ]
+          width: [8, 8, 12, 12]
+          border-type: normal
+          style: dotted
+          color: [ red, green, blue, black ]
+          radius: 40
diff --git a/gfx/wr/wrench/reftests/border/border-suite-3.png b/gfx/wr/wrench/reftests/border/border-suite-3.png
new file mode 100644
index 0000000000..4a3f9c2556
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-suite-3.png
diff --git a/gfx/wr/wrench/reftests/border/border-suite-3.yaml b/gfx/wr/wrench/reftests/border/border-suite-3.yaml
new file mode 100644
index 0000000000..2deb821071
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-suite-3.yaml
@@ -0,0 +1,57 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 1000, 1000]
+      items:
+        - type: border
+          bounds: [ 10, 10, 200, 200 ]
+          width: 10
+          border-type: normal
+          style: [ solid, double, solid, double ]
+          color: [ red, green, blue, black ]
+          radius: 16
+        - type: border
+          bounds: [ 230, 10, 200, 200 ]
+          width: 16
+          border-type: normal
+          style: [ solid, double, solid, double ]
+          color: [ red, green, blue, black ]
+        - type: border
+          bounds: [ 450, 10, 200, 200 ]
+          width: 10
+          border-type: normal
+          style: [ solid, double, solid, double ]
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [32, 48],
+            top-right: [64, 32],
+            bottom-left: [10, 40],
+            bottom-right: [48, 48],
+          }
+
+        - type: border
+          bounds: [ 10, 230, 200, 200 ]
+          width: 24
+          border-type: normal
+          style: [ inset, double, ridge, groove ]
+          color: [ red, green, blue, black ]
+          radius: 16
+        - type: border
+          bounds: [ 230, 230, 200, 200 ]
+          width: 32
+          border-type: normal
+          style: [ outset, double, ridge, groove ]
+          color: [ red, green, blue, black ]
+        - type: border
+          bounds: [ 450, 230, 200, 200 ]
+          width: 18
+          border-type: normal
+          style: [ outset, double, ridge, groove ]
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [32, 48],
+            top-right: [64, 32],
+            bottom-left: [10, 40],
+            bottom-right: [48, 48],
+          }
diff --git a/gfx/wr/wrench/reftests/border/border-suite.png b/gfx/wr/wrench/reftests/border/border-suite.png
new file mode 100644
index 0000000000..79232ec1e6
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-suite.png
diff --git a/gfx/wr/wrench/reftests/border/border-suite.yaml b/gfx/wr/wrench/reftests/border/border-suite.yaml
new file mode 100644
index 0000000000..5c74679a0a
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/border-suite.yaml
@@ -0,0 +1,351 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 1000, 1000]
+      items:
+        - type: border
+          bounds: [ 10, 10, 100, 100 ]
+          width: [ 1, 1, 1, 1 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 20],
+            top-right: [10, 10],
+            bottom-left: [25, 25],
+            bottom-right: [0, 0],
+          }
+        - type: border
+          bounds: [ 120, 10, 100, 100 ]
+          width: [ 2, 2, 2, 2 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 20],
+            top-right: [10, 10],
+            bottom-left: [25, 25],
+            bottom-right: [0, 0],
+          }
+        - type: border
+          bounds: [ 230, 10, 100, 100 ]
+          width: [ 3, 3, 3, 3 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 20],
+            top-right: [10, 10],
+            bottom-left: [25, 25],
+            bottom-right: [0, 0],
+          }
+        - type: border
+          bounds: [ 340, 10, 100, 100 ]
+          width: [ 5, 5, 5, 5 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 20],
+            top-right: [10, 10],
+            bottom-left: [25, 25],
+            bottom-right: [0, 0],
+          }
+        - type: border
+          bounds: [ 450, 10, 100, 100 ]
+          width: [ 5, 5, 5, 5 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 20],
+            top-right: [10, 10],
+            bottom-left: [25, 25],
+            bottom-right: [0, 0],
+          }
+        - type: border
+          bounds: [ 560, 10, 100, 100 ]
+          width: [ 10, 10, 10, 10 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 20],
+            top-right: [10, 10],
+            bottom-left: [25, 25],
+            bottom-right: [0, 0],
+          }
+
+        - type: border
+          bounds: [ 10, 120, 100, 100 ]
+          width: 10
+          border-type: normal
+          style: inset
+          color: [ red, green, blue, black ]
+        - type: border
+          bounds: [ 120, 120, 100, 100 ]
+          width: 10
+          border-type: normal
+          style: outset
+          color: [ red, green, blue, black ]
+        - type: border
+          bounds: [ 230, 120, 100, 100 ]
+          width: 10
+          border-type: normal
+          style: inset
+          color: [ red, green, blue, black ]
+          radius: 10
+        - type: border
+          bounds: [ 340, 120, 100, 100 ]
+          width: 10
+          border-type: normal
+          style: outset
+          color: [ red, green, blue, black ]
+          radius: 20
+        - type: border
+          bounds: [ 450, 120, 100, 100 ]
+          width: 10
+          border-type: normal
+          style: outset
+          color: [ red, green, blue, black ]
+          radius: 35
+        - type: border
+          bounds: [ 560, 120, 100, 100 ]
+          width: 10
+          border-type: normal
+          style: outset
+          color: [ red, green, blue, black ]
+          radius: 50
+
+        - type: border
+          bounds: [ 10, 230, 100, 100 ]
+          width: [ 1, 1, 1, 1 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 120, 230, 100, 100 ]
+          width: [ 2, 2, 2, 2 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 230, 230, 100, 100 ]
+          width: [ 3, 3, 3, 3 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 340, 230, 100, 100 ]
+          width: [ 5, 5, 5, 5 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 450, 230, 100, 100 ]
+          width: [ 5, 5, 5, 5 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 560, 230, 100, 100 ]
+          width: [ 10, 10, 10, 10 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+
+        - type: border
+          bounds: [ 10, 340, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 120, 340, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 230, 340, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 340, 340, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 450, 340, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+        - type: border
+          bounds: [ 560, 340, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: {
+            top-left: [20, 40],
+            top-right: [30, 10],
+            bottom-left: [21, 7],
+            bottom-right: [0, 5],
+          }
+
+        - type: border
+          bounds: [ 10, 450, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: 0
+        - type: border
+          bounds: [ 120, 450, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: 10
+        - type: border
+          bounds: [ 230, 450, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: 20
+        - type: border
+          bounds: [ 340, 450, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: 30
+        - type: border
+          bounds: [ 450, 450, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: 40
+        - type: border
+          bounds: [ 560, 450, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: solid
+          color: [ red, green, blue, black ]
+          radius: 50
+
+        - type: border
+          bounds: [ 10, 560, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: 0
+        - type: border
+          bounds: [ 120, 560, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: 10
+        - type: border
+          bounds: [ 230, 560, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: 20
+        - type: border
+          bounds: [ 340, 560, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: 30
+        - type: border
+          bounds: [ 450, 560, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: 40
+        - type: border
+          bounds: [ 560, 560, 100, 100 ]
+          width: [ 20, 20, 20, 20 ]
+          border-type: normal
+          style: double
+          color: [ red, green, blue, black ]
+          radius: 50
diff --git a/gfx/wr/wrench/reftests/border/degenerate-curve.png b/gfx/wr/wrench/reftests/border/degenerate-curve.png
new file mode 100644
index 0000000000..9c3805e33e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/degenerate-curve.png
diff --git a/gfx/wr/wrench/reftests/border/degenerate-curve.yaml b/gfx/wr/wrench/reftests/border/degenerate-curve.yaml
new file mode 100644
index 0000000000..c66ac6356f
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/degenerate-curve.yaml
@@ -0,0 +1,258 @@
+---
+root: 
+  items: 
+    - 
+      bounds: [0, 0, 1024, 740]
+      type: "stacking-context"
+      "scroll-policy": scrollable
+      "transform-style": flat
+      items: 
+        - type: clip
+          bounds: [28, 18, 144, 122]
+          complex:
+            - rect: [28, 18, 144, 122]
+              radius:
+                  "top-left": [61, 61]
+                  "top-right": [61, 61]
+                  "bottom-left": [0, 0]
+                  "bottom-right": [61, 61]
+          items:
+          - type: rect
+            color: 255 0 0 1.0000
+            bounds: [28, 18, 144, 122]
+        - 
+          bounds: [28, 18, 144, 122]
+          type: border
+          width: [18, 0, 18, 0]
+          "border-type": normal
+          color: 0 0 255 1.0000
+          style: 
+            - solid
+            - none
+            - solid
+            - none
+          radius: 
+            "top-left": [61, 61]
+            "top-right": [61, 61]
+            "bottom-left": [0, 0]
+            "bottom-right": [61, 61]
+        - type: clip
+          bounds: [28, 160, 144, 122]
+          complex:
+            - rect: [28, 160, 144, 122]
+              radius: [61, 61]
+          items:
+          - type: rect
+            bounds: [28, 160, 144, 122]
+            color: 255 0 0 1.0000
+        - 
+          bounds: [28, 160, 144, 122]
+          type: border
+          width: [18, 0, 18, 0]
+          "border-type": normal
+          color: 0 0 255 1.0000
+          style: 
+            - solid
+            - none
+            - solid
+            - none
+          radius: [61, 61]
+        - type: clip
+          bounds: [28, 302, 154, 122]
+          complex:
+            - rect: [28, 302, 154, 122]
+              radius: 
+                "top-left": [0, 0]
+                "top-right": [61, 61]
+                "bottom-left": [0, 0]
+                "bottom-right": [61, 61]
+          items:
+          - type: rect
+            bounds: [28, 302, 154, 122]
+            color: 255 0 0 1.0000
+        - type: border
+          bounds: [28, 302, 154, 122]
+          width: [18, 0, 18, 10]
+          "border-type": normal
+          color: 
+            - 0 0 255 1.0000
+            - 0 0 255 1.0000
+            - 0 0 255 1.0000
+            - 0 0 255 1.0000
+          style: 
+            - solid
+            - none
+            - solid
+            - solid
+          radius: 
+            "top-left": [0, 0]
+            "top-right": [61, 61]
+            "bottom-left": [0, 0]
+            "bottom-right": [61, 61]
+        - type: clip
+          bounds: [202, 18, 145, 122]
+          complex:
+            - rect: [202, 18, 144.03334, 122]
+              radius: 
+                "top-left": [61, 61]
+                "top-right": [61, 61]
+                "bottom-left": [0, 0]
+                "bottom-right": [61, 61]
+          items:
+            - type: rect
+              bounds: [202, 18, 144.03334, 122]
+              color: 255 0 0 1.0000
+        - type: border
+          bounds: [202, 18, 144.03334, 122]
+          width: [18, 0.016666668, 18, 0.016666668]
+          "border-type": normal
+          color: 
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+          style: solid
+          radius: 
+            "top-left": [61, 61]
+            "top-right": [61, 61]
+            "bottom-left": [0, 0]
+            "bottom-right": [61, 61]
+        - type: clip
+          bounds: [202, 160, 144, 122]
+          complex:
+            - rect: [202, 160, 144, 122]
+              radius: [61, 61]
+          items:
+            - type: rect
+              bounds: [202, 160, 144, 122]
+              color: 255 0 0 1.0000
+        - type: border
+          bounds: [202, 160, 144, 122]
+          width: [18, 0, 18, 0]
+          "border-type": normal
+          color: 
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+          style: solid
+          radius: [61, 61]
+        - type: clip
+          bounds: [202, 302, 154, 122]
+          complex:
+            - rect: [202, 302, 154, 122]
+              radius: 
+                "top-left": [0, 0]
+                "top-right": [72, 72]
+                "bottom-left": [0, 0]
+                "bottom-right": [0, 0]
+          items:
+          - type: rect
+            bounds: [202, 302, 154, 122]
+            color: 255 0 0 1.0000
+        - 
+          bounds: [202, 302, 154, 122]
+          type: border
+          width: [18, 0, 18, 10]
+          "border-type": normal
+          color: 
+            - 0 0 255 1.0000
+            - 0 0 255 1.0000
+            - 0 0 255 1.0000
+            - 0 0 255 1.0000
+          style: 
+            - solid
+            - none
+            - solid
+            - solid
+          radius: 
+            "top-left": [0, 0]
+            "top-right": [72, 72]
+            "bottom-left": [0, 0]
+            "bottom-right": [0, 0]
+        - type: clip
+          bounds: [376, 18, 144, 122]
+          complex:
+            - rect: [376, 18, 144, 122]
+              radius: [61, 61]
+          items:
+          - type: rect
+            bounds: [376, 18, 144, 122]
+            color: 255 0 0 1.0000
+        - 
+          bounds: [376, 18, 144, 122]
+          type: border
+          width: [18, 0, 18, 0]
+          "border-type": normal
+          color: 
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+          style: 
+            - solid
+            - hidden
+            - solid
+            - hidden
+          radius: [61, 61]
+        - type: clip
+          bounds: [376, 160, 144, 122]
+          complex:
+            - rect: [376, 160, 144, 122]
+              radius: [61, 61]
+          items:
+          - type: rect
+            bounds: [376, 160, 144, 122]
+            color: 255 0 0 1.0000
+        - 
+          bounds: [376, 160, 144, 122]
+          clip: [-17895698, -17895698, 35791396, 35791396]
+          type: border
+          width: [18, 0, 18, 0]
+          "border-type": normal
+          color: 
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+          style: 
+            - solid
+            - none
+            - solid
+            - none
+          radius: [61, 61]
+        - type: clip
+          bounds: [376, 302, 144, 122]
+          complex:
+            - rect: [376, 302, 144, 122]
+              radius:
+                "top-left": [0, 0]
+                "top-right": [72, 72]
+                "bottom-left": [72, 72]
+                "bottom-right": [0, 0]
+          items:
+          - type: rect
+            bounds: [376, 302, 144, 122]
+            color: 255 0 0 1.0000
+        - 
+          bounds: [376, 302, 144, 122]
+          type: border
+          width: [18, 0, 18, 0]
+          "border-type": normal
+          color: 
+            - 0 0 255 1.0000
+            - 255 0 0 1.0000
+            - 0 0 255 1.0000
+            - 0 0 255 1.0000
+          style: 
+            - solid
+            - none
+            - solid
+            - hidden
+          radius: 
+            "top-left": [0, 0]
+            "top-right": [72, 72]
+            "bottom-left": [72, 72]
+            "bottom-right": [0, 0]
+  id: [0, 1]
+pipelines: []
diff --git a/gfx/wr/wrench/reftests/border/discontinued-dash.png b/gfx/wr/wrench/reftests/border/discontinued-dash.png
new file mode 100644
index 0000000000..67625e1928
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/discontinued-dash.png
diff --git a/gfx/wr/wrench/reftests/border/discontinued-dash.yaml b/gfx/wr/wrench/reftests/border/discontinued-dash.yaml
new file mode 100644
index 0000000000..886f9cfe59
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/discontinued-dash.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 10, 10, 300, 300]
+          width: [ 10, 10, 10, 10 ]
+          border-type: normal
+          style: [ dashed, solid, solid, solid ]
+          color: [ black, black, black, black ]
diff --git a/gfx/wr/wrench/reftests/border/dotted-corner-small-radius.png b/gfx/wr/wrench/reftests/border/dotted-corner-small-radius.png
new file mode 100644
index 0000000000..a83ca988b0
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/dotted-corner-small-radius.png
diff --git a/gfx/wr/wrench/reftests/border/dotted-corner-small-radius.yaml b/gfx/wr/wrench/reftests/border/dotted-corner-small-radius.yaml
new file mode 100644
index 0000000000..4e40c251e4
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/dotted-corner-small-radius.yaml
@@ -0,0 +1,11 @@
+---
+root: 
+  items: 
+    - bounds: [5, 5, 490, 490]
+      "clip-rect": [5, 5, 490, 490]
+      "backface-visible": true
+      type: border
+      width: 25
+      "border-type": normal
+      color: black
+      style: dotted
diff --git a/gfx/wr/wrench/reftests/border/green-square.yaml b/gfx/wr/wrench/reftests/border/green-square.yaml
new file mode 100644
index 0000000000..2f13625928
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/green-square.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: rect
+          bounds: [ 0, 0, 400, 400 ]
+          color: green
diff --git a/gfx/wr/wrench/reftests/border/max-scale-ref.yaml b/gfx/wr/wrench/reftests/border/max-scale-ref.yaml
new file mode 100644
index 0000000000..0647a7a864
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/max-scale-ref.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: border
+      bounds: [ 0, 0, 4000, 1 ]
+      width: [ 1, 0, 0, 0 ]
+      border-type: normal
+      style: solid
+      color: red
diff --git a/gfx/wr/wrench/reftests/border/max-scale.yaml b/gfx/wr/wrench/reftests/border/max-scale.yaml
new file mode 100644
index 0000000000..cf292d5798
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/max-scale.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      transform: scale(3000, 1)
+      items:
+        - type: border
+          bounds: [ 0, 0, 100, 100 ]
+          width: [ 1, 0, 0, 0 ]
+          border-type: normal
+          style: solid
+          color: red
diff --git a/gfx/wr/wrench/reftests/border/no-aa.yaml b/gfx/wr/wrench/reftests/border/no-aa.yaml
new file mode 100644
index 0000000000..f937a865f4
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/no-aa.yaml
@@ -0,0 +1,20 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 400, 400 ]
+          width: [ 200, 200, 200, 200 ]
+          border-type: normal
+          style: solid
+          color: [ green, green, transparent, transparent ]
+          do_aa: false
+        - type: border
+          bounds: [ 0, 0, 400, 400 ]
+          width: [ 200, 200, 200, 200 ]
+          border-type: normal
+          style: solid
+          color: [ transparent, transparent, green, green ]
+          do_aa: false
diff --git a/gfx/wr/wrench/reftests/border/overlapping.png b/gfx/wr/wrench/reftests/border/overlapping.png
new file mode 100644
index 0000000000..38dcdc79e2
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/overlapping.png
diff --git a/gfx/wr/wrench/reftests/border/overlapping.yaml b/gfx/wr/wrench/reftests/border/overlapping.yaml
new file mode 100644
index 0000000000..3340411eff
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/overlapping.yaml
@@ -0,0 +1,19 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 1000, 1000]
+      items:
+        - type: clip
+          bounds: [ 0, 0, 200, 200 ]
+          complex:
+            - rect: [ 0, 0, 200, 200 ]
+              radius:
+                top-left: [180, 180]
+                top-right: [0, 0]
+                bottom-left: [0, 0]
+                bottom-right: [180, 180]
+          items:
+            - type: rect
+              bounds: [ 0, 0, 200, 200 ]
+              color: blue
diff --git a/gfx/wr/wrench/reftests/border/reftest.list b/gfx/wr/wrench/reftests/border/reftest.list
new file mode 100644
index 0000000000..4f428036ab
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/reftest.list
@@ -0,0 +1,35 @@
+platform(linux,mac) == border-clamp-corner-radius.yaml border-clamp-corner-radius.png
+fuzzy(1,840) == border-gradient-simple.yaml border-gradient-simple-ref.yaml
+platform(linux,mac) == border-gradient-nine-patch.yaml border-gradient-nine-patch.png
+== border-radial-gradient-simple.yaml border-radial-gradient-simple-ref.yaml
+platform(linux,mac) == border-radial-gradient-nine-patch.yaml border-radial-gradient-nine-patch.png
+== fuzzy(1,10) border-radii.yaml border-radii.png
+== border-none.yaml border-none-ref.yaml
+fuzzy(128,69) == border-overlapping-corner.yaml border-overlapping-corner-ref.yaml
+== border-overlapping-edge.yaml border-overlapping-edge-ref.yaml
+== border-invisible.yaml border-invisible-ref.yaml
+platform(linux,mac) fuzzy(3,80) == border-suite.yaml border-suite.png
+platform(linux,mac) fuzzy(8,105) == border-suite-2.yaml border-suite-2.png
+platform(linux,mac) fuzzy(1,10) == border-suite-3.yaml border-suite-3.png
+skip_on(android,device) == border-double-simple.yaml border-double-simple-ref.yaml  # Fails on Pixel2
+== border-double-simple-2.yaml border-double-simple-2-ref.yaml
+skip_on(android,device) fuzzy(64,24) == border-groove-simple.yaml border-groove-simple-ref.yaml  # Fails on Pixel2
+skip_on(android,device) fuzzy(64,24) == border-ridge-simple.yaml border-ridge-simple-ref.yaml  # Fails on Pixel2
+platform(linux,mac) fuzzy(1,3) == degenerate-curve.yaml degenerate-curve.png
+platform(linux,mac) == border-image.yaml border-image-ref.png
+platform(linux,mac) == border-image-empty-slice.yaml border-image-empty-slice-ref.png
+platform(linux,mac) == border-image-round.yaml border-image-round-ref.png
+== border-image-crash.yaml border-image-crash-ref.yaml
+fuzzy(1,5000) == border-image-fill.yaml border-image-fill-ref.png
+fuzzy(2,25360) == border-image-fill-2.yaml border-image-fill-2-ref.png
+== border-no-bogus-line.yaml border-no-bogus-line-ref.png
+platform(linux,mac) fuzzy(1,130) == dotted-corner-small-radius.yaml dotted-corner-small-radius.png
+fuzzy-if(platform(swgl),1,20) == overlapping.yaml overlapping.png
+== zero-width.yaml blank.yaml
+platform(linux,mac) == small-dotted-border.yaml small-dotted-border.png
+fuzzy(1,30) == discontinued-dash.yaml discontinued-dash.png
+platform(linux,mac) == border-dashed-dotted-caching.yaml border-dashed-dotted-caching.png
+!= small-inset-outset.yaml small-inset-outset-notref.yaml
+fuzzy(1,90) == no-aa.yaml green-square.yaml
+skip_on(android,device) == border-double-1px.yaml border-double-1px-ref.yaml  # Fails on Pixel2
+== max-scale.yaml max-scale-ref.yaml
diff --git a/gfx/wr/wrench/reftests/border/small-dotted-border.png b/gfx/wr/wrench/reftests/border/small-dotted-border.png
new file mode 100644
index 0000000000..dc4132d6d7
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/small-dotted-border.png
diff --git a/gfx/wr/wrench/reftests/border/small-dotted-border.yaml b/gfx/wr/wrench/reftests/border/small-dotted-border.yaml
new file mode 100644
index 0000000000..2fb189bce2
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/small-dotted-border.yaml
@@ -0,0 +1,19 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 100, 20 ]
+          width: [ 1, 1, 1, 1 ]
+          border-type: normal
+          style: [ dotted, dotted, dotted, dotted ]
+          color: [ black, black, black, black ]
+
+        - type: border
+          bounds: [ 0, 30, 100, 20 ]
+          width: [ 2, 2, 2, 2 ]
+          border-type: normal
+          style: [ dotted, dotted, dotted, dotted ]
+          color: [ black, black, black, black ]
diff --git a/gfx/wr/wrench/reftests/border/small-inset-outset-notref.yaml b/gfx/wr/wrench/reftests/border/small-inset-outset-notref.yaml
new file mode 100644
index 0000000000..e55bdc84c6
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/small-inset-outset-notref.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 200, 200 ]
+          width: 1
+          border-type: normal
+          style: solid
+          color: black
diff --git a/gfx/wr/wrench/reftests/border/small-inset-outset.yaml b/gfx/wr/wrench/reftests/border/small-inset-outset.yaml
new file mode 100644
index 0000000000..f7bc42807b
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/small-inset-outset.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 200, 200 ]
+          width: 1
+          border-type: normal
+          style: inset
+          color: black
diff --git a/gfx/wr/wrench/reftests/border/zero-width.yaml b/gfx/wr/wrench/reftests/border/zero-width.yaml
new file mode 100644
index 0000000000..6d12d05bf8
--- /dev/null
+++ b/gfx/wr/wrench/reftests/border/zero-width.yaml
@@ -0,0 +1,12 @@
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 500, 500]
+      items:
+        - type: border
+          bounds: [ 0, 0, 50, 50 ]
+          width: [ 0, 0, 0, 0 ]
+          border-type: normal
+          style: [ solid, solid, solid, solid ]
+          color: [ blue, blue, blue, blue ]
+