1 files changed, 92 insertions, 0 deletions
diff --git a/gfx/tests/reftest/1616444-same-color-different-paths.html b/gfx/tests/reftest/1616444-same-color-different-paths.html
new file mode 100644
index 0000000000..be51b1d243
--- /dev/null
+++ b/gfx/tests/reftest/1616444-same-color-different-paths.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=windows-1252"><style>
+  .swatch {
+      float: left;
+      height: 40px;
+      width: 120px;
+      box-sizing: border-box;
+  }
+  .header {
+      border: 1px solid black;
+      font-size: 10px;
+      font-weight: bold;
+  }
+  br { clear: both; }
+  .layer { will-change: transform  }
+
+  .add-border { border-left: 1px solid transparent; }
+  .red { background: red }
+  .g-red { background: linear-gradient(red,red) }
+  .orange { background: orange }
+  .g-orange { background: linear-gradient(orange,orange) }
+  .yellow { background: yellow }
+  .g-yellow { background: linear-gradient(yellow,yellow) }
+  .green { background: green }
+  .g-green { background: linear-gradient(green,green) }
+  .blue { background: blue }
+  .g-blue { background: linear-gradient(blue,blue) }
+  .indigo { background: indigo }
+  .g-indigo { background: linear-gradient(indigo,indigo) }
+  .violet { background: violet }
+  .g-violet { background: linear-gradient(violet,violet) }
+
+</style>
+</head><body>
+  <div class="swatch header">A: named color</div>
+  <div class="swatch header">B: �&amp; will-change: transform</div>
+  <div class="swatch header">C: �&amp; border</div>
+  <div class="swatch header">D: solid-color gradient </div>
+  <div class="swatch header">E: �&amp; will-change: transform</div>
+  <div class="swatch header">F: �&amp; border</div>
+  <br>
+  <div class="swatch red"></div>
+  <div class="swatch red layer"></div>
+  <div class="swatch red layer add-border"></div>
+  <div class="swatch g-red"></div>
+  <div class="swatch g-red layer"></div>
+  <div class="swatch g-red layer add-border"></div>
+ <br>
+  <div class="swatch orange"></div>
+  <div class="swatch orange layer"></div>
+  <div class="swatch orange layer add-border"></div>
+  <div class="swatch g-orange"></div>
+  <div class="swatch g-orange layer"></div>
+  <div class="swatch g-orange layer add-border"></div>
+  <br>
+  <div class="swatch yellow"></div>
+  <div class="swatch yellow layer"></div>
+  <div class="swatch yellow layer add-border"></div>
+  <div class="swatch g-yellow"></div>
+  <div class="swatch g-yellow layer"></div>
+  <div class="swatch g-yellow layer add-border"></div>
+  <br>
+  <div class="swatch green"></div>
+  <div class="swatch green layer"></div>
+  <div class="swatch green layer add-border"></div>
+  <div class="swatch g-green"></div>
+  <div class="swatch g-green layer"></div>
+  <div class="swatch g-green layer add-border"></div>
+  <br>
+  <div class="swatch blue"></div>
+  <div class="swatch blue layer"></div>
+  <div class="swatch blue layer add-border"></div>
+  <div class="swatch g-blue"></div>
+  <div class="swatch g-blue layer"></div>
+  <div class="swatch g-blue layer add-border"></div>
+  <br>
+  <div class="swatch indigo"></div>
+  <div class="swatch indigo layer"></div>
+  <div class="swatch indigo layer add-border"></div>
+  <div class="swatch g-indigo"></div>
+  <div class="swatch g-indigo layer"></div>
+  <div class="swatch g-indigo layer add-border"></div>
+  <br>
+  <div class="swatch violet"></div>
+  <div class="swatch violet layer"></div>
+  <div class="swatch violet layer add-border"></div>
+  <div class="swatch g-violet"></div>
+  <div class="swatch g-violet layer"></div>
+  <div class="swatch g-violet layer add-border"></div>
+  <br>
+</body></html>