Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /gfx/tests/reftest
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
95 files changed, 6059 insertions, 0 deletions
diff --git a/gfx/tests/reftest/1086723-ref.html b/gfx/tests/reftest/1086723-ref.html
new file mode 100644
index 0000000000..0242f9e96b
--- /dev/null
+++ b/gfx/tests/reftest/1086723-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 1086723</title>
+  <style type="text/css">
+    .test_div {
+      position: fixed;
+      overflow: hidden;
+      background: blue;
+      width: 50%;
+      height: 50%;
+      border-radius: 0px 50% 50% 0px;
+    }
+    .filler {
+      height: 5000px;
+    }
+    body,html {
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <div class="test_div"></div>
+  <div class="filler"></div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1086723.html b/gfx/tests/reftest/1086723.html
new file mode 100644
index 0000000000..05ac2d7d89
--- /dev/null
+++ b/gfx/tests/reftest/1086723.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll reftest-async-scroll-x="0" reftest-async-scroll-y="2000">
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 1086723</title>
+  <style type="text/css">
+    .test_div {
+      position: fixed;
+      overflow: hidden;
+      background: blue;
+      width: 50%;
+      height: 50%;
+      border-radius: 0px 50% 50% 0px;
+    }
+    .filler {
+      height: 5000px;
+    }
+    body,html {
+      scrollbar-width: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="test_div"></div>
+  <div class="filler"></div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1131264-1.svg b/gfx/tests/reftest/1131264-1.svg
new file mode 100644
index 0000000000..fdafd6b134
--- /dev/null
+++ b/gfx/tests/reftest/1131264-1.svg
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100%" height="100%">
+
+  <title>Testcase for small radius circle with large center coordinates</title>
+  <!--From https://bugzilla.mozilla.org/show_bug.cgi?id=1131264 -->
+
+  <rect width="100%" height="100%" fill="lime"/>
+
+  <circle r="5" cx="40" cy="40" fill="red" />
+  <circle r="1" cx="10004" cy="10004" fill="lime"
+          transform="scale(10 10) translate(-10000 -10000)"/>
+
+</svg>
diff --git a/gfx/tests/reftest/1143303-1.svg b/gfx/tests/reftest/1143303-1.svg
new file mode 100644
index 0000000000..4654cff5c0
--- /dev/null
+++ b/gfx/tests/reftest/1143303-1.svg
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+     width="100%" height="100%">
+  <title>Testcase for small circles</title>
+  <!--From https://bugzilla.mozilla.org/show_bug.cgi?id=1143303 -->
+
+  <rect width="100%" height="100%" fill="lime"/>
+
+  <circle cx="200" cy="150" r="95" fill="red"/>
+  <g transform="translate(200, 150)" fill="lime">
+    <g transform="scale(1e8, 1e8)">
+      <circle cx="0" cy="0" r="1e-6"/>
+    </g>
+  </g>
+
+  <circle cx="342" cy="176.06" r="1" fill="red"/>
+  <g transform="translate(342,1098.55)" fill="lime">
+    <g transform="scale(418.2,-405.9)">
+      <circle cx="0" cy="2.2727" r=".006"/>
+    </g>
+  </g>
+
+</svg>
diff --git a/gfx/tests/reftest/1149923-ref.html b/gfx/tests/reftest/1149923-ref.html
new file mode 100644
index 0000000000..46625a786d
--- /dev/null
+++ b/gfx/tests/reftest/1149923-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <meta charset="utf-8">
+    <title>Testcase for bug 1149923</title>
+    <style>
+      #outer {
+        width: 64px;
+        height: 64px;
+        background-color: #00f;
+        opacity: 1.0;
+        transform: rotate(90deg);
+      }
+      #inner {
+        width: 100%;
+        height: 100%;
+        background-color: #f00;
+        border-top-left-radius: 10%;
+        border-bottom-left-radius: 10%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id='outer'><div id='inner'></div></div>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1149923.html b/gfx/tests/reftest/1149923.html
new file mode 100644
index 0000000000..ec5f777ad3
--- /dev/null
+++ b/gfx/tests/reftest/1149923.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+    <meta charset="utf-8">
+    <title>Testcase for bug 1149923</title>
+    <style>
+      #outer {
+        width: 64px;
+        height: 64px;
+        background-color: #00f;
+        opacity: 1.0;
+        transform: rotate(90deg);
+      }
+      #inner {
+        width: 100%;
+        height: 100%;
+        background-color: #f00;
+        will-change: transform;
+        border-top-left-radius: 10%;
+        border-bottom-left-radius: 10%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id='outer'><div id='inner'></div></div>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1419528-ref.html b/gfx/tests/reftest/1419528-ref.html
new file mode 100644
index 0000000000..2a3595b9af
--- /dev/null
+++ b/gfx/tests/reftest/1419528-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+.outer {
+  display: flex;
+}
+.inner {
+  padding-bottom: 6px;
+  padding-top: 10 px;
+}
+</style>
+<body>
+  <div class="outer">
+    <ul class="inner">
+      Testing
+    </ul>
+  </div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1419528.html b/gfx/tests/reftest/1419528.html
new file mode 100644
index 0000000000..a9c65b3914
--- /dev/null
+++ b/gfx/tests/reftest/1419528.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>
+.outer {
+  display: flex;
+}
+.inner {
+  padding-bottom: 6px;
+  padding-top: 10 px;
+  box-shadow: inset 0 0 0 0 #000;
+}
+</style>
+<body>
+  <div class="outer">
+    <ul class="inner">
+      Testing
+    </ul>
+  </div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1424673-ref.html b/gfx/tests/reftest/1424673-ref.html
new file mode 100644
index 0000000000..5e227d709d
--- /dev/null
+++ b/gfx/tests/reftest/1424673-ref.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+<div style="width: 200px; height: 200px; background-color: lime;">
+</div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1424673.html b/gfx/tests/reftest/1424673.html
new file mode 100644
index 0000000000..31384741b5
--- /dev/null
+++ b/gfx/tests/reftest/1424673.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+body {
+  overflow:hidden;
+}
+
+.container {
+  background-color: lime;
+}
+
+.text_shadow {
+  color: #fff;
+  text-shadow: 0px 0px 10px #fff;
+  line-height: 0;
+  top: 300px;
+  width: 300px;
+  height: 300px;
+  font-size: 300px;
+}
+</style>
+<script>
+function shadow(){
+  document.write('<div class="text_shadow" style="position: absolute; top: 30px; left: 10px;">.</div>');
+  document.write('<div class="text_shadow" style="position: absolute; top: 30px; left: 10px;">.</div>');
+  document.write('<div class="text_shadow" style="position: absolute; top: 30px; left: 10px;">.</div>');
+}
+
+function run_Test(){
+  document.write('<div style="position: relative; top: 160px; left: 0px;"><script>shadow();<\/script></div>');
+  document.write('<div style="position: relative; top: 160px; left: -90px;"><script>shadow();<\/script></div>');
+  document.write('<div style="position: relative; top: 160px; left: 70px;"><script>shadow();<\/script></div>');
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+run_Test();
+</script>
+<div class="container" style="width: 200px; height: 200px;">
+</html>
diff --git a/gfx/tests/reftest/1429411-ref.html b/gfx/tests/reftest/1429411-ref.html
new file mode 100644
index 0000000000..72dcdcfb61
--- /dev/null
+++ b/gfx/tests/reftest/1429411-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<style>
+
+.outer {
+  position: absolute;
+  width: 200px;
+  height: 150px;
+  overflow: hidden;
+}
+.inner {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 200px;
+  height: 150px;
+  box-shadow: blue 0px 0px 20px inset;
+}
+
+</style>
+
+<div class="outer">
+<div class="inner"></div>
+</div>
diff --git a/gfx/tests/reftest/1429411.html b/gfx/tests/reftest/1429411.html
new file mode 100644
index 0000000000..79b878a6db
--- /dev/null
+++ b/gfx/tests/reftest/1429411.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<style>
+
+.outer {
+  position: absolute;
+  margin-top: 3px;
+  margin-left: 3px;
+  width: 200px;
+  height: 150px;
+  overflow: hidden;
+}
+.inner {
+  position: absolute;
+  margin-top: -3px;
+  margin-left: -3px;
+  width: 200px;
+  height: 150px;
+  box-shadow: blue 3px 3px 20px inset;
+}
+
+</style>
+
+<div class="outer">
+<div class="inner"></div>
+</div>
diff --git a/gfx/tests/reftest/1435143-ref.html b/gfx/tests/reftest/1435143-ref.html
new file mode 100644
index 0000000000..f5d1d4de8e
--- /dev/null
+++ b/gfx/tests/reftest/1435143-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+    #green {
+        position: absolute;
+        background: green;
+        border-radius: 1px;
+        transform: translateX(100px);
+    }
+    #text {
+        visibility: hidden;
+    }
+    </style>
+  </head>
+
+  <body>
+    <div id="header">
+      <div id="green"><span id="text">Text.</span></div>
+    </div>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1435143.html b/gfx/tests/reftest/1435143.html
new file mode 100644
index 0000000000..3e209f05dd
--- /dev/null
+++ b/gfx/tests/reftest/1435143.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+    #header {
+        position: fixed;
+    }
+    #green {
+        position: absolute;
+        background: green;
+        border-radius: 1px;
+        transform: translateX(100px);
+    }
+    #text {
+        visibility: hidden;
+    }
+    </style>
+  </head>
+
+  <body>
+    <div id="header">
+      <div id="green"><span id="text">Text.</span></div>
+    </div>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1444904-ref.html b/gfx/tests/reftest/1444904-ref.html
new file mode 100644
index 0000000000..c41c180796
--- /dev/null
+++ b/gfx/tests/reftest/1444904-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      #box {
+          position: absolute;
+          top: 80px;
+          width: 20px;
+          height: 20px;
+          background: green;
+      }
+    </style>
+  </head>
+
+  <body style="height: 10000px;">
+    <div id="box"></div>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1444904.html b/gfx/tests/reftest/1444904.html
new file mode 100644
index 0000000000..c9fe387e74
--- /dev/null
+++ b/gfx/tests/reftest/1444904.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+    #container {
+        float: left;
+        position: sticky;
+        top: 0;
+        margin-top: -20px;
+        z-index: 100;
+    }
+
+    #target {
+        margin-top: 80px;
+        width: 20px;
+        height: 20px;
+        background: green;
+    }
+
+    #necessary-fixed-box {
+        position: fixed;
+        top: 0;
+        width: 20px;
+        height: 20px;
+
+    }
+    </style>
+  </head>
+
+  <body style="height: 10000px;">
+    <div id="container">
+      <div id="target"></div>
+      <div id="necessary-fixed-box"></div>
+    </div>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1451168-ref.html b/gfx/tests/reftest/1451168-ref.html
new file mode 100644
index 0000000000..7aa35b9245
--- /dev/null
+++ b/gfx/tests/reftest/1451168-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style type="text/css">
+html {
+    height:100%;
+    margin:0;
+    padding: 0;
+}
+body {
+    height:100%;
+    margin: 0;
+    padding: 0;
+    overflow:hidden;
+    position:relative;
+    left:0;
+}
+nav {
+    display:block;
+    position:absolute;
+    top:0;
+    left:0;
+    bottom:auto;
+    width:280px;
+    height:100%;
+    z-index:1000;
+}
+
+.nav-menu-inner-container {
+    position:relative;
+    height:100%;
+}
+
+.nav-menu-scroll-pane {
+    bottom:100px;
+    overflow-y:scroll;
+    position:absolute;
+    top:0;
+    width:254px
+}
+  </style>
+</head>
+
+<body>
+<nav class="moz-global-nav-drawer">
+  <div class="nav-menu-inner-container">
+    <div class="nav-menu-scroll-pane">
+      <div style="height: 5000px">
+        Scroll here and look for the scrollbar
+      </div>
+    </div>
+  </div>
+</nav>
+</body></html>
diff --git a/gfx/tests/reftest/1451168.html b/gfx/tests/reftest/1451168.html
new file mode 100644
index 0000000000..8a0711be44
--- /dev/null
+++ b/gfx/tests/reftest/1451168.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style type="text/css">
+html {
+    height:100%;
+    margin:0;
+    padding: 0;
+}
+body {
+    height:100%;
+    margin: 0;
+    padding: 0;
+    overflow:hidden;
+    position:relative;
+    left:0;
+    transform:translateX(320px);
+}
+nav {
+    display:block;
+    position:absolute;
+    top:0;
+    left:0;
+    bottom:auto;
+    width:280px;
+    height:100%;
+    z-index:1000;
+    transform:translateX(-320px);
+}
+
+.nav-menu-inner-container {
+    position:relative;
+    height:100%;
+}
+
+.nav-menu-scroll-pane {
+    bottom:100px;
+    overflow-y:scroll;
+    position:absolute;
+    top:0;
+    width:254px
+}
+  </style>
+</head>
+
+<body>
+<nav class="moz-global-nav-drawer">
+  <div class="nav-menu-inner-container">
+    <div class="nav-menu-scroll-pane">
+      <div style="height: 5000px">
+        Scroll here and look for the scrollbar
+      </div>
+    </div>
+  </div>
+</nav>
+</body></html>
diff --git a/gfx/tests/reftest/1461313-ref.html b/gfx/tests/reftest/1461313-ref.html
new file mode 100644
index 0000000000..14a5f811ce
--- /dev/null
+++ b/gfx/tests/reftest/1461313-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<body>
+    <div style="background-color: green; width: 100px; height: 100px;"></div>
+</body>
diff --git a/gfx/tests/reftest/1461313.html b/gfx/tests/reftest/1461313.html
new file mode 100644
index 0000000000..71e492d40d
--- /dev/null
+++ b/gfx/tests/reftest/1461313.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+body {
+  clip-path: url(non-existent-resource);
+}
+</style>
+<body>
+    <div style="background-color: green; width: 100px; height: 100px;"></div>
+</body>
diff --git a/gfx/tests/reftest/1463802-ref.html b/gfx/tests/reftest/1463802-ref.html
new file mode 100644
index 0000000000..840263e493
--- /dev/null
+++ b/gfx/tests/reftest/1463802-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html><head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <title>Clock</title>
+    <style type="text/css">
+      * {
+          box-sizing: border-box !important;
+      }
+      .inner {
+          width: 100%;
+          height: 100%;
+          background: white;
+          border-radius: 100%;
+          box-shadow: 0px 0px 18px black inset;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="width: 588px; height: 588px; padding: 26px;">
+<div class="inner"></div>
+    </div>
+</body></html>
diff --git a/gfx/tests/reftest/1463802.html b/gfx/tests/reftest/1463802.html
new file mode 100644
index 0000000000..48978ba16a
--- /dev/null
+++ b/gfx/tests/reftest/1463802.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html><head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <title>Clock</title>
+    <style type="text/css">
+      * {
+          box-sizing: border-box !important;
+      }
+      .inner {
+          width: 100%;
+          height: 100%;
+          background: white;
+          border-radius: 100%;
+          box-shadow: 0px 0px 18px black inset;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="width: 588px; height: 588px; padding: 26.01px;">
+<div class="inner"></div>
+    </div>
+</body></html>
diff --git a/gfx/tests/reftest/1474722-ref.html b/gfx/tests/reftest/1474722-ref.html
new file mode 100644
index 0000000000..e0fadcf53f
--- /dev/null
+++ b/gfx/tests/reftest/1474722-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .shadowed {
+      box-shadow: 0 0 35px rgba(0, 0, 0, .9);
+      border: 1px solid lightgray;
+      margin: 0 2em;
+      float: left;
+    }
+  </style>
+</head>
+<body style = "overflow:hidden">
+<div class="shadowed" style="height: 200vh"> long shadow </div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1474722.html b/gfx/tests/reftest/1474722.html
new file mode 100644
index 0000000000..9920eee238
--- /dev/null
+++ b/gfx/tests/reftest/1474722.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .shadowed {
+      box-shadow: 0 0 35px rgba(0, 0, 0, .9);
+      border: 1px solid lightgray;
+      margin: 0 2em;
+      float: left;
+    }
+  </style>
+</head>
+<body style = "overflow:hidden">
+<div class="shadowed" style="height: 100000px"> long shadow </div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1501195-ref.html b/gfx/tests/reftest/1501195-ref.html
new file mode 100644
index 0000000000..45ea08d565
--- /dev/null
+++ b/gfx/tests/reftest/1501195-ref.html
@@ -0,0 +1,30 @@
+<html reftest-zoom="1.1">
+<head>
+<style type="text/css">
+.parent {
+display: flex;
+overflow: hidden;
+}
+
+.bg {
+background-color: lime;
+width: 200px;
+height: 200px;
+transform: scale(1.05);
+}
+
+.bg_overlay {
+background-color: red;
+width: 100px;
+height: 100px;
+position: absolute;
+}
+</style>
+</head>
+<body>
+<div class="parent">
+	<div class="bg"></div>
+	<div class="bg_overlay"></div>
+</div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1501195.html b/gfx/tests/reftest/1501195.html
new file mode 100644
index 0000000000..f1664e54ff
--- /dev/null
+++ b/gfx/tests/reftest/1501195.html
@@ -0,0 +1,31 @@
+<html reftest-zoom="1.1">
+<head>
+<style type="text/css">
+.parent {
+display: flex;
+transform: translate3d(0px, 0px, 0px);
+overflow: hidden;
+}
+
+.bg {
+background-color: lime;
+width: 200px;
+height: 200px;
+transform: scale(1.05);
+}
+
+.bg_overlay {
+background-color: red;
+width: 100px;
+height: 100px;
+position: absolute;
+}
+</style>
+</head>
+<body>
+<div class="parent">
+	<div class="bg"></div>
+	<div class="bg_overlay"></div>
+</div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1519754-ref.html b/gfx/tests/reftest/1519754-ref.html
new file mode 100644
index 0000000000..4d1b6e7992
--- /dev/null
+++ b/gfx/tests/reftest/1519754-ref.html
@@ -0,0 +1,5 @@
+<body style="margin-left: 0px">
+<div style="margin-left: 200px; width: 200px; height: 100px; overflow: auto;">
+    <div style="background-color: red; height: 200px;"/>
+</div>
+</body>
diff --git a/gfx/tests/reftest/1519754.html b/gfx/tests/reftest/1519754.html
new file mode 100644
index 0000000000..7db2093cfd
--- /dev/null
+++ b/gfx/tests/reftest/1519754.html
@@ -0,0 +1,5 @@
+<body>
+<div style="left: 400px; position: fixed; transform: translateX(-200px); width: 200px; height: 100px; overflow: auto;">
+    <div style="background-color: red; height: 200px;"/>
+</div>
+</body>
diff --git a/gfx/tests/reftest/1523080-ref.html b/gfx/tests/reftest/1523080-ref.html
new file mode 100644
index 0000000000..42e0e793b2
--- /dev/null
+++ b/gfx/tests/reftest/1523080-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+html, body {
+    margin: 0;
+}
+</style>
+<div style="width: 400px; height: 400px; background-color: green"></div>
diff --git a/gfx/tests/reftest/1523080.html b/gfx/tests/reftest/1523080.html
new file mode 100644
index 0000000000..069f86d3e5
--- /dev/null
+++ b/gfx/tests/reftest/1523080.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+html, body {
+    margin: 0;
+}
+</style>
+<div id="red" style="position:absolute; width: 400px; height: 400px; background-color: red; top: 0px; left: 0px"></div>
+<div id="scroller" style="overflow:hidden; width:400px; height: 400px">
+  <div style="filter: blur(20px); width: 800px; height: 800px; background-color: green"></div>
+</div>
+<script>
+    document.getElementById('scroller').scrollTo(100, 100);
+</script>
diff --git a/gfx/tests/reftest/1523776-ref.html b/gfx/tests/reftest/1523776-ref.html
new file mode 100644
index 0000000000..3f57f8df24
--- /dev/null
+++ b/gfx/tests/reftest/1523776-ref.html
@@ -0,0 +1,13 @@
+<style>
+html, body {
+    margin: 0;
+}
+</style>
+  <div style="filter: drop-shadow(50px 50px 20px red)">
+    <div style="width:256px; height:256px; border-radius:16px; overflow:hidden">
+      <div style="width:256px; height:256px; background-color:green;"></div>
+    </div>
+  </div>
+<!-- add white divs on top to simulate the clip from the test file -->
+<div style="background-color: white; position:absolute; left: 0; top: 0; width: 100px; height: 700px"></div>
+<div style="background-color: white; position:absolute; left: 0; top: 0; width: 700px; height: 100px"></div>
diff --git a/gfx/tests/reftest/1523776.html b/gfx/tests/reftest/1523776.html
new file mode 100644
index 0000000000..76a666763d
--- /dev/null
+++ b/gfx/tests/reftest/1523776.html
@@ -0,0 +1,12 @@
+<style>
+html, body {
+    margin: 0;
+}
+</style>
+<div style="clip: rect(100px,1000px,1000px,100px); position:absolute">
+  <div style="filter: drop-shadow(50px 50px 20px red)">
+    <div style="width:256px; height:256px; border-radius:16px; overflow:hidden">
+      <div style="width:256px; height:256px; background-color:green;"></div>
+    </div>
+  </div>
+</div>
diff --git a/gfx/tests/reftest/1524261-ref.html b/gfx/tests/reftest/1524261-ref.html
new file mode 100644
index 0000000000..45d798cec8
--- /dev/null
+++ b/gfx/tests/reftest/1524261-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+<div style="overflow-y:hidden; position:absolute; top:50px; width: 200px; height: 100px; border: solid 1px black">
+</div>
diff --git a/gfx/tests/reftest/1524261.html b/gfx/tests/reftest/1524261.html
new file mode 100644
index 0000000000..33824a9038
--- /dev/null
+++ b/gfx/tests/reftest/1524261.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<div style="overflow-y:scroll; scrollbar-width:none; position:absolute; top:50px; width: 200px; height: 100px; border: solid 1px black"
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="200" reftest-displayport-h="300"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+    <div style="transform: translateY(0px); width: 100px; height: 300px">
+        <div style="background-color: green; height: 25px; width: 25px; border-radius: 5px"></div>
+    </div>
+</div>
diff --git a/gfx/tests/reftest/1524353-ref.html b/gfx/tests/reftest/1524353-ref.html
new file mode 100644
index 0000000000..e1c5e78314
--- /dev/null
+++ b/gfx/tests/reftest/1524353-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<div style="overflow:hidden; width: 300px; height: 200px; border: solid 1px black">
+    <div style="width: 600px; transform: translateX(0px); will-change: transform">
+        <svg style="height: 200px" width="600">
+            <path d="M0 0 H 300 V 25 Z" fill="red"></path>
+        </svg>
+    </div>
+</div>
diff --git a/gfx/tests/reftest/1524353.html b/gfx/tests/reftest/1524353.html
new file mode 100644
index 0000000000..72a0f7d686
--- /dev/null
+++ b/gfx/tests/reftest/1524353.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<div style="overflow:hidden; width: 300px; height: 200px; border: solid 1px black">
+    <div style="width: 600px; transform: translateX(0px); will-change: transform">
+        <svg style="height: 200px" width="600">
+            <path d="M0 0 H 600 V 50 Z" fill="red"></path>
+        </svg>
+    </div>
+</div>
diff --git a/gfx/tests/reftest/1616444-same-color-different-paths-ref.html b/gfx/tests/reftest/1616444-same-color-different-paths-ref.html
new file mode 100644
index 0000000000..80f3634bc9
--- /dev/null
+++ b/gfx/tests/reftest/1616444-same-color-different-paths-ref.html
@@ -0,0 +1,54 @@
+<!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;
+  }
+  .swatch2 {
+      float: left;
+      height: 40px;
+      width: 720px;
+      box-sizing: border-box;
+  }
+  .header {
+      border: 1px solid black;
+      font-size: 10px;
+      font-weight: bold;
+  }
+  br { clear: both; }
+
+  .red { background: red }
+  .orange { background: orange }
+  .yellow { background: yellow }
+  .green { background: green }
+  .blue { background: blue }
+  .indigo { background: indigo }
+  .violet { background: 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="swatch2 red"></div>
+ <br>
+  <div class="swatch2 orange"></div>
+  <br>
+  <div class="swatch2 yellow"></div>
+  <br>
+  <div class="swatch2 green"></div>
+  <br>
+  <div class="swatch2 blue"></div>
+  <br>
+  <div class="swatch2 indigo"></div>
+  <br>
+  <div class="swatch2 violet"></div>
+  <br>
+</body></html>
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>
diff --git a/gfx/tests/reftest/1662062-1-no-blurry.html b/gfx/tests/reftest/1662062-1-no-blurry.html
new file mode 100644
index 0000000000..93542b9b1f
--- /dev/null
+++ b/gfx/tests/reftest/1662062-1-no-blurry.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html reftest-resolution="5.0">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+
+<svg height="100" width="100">
+  <polygon points="50 10 55 20 70 20 60 30 65 45 50 35 35 45 40 30 30 20 45 20" stroke="green" fill="transparent" stroke-width="5"/>
+</svg>
+
+</body>
+</html>
diff --git a/gfx/tests/reftest/1662062-1-ref.html b/gfx/tests/reftest/1662062-1-ref.html
new file mode 100644
index 0000000000..ca25585df9
--- /dev/null
+++ b/gfx/tests/reftest/1662062-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+
+<svg height="500" width="500">
+  <polygon points="250 50 275 100 350 100 300 150 325 225 250 175 175 225 200 150 150 100 225 100" stroke="green" fill="transparent" stroke-width="25"/>
+</svg>
+
+</body>
+</html>
diff --git a/gfx/tests/reftest/1681610-ref.html b/gfx/tests/reftest/1681610-ref.html
new file mode 100644
index 0000000000..cb3693cc7f
--- /dev/null
+++ b/gfx/tests/reftest/1681610-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      body {
+          margin-left: 100px;
+          font-size: 500%;
+          font-family: Nimbus Sans, sans-serif;
+      }
+      ul {
+          width: 1em; /* This must to be non-zero, for the percentages to work. */
+      }
+      li {
+          /* This clip path is chosen to mask off all the rounded edges of a
+             'disc' list item marker, to hide the anti-aliased pixels along the
+             round edges of the bullets from the reftest. This makes correctly
+             rendered 'disc' and 'square' list item markers appear identical,
+             while a bogus clear pixel in the middle of a 'disc' marker (the
+             present bug) still shows up.
+
+             The exact placement and rendering of the marker is up to the user
+             agent, so these values are specific to Firefox. The right and left
+             inset values fall outside the usual 0%-100% range because the
+             marker appears to the left of the <li>'s border box. */
+          clip-path: inset(44% 159% 44% -74%);
+          list-style-type: square;
+      }
+    </style>
+  </head>
+  <body>
+    <ul>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1681610.html b/gfx/tests/reftest/1681610.html
new file mode 100644
index 0000000000..e93fe5bd5b
--- /dev/null
+++ b/gfx/tests/reftest/1681610.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      body {
+          margin-left: 100px;
+          font-size: 500%;
+          font-family: Nimbus Sans, sans-serif;
+      }
+      ul {
+          width: 1em; /* This must to be non-zero, for the percentages to work. */
+      }
+      li {
+          /* This clip path is chosen to mask off all the rounded edges of a
+             'disc' list item marker, to hide the anti-aliased pixels along the
+             round edges of the bullets from the reftest. This makes correctly
+             rendered 'disc' and 'square' list item markers appear identical,
+             while a bogus clear pixel in the middle of a 'disc' marker (the
+             present bug) still shows up.
+
+             The exact placement and rendering of the marker is up to the user
+             agent, so these values are specific to Firefox. The right and left
+             inset values fall outside the usual 0%-100% range because the
+             marker appears to the left of the <li>'s border box. */
+          clip-path: inset(44% 159% 44% -74%);
+      }
+    </style>
+  </head>
+  <body>
+    <ul>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1687157-1-ref.html b/gfx/tests/reftest/1687157-1-ref.html
new file mode 100644
index 0000000000..6ae3634bc4
--- /dev/null
+++ b/gfx/tests/reftest/1687157-1-ref.html
@@ -0,0 +1,1982 @@
+<!DOCTYPE html><html class="">
+<head><meta charset="UTF-8">
+
+<style>html, body {
+  height: 100%;
+}
+
+body {
+  overflow: hidden;
+  margin: 0;
+  perspective: 32em;
+}
+
+.torus, .torus *, .torus :before, .torus :after {
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-style: preserve-3d;
+}
+
+.torus {
+  transform: rotateX(-45deg) rotateY(0deg);
+}
+
+.ring--penta:nth-child(1) {
+  transform: rotateY(0deg) translate(10.51462em) rotate(0deg);
+}
+.ring--penta:nth-child(2) {
+  transform: rotateY(2.25deg) translate(10.23069em) rotate(2.25deg);
+}
+.ring--penta:nth-child(3) {
+  transform: rotateY(4.5deg) translate(9.97667em) rotate(4.5deg);
+}
+.ring--penta:nth-child(4) {
+  transform: rotateY(6.75deg) translate(9.74962em) rotate(6.75deg);
+}
+.ring--penta:nth-child(5) {
+  transform: rotateY(9deg) translate(9.54708em) rotate(9deg);
+}
+.ring--penta:nth-child(6) {
+  transform: rotateY(11.25deg) translate(9.36692em) rotate(11.25deg);
+}
+.ring--penta:nth-child(7) {
+  transform: rotateY(13.5deg) translate(9.20738em) rotate(13.5deg);
+}
+.ring--penta:nth-child(8) {
+  transform: rotateY(15.75deg) translate(9.06692em) rotate(15.75deg);
+}
+.ring--penta:nth-child(9) {
+  transform: rotateY(18deg) translate(8.94427em) rotate(18deg);
+}
+.ring--penta:nth-child(10) {
+  transform: rotateY(20.25deg) translate(8.83834em) rotate(20.25deg);
+}
+.ring--penta:nth-child(11) {
+  transform: rotateY(22.5deg) translate(8.74822em) rotate(22.5deg);
+}
+.ring--penta:nth-child(12) {
+  transform: rotateY(24.75deg) translate(8.67316em) rotate(24.75deg);
+}
+.ring--penta:nth-child(13) {
+  transform: rotateY(27deg) translate(8.61254em) rotate(27deg);
+}
+.ring--penta:nth-child(14) {
+  transform: rotateY(29.25deg) translate(8.56588em) rotate(29.25deg);
+}
+.ring--penta:nth-child(15) {
+  transform: rotateY(31.5deg) translate(8.53281em) rotate(31.5deg);
+}
+.ring--penta:nth-child(16) {
+  transform: rotateY(33.75deg) translate(8.51307em) rotate(33.75deg);
+}
+.ring--penta:nth-child(17) {
+  transform: rotateY(36deg) translate(8.50651em) rotate(36deg);
+}
+.ring--penta:nth-child(18) {
+  transform: rotateY(38.25deg) translate(8.51307em) rotate(38.25deg);
+}
+.ring--penta:nth-child(19) {
+  transform: rotateY(40.5deg) translate(8.53281em) rotate(40.5deg);
+}
+.ring--penta:nth-child(20) {
+  transform: rotateY(42.75deg) translate(8.56588em) rotate(42.75deg);
+}
+.ring--penta:nth-child(21) {
+  transform: rotateY(45deg) translate(8.61254em) rotate(45deg);
+}
+.ring--penta:nth-child(22) {
+  transform: rotateY(47.25deg) translate(8.67316em) rotate(47.25deg);
+}
+.ring--penta:nth-child(23) {
+  transform: rotateY(49.5deg) translate(8.74822em) rotate(49.5deg);
+}
+.ring--penta:nth-child(24) {
+  transform: rotateY(51.75deg) translate(8.83834em) rotate(51.75deg);
+}
+.ring--penta:nth-child(25) {
+  transform: rotateY(54deg) translate(8.94427em) rotate(54deg);
+}
+.ring--penta:nth-child(26) {
+  transform: rotateY(56.25deg) translate(9.06692em) rotate(56.25deg);
+}
+.ring--penta:nth-child(27) {
+  transform: rotateY(58.5deg) translate(9.20738em) rotate(58.5deg);
+}
+.ring--penta:nth-child(28) {
+  transform: rotateY(60.75deg) translate(9.36692em) rotate(60.75deg);
+}
+.ring--penta:nth-child(29) {
+  transform: rotateY(63deg) translate(9.54708em) rotate(63deg);
+}
+.ring--penta:nth-child(30) {
+  transform: rotateY(65.25deg) translate(9.74962em) rotate(65.25deg);
+}
+.ring--penta:nth-child(31) {
+  transform: rotateY(67.5deg) translate(9.97667em) rotate(67.5deg);
+}
+.ring--penta:nth-child(32) {
+  transform: rotateY(69.75deg) translate(10.23069em) rotate(69.75deg);
+}
+.ring--penta:nth-child(33) {
+  transform: rotateY(72deg) translate(10.51462em) rotate(72deg);
+}
+.ring--penta:nth-child(34) {
+  transform: rotateY(74.25deg) translate(10.23069em) rotate(74.25deg);
+}
+.ring--penta:nth-child(35) {
+  transform: rotateY(76.5deg) translate(9.97667em) rotate(76.5deg);
+}
+.ring--penta:nth-child(36) {
+  transform: rotateY(78.75deg) translate(9.74962em) rotate(78.75deg);
+}
+.ring--penta:nth-child(37) {
+  transform: rotateY(81deg) translate(9.54708em) rotate(81deg);
+}
+.ring--penta:nth-child(38) {
+  transform: rotateY(83.25deg) translate(9.36692em) rotate(83.25deg);
+}
+.ring--penta:nth-child(39) {
+  transform: rotateY(85.5deg) translate(9.20738em) rotate(85.5deg);
+}
+.ring--penta:nth-child(40) {
+  transform: rotateY(87.75deg) translate(9.06692em) rotate(87.75deg);
+}
+.ring--penta:nth-child(41) {
+  transform: rotateY(90deg) translate(8.94427em) rotate(90deg);
+}
+.ring--penta:nth-child(42) {
+  transform: rotateY(92.25deg) translate(8.83834em) rotate(92.25deg);
+}
+.ring--penta:nth-child(43) {
+  transform: rotateY(94.5deg) translate(8.74822em) rotate(94.5deg);
+}
+.ring--penta:nth-child(44) {
+  transform: rotateY(96.75deg) translate(8.67316em) rotate(96.75deg);
+}
+.ring--penta:nth-child(45) {
+  transform: rotateY(99deg) translate(8.61254em) rotate(99deg);
+}
+.ring--penta:nth-child(46) {
+  transform: rotateY(101.25deg) translate(8.56588em) rotate(101.25deg);
+}
+.ring--penta:nth-child(47) {
+  transform: rotateY(103.5deg) translate(8.53281em) rotate(103.5deg);
+}
+.ring--penta:nth-child(48) {
+  transform: rotateY(105.75deg) translate(8.51307em) rotate(105.75deg);
+}
+.ring--penta:nth-child(49) {
+  transform: rotateY(108deg) translate(8.50651em) rotate(108deg);
+}
+.ring--penta:nth-child(50) {
+  transform: rotateY(110.25deg) translate(8.51307em) rotate(110.25deg);
+}
+.ring--penta:nth-child(51) {
+  transform: rotateY(112.5deg) translate(8.53281em) rotate(112.5deg);
+}
+.ring--penta:nth-child(52) {
+  transform: rotateY(114.75deg) translate(8.56588em) rotate(114.75deg);
+}
+.ring--penta:nth-child(53) {
+  transform: rotateY(117deg) translate(8.61254em) rotate(117deg);
+}
+.ring--penta:nth-child(54) {
+  transform: rotateY(119.25deg) translate(8.67316em) rotate(119.25deg);
+}
+.ring--penta:nth-child(55) {
+  transform: rotateY(121.5deg) translate(8.74822em) rotate(121.5deg);
+}
+.ring--penta:nth-child(56) {
+  transform: rotateY(123.75deg) translate(8.83834em) rotate(123.75deg);
+}
+.ring--penta:nth-child(57) {
+  transform: rotateY(126deg) translate(8.94427em) rotate(126deg);
+}
+.ring--penta:nth-child(58) {
+  transform: rotateY(128.25deg) translate(9.06692em) rotate(128.25deg);
+}
+.ring--penta:nth-child(59) {
+  transform: rotateY(130.5deg) translate(9.20738em) rotate(130.5deg);
+}
+.ring--penta:nth-child(60) {
+  transform: rotateY(132.75deg) translate(9.36692em) rotate(132.75deg);
+}
+.ring--penta:nth-child(61) {
+  transform: rotateY(135deg) translate(9.54708em) rotate(135deg);
+}
+.ring--penta:nth-child(62) {
+  transform: rotateY(137.25deg) translate(9.74962em) rotate(137.25deg);
+}
+.ring--penta:nth-child(63) {
+  transform: rotateY(139.5deg) translate(9.97667em) rotate(139.5deg);
+}
+.ring--penta:nth-child(64) {
+  transform: rotateY(141.75deg) translate(10.23069em) rotate(141.75deg);
+}
+.ring--penta:nth-child(65) {
+  transform: rotateY(144deg) translate(10.51462em) rotate(144deg);
+}
+.ring--penta:nth-child(66) {
+  transform: rotateY(146.25deg) translate(10.23069em) rotate(146.25deg);
+}
+.ring--penta:nth-child(67) {
+  transform: rotateY(148.5deg) translate(9.97667em) rotate(148.5deg);
+}
+.ring--penta:nth-child(68) {
+  transform: rotateY(150.75deg) translate(9.74962em) rotate(150.75deg);
+}
+.ring--penta:nth-child(69) {
+  transform: rotateY(153deg) translate(9.54708em) rotate(153deg);
+}
+.ring--penta:nth-child(70) {
+  transform: rotateY(155.25deg) translate(9.36692em) rotate(155.25deg);
+}
+.ring--penta:nth-child(71) {
+  transform: rotateY(157.5deg) translate(9.20738em) rotate(157.5deg);
+}
+.ring--penta:nth-child(72) {
+  transform: rotateY(159.75deg) translate(9.06692em) rotate(159.75deg);
+}
+.ring--penta:nth-child(73) {
+  transform: rotateY(162deg) translate(8.94427em) rotate(162deg);
+}
+.ring--penta:nth-child(74) {
+  transform: rotateY(164.25deg) translate(8.83834em) rotate(164.25deg);
+}
+.ring--penta:nth-child(75) {
+  transform: rotateY(166.5deg) translate(8.74822em) rotate(166.5deg);
+}
+.ring--penta:nth-child(76) {
+  transform: rotateY(168.75deg) translate(8.67316em) rotate(168.75deg);
+}
+.ring--penta:nth-child(77) {
+  transform: rotateY(171deg) translate(8.61254em) rotate(171deg);
+}
+.ring--penta:nth-child(78) {
+  transform: rotateY(173.25deg) translate(8.56588em) rotate(173.25deg);
+}
+.ring--penta:nth-child(79) {
+  transform: rotateY(175.5deg) translate(8.53281em) rotate(175.5deg);
+}
+.ring--penta:nth-child(80) {
+  transform: rotateY(177.75deg) translate(8.51307em) rotate(177.75deg);
+}
+.ring--penta:nth-child(81) {
+  transform: rotateY(180deg) translate(8.50651em) rotate(180deg);
+}
+.ring--penta:nth-child(82) {
+  transform: rotateY(182.25deg) translate(8.51307em) rotate(182.25deg);
+}
+.ring--penta:nth-child(83) {
+  transform: rotateY(184.5deg) translate(8.53281em) rotate(184.5deg);
+}
+.ring--penta:nth-child(84) {
+  transform: rotateY(186.75deg) translate(8.56588em) rotate(186.75deg);
+}
+.ring--penta:nth-child(85) {
+  transform: rotateY(189deg) translate(8.61254em) rotate(189deg);
+}
+.ring--penta:nth-child(86) {
+  transform: rotateY(191.25deg) translate(8.67316em) rotate(191.25deg);
+}
+.ring--penta:nth-child(87) {
+  transform: rotateY(193.5deg) translate(8.74822em) rotate(193.5deg);
+}
+.ring--penta:nth-child(88) {
+  transform: rotateY(195.75deg) translate(8.83834em) rotate(195.75deg);
+}
+.ring--penta:nth-child(89) {
+  transform: rotateY(198deg) translate(8.94427em) rotate(198deg);
+}
+.ring--penta:nth-child(90) {
+  transform: rotateY(200.25deg) translate(9.06692em) rotate(200.25deg);
+}
+.ring--penta:nth-child(91) {
+  transform: rotateY(202.5deg) translate(9.20738em) rotate(202.5deg);
+}
+.ring--penta:nth-child(92) {
+  transform: rotateY(204.75deg) translate(9.36692em) rotate(204.75deg);
+}
+.ring--penta:nth-child(93) {
+  transform: rotateY(207deg) translate(9.54708em) rotate(207deg);
+}
+.ring--penta:nth-child(94) {
+  transform: rotateY(209.25deg) translate(9.74962em) rotate(209.25deg);
+}
+.ring--penta:nth-child(95) {
+  transform: rotateY(211.5deg) translate(9.97667em) rotate(211.5deg);
+}
+.ring--penta:nth-child(96) {
+  transform: rotateY(213.75deg) translate(10.23069em) rotate(213.75deg);
+}
+.ring--penta:nth-child(97) {
+  transform: rotateY(216deg) translate(10.51462em) rotate(216deg);
+}
+.ring--penta:nth-child(98) {
+  transform: rotateY(218.25deg) translate(10.23069em) rotate(218.25deg);
+}
+.ring--penta:nth-child(99) {
+  transform: rotateY(220.5deg) translate(9.97667em) rotate(220.5deg);
+}
+.ring--penta:nth-child(100) {
+  transform: rotateY(222.75deg) translate(9.74962em) rotate(222.75deg);
+}
+.ring--penta:nth-child(101) {
+  transform: rotateY(225deg) translate(9.54708em) rotate(225deg);
+}
+.ring--penta:nth-child(102) {
+  transform: rotateY(227.25deg) translate(9.36692em) rotate(227.25deg);
+}
+.ring--penta:nth-child(103) {
+  transform: rotateY(229.5deg) translate(9.20738em) rotate(229.5deg);
+}
+.ring--penta:nth-child(104) {
+  transform: rotateY(231.75deg) translate(9.06692em) rotate(231.75deg);
+}
+.ring--penta:nth-child(105) {
+  transform: rotateY(234deg) translate(8.94427em) rotate(234deg);
+}
+.ring--penta:nth-child(106) {
+  transform: rotateY(236.25deg) translate(8.83834em) rotate(236.25deg);
+}
+.ring--penta:nth-child(107) {
+  transform: rotateY(238.5deg) translate(8.74822em) rotate(238.5deg);
+}
+.ring--penta:nth-child(108) {
+  transform: rotateY(240.75deg) translate(8.67316em) rotate(240.75deg);
+}
+.ring--penta:nth-child(109) {
+  transform: rotateY(243deg) translate(8.61254em) rotate(243deg);
+}
+.ring--penta:nth-child(110) {
+  transform: rotateY(245.25deg) translate(8.56588em) rotate(245.25deg);
+}
+.ring--penta:nth-child(111) {
+  transform: rotateY(247.5deg) translate(8.53281em) rotate(247.5deg);
+}
+.ring--penta:nth-child(112) {
+  transform: rotateY(249.75deg) translate(8.51307em) rotate(249.75deg);
+}
+.ring--penta:nth-child(113) {
+  transform: rotateY(252deg) translate(8.50651em) rotate(252deg);
+}
+.ring--penta:nth-child(114) {
+  transform: rotateY(254.25deg) translate(8.51307em) rotate(254.25deg);
+}
+.ring--penta:nth-child(115) {
+  transform: rotateY(256.5deg) translate(8.53281em) rotate(256.5deg);
+}
+.ring--penta:nth-child(116) {
+  transform: rotateY(258.75deg) translate(8.56588em) rotate(258.75deg);
+}
+.ring--penta:nth-child(117) {
+  transform: rotateY(261deg) translate(8.61254em) rotate(261deg);
+}
+.ring--penta:nth-child(118) {
+  transform: rotateY(263.25deg) translate(8.67316em) rotate(263.25deg);
+}
+.ring--penta:nth-child(119) {
+  transform: rotateY(265.5deg) translate(8.74822em) rotate(265.5deg);
+}
+.ring--penta:nth-child(120) {
+  transform: rotateY(267.75deg) translate(8.83834em) rotate(267.75deg);
+}
+.ring--penta:nth-child(121) {
+  transform: rotateY(270deg) translate(8.94427em) rotate(270deg);
+}
+.ring--penta:nth-child(122) {
+  transform: rotateY(272.25deg) translate(9.06692em) rotate(272.25deg);
+}
+.ring--penta:nth-child(123) {
+  transform: rotateY(274.5deg) translate(9.20738em) rotate(274.5deg);
+}
+.ring--penta:nth-child(124) {
+  transform: rotateY(276.75deg) translate(9.36692em) rotate(276.75deg);
+}
+.ring--penta:nth-child(125) {
+  transform: rotateY(279deg) translate(9.54708em) rotate(279deg);
+}
+.ring--penta:nth-child(126) {
+  transform: rotateY(281.25deg) translate(9.74962em) rotate(281.25deg);
+}
+.ring--penta:nth-child(127) {
+  transform: rotateY(283.5deg) translate(9.97667em) rotate(283.5deg);
+}
+.ring--penta:nth-child(128) {
+  transform: rotateY(285.75deg) translate(10.23069em) rotate(285.75deg);
+}
+.ring--penta:nth-child(129) {
+  transform: rotateY(288deg) translate(10.51462em) rotate(288deg);
+}
+.ring--penta:nth-child(130) {
+  transform: rotateY(290.25deg) translate(10.23069em) rotate(290.25deg);
+}
+.ring--penta:nth-child(131) {
+  transform: rotateY(292.5deg) translate(9.97667em) rotate(292.5deg);
+}
+.ring--penta:nth-child(132) {
+  transform: rotateY(294.75deg) translate(9.74962em) rotate(294.75deg);
+}
+.ring--penta:nth-child(133) {
+  transform: rotateY(297deg) translate(9.54708em) rotate(297deg);
+}
+.ring--penta:nth-child(134) {
+  transform: rotateY(299.25deg) translate(9.36692em) rotate(299.25deg);
+}
+.ring--penta:nth-child(135) {
+  transform: rotateY(301.5deg) translate(9.20738em) rotate(301.5deg);
+}
+.ring--penta:nth-child(136) {
+  transform: rotateY(303.75deg) translate(9.06692em) rotate(303.75deg);
+}
+.ring--penta:nth-child(137) {
+  transform: rotateY(306deg) translate(8.94427em) rotate(306deg);
+}
+.ring--penta:nth-child(138) {
+  transform: rotateY(308.25deg) translate(8.83834em) rotate(308.25deg);
+}
+.ring--penta:nth-child(139) {
+  transform: rotateY(310.5deg) translate(8.74822em) rotate(310.5deg);
+}
+.ring--penta:nth-child(140) {
+  transform: rotateY(312.75deg) translate(8.67316em) rotate(312.75deg);
+}
+.ring--penta:nth-child(141) {
+  transform: rotateY(315deg) translate(8.61254em) rotate(315deg);
+}
+.ring--penta:nth-child(142) {
+  transform: rotateY(317.25deg) translate(8.56588em) rotate(317.25deg);
+}
+.ring--penta:nth-child(143) {
+  transform: rotateY(319.5deg) translate(8.53281em) rotate(319.5deg);
+}
+.ring--penta:nth-child(144) {
+  transform: rotateY(321.75deg) translate(8.51307em) rotate(321.75deg);
+}
+.ring--penta:nth-child(145) {
+  transform: rotateY(324deg) translate(8.50651em) rotate(324deg);
+}
+.ring--penta:nth-child(146) {
+  transform: rotateY(326.25deg) translate(8.51307em) rotate(326.25deg);
+}
+.ring--penta:nth-child(147) {
+  transform: rotateY(328.5deg) translate(8.53281em) rotate(328.5deg);
+}
+.ring--penta:nth-child(148) {
+  transform: rotateY(330.75deg) translate(8.56588em) rotate(330.75deg);
+}
+.ring--penta:nth-child(149) {
+  transform: rotateY(333deg) translate(8.61254em) rotate(333deg);
+}
+.ring--penta:nth-child(150) {
+  transform: rotateY(335.25deg) translate(8.67316em) rotate(335.25deg);
+}
+.ring--penta:nth-child(151) {
+  transform: rotateY(337.5deg) translate(8.74822em) rotate(337.5deg);
+}
+.ring--penta:nth-child(152) {
+  transform: rotateY(339.75deg) translate(8.83834em) rotate(339.75deg);
+}
+.ring--penta:nth-child(153) {
+  transform: rotateY(342deg) translate(8.94427em) rotate(342deg);
+}
+.ring--penta:nth-child(154) {
+  transform: rotateY(344.25deg) translate(9.06692em) rotate(344.25deg);
+}
+.ring--penta:nth-child(155) {
+  transform: rotateY(346.5deg) translate(9.20738em) rotate(346.5deg);
+}
+.ring--penta:nth-child(156) {
+  transform: rotateY(348.75deg) translate(9.36692em) rotate(348.75deg);
+}
+.ring--penta:nth-child(157) {
+  transform: rotateY(351deg) translate(9.54708em) rotate(351deg);
+}
+.ring--penta:nth-child(158) {
+  transform: rotateY(353.25deg) translate(9.74962em) rotate(353.25deg);
+}
+.ring--penta:nth-child(159) {
+  transform: rotateY(355.5deg) translate(9.97667em) rotate(355.5deg);
+}
+.ring--penta:nth-child(160) {
+  transform: rotateY(357.75deg) translate(10.23069em) rotate(357.75deg);
+}
+
+.strip {
+  margin: -2.5em -0.125em;
+  width: 0.25em;
+  height: 5em;
+}
+.strip:before, .strip:after {
+  margin: -2.5em -0.125em;
+  width: 0.25em;
+  height: 5em;
+  transform: rotateY(-90deg);
+  background: green;
+  content: '';
+}
+.strip:after {
+  transform: rotateY(90deg);
+}
+.strip:nth-child(1) {
+  transform: rotate(0deg) translate(3.44095em);
+}
+.strip:nth-child(2) {
+  transform: rotate(72deg) translate(3.44095em);
+}
+.strip:nth-child(3) {
+  transform: rotate(144deg) translate(3.44095em);
+}
+.strip:nth-child(4) {
+  transform: rotate(216deg) translate(3.44095em);
+}
+.strip:nth-child(5) {
+  transform: rotate(288deg) translate(3.44095em);
+}
+
+</style></head><body>
+<div class='torus torus--polygonal'>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+</div>
+</body></html>
diff --git a/gfx/tests/reftest/1687157-1.html b/gfx/tests/reftest/1687157-1.html
new file mode 100644
index 0000000000..098866bc88
--- /dev/null
+++ b/gfx/tests/reftest/1687157-1.html
@@ -0,0 +1,1982 @@
+<!DOCTYPE html><html class="">
+<head><meta charset="UTF-8">
+
+<style>html, body {
+  height: 100%;
+}
+
+body {
+  overflow: hidden;
+  margin: 0;
+  perspective: 32em;
+}
+
+.torus, .torus *, .torus :before, .torus :after {
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-style: preserve-3d;
+}
+
+.torus {
+  transform: rotateX(-45deg) rotateY(0deg);
+}
+
+.ring--penta:nth-child(160) {
+  transform: rotateY(0deg) translate(10.51462em) rotate(0deg);
+}
+.ring--penta:nth-child(159) {
+  transform: rotateY(2.25deg) translate(10.23069em) rotate(2.25deg);
+}
+.ring--penta:nth-child(158) {
+  transform: rotateY(4.5deg) translate(9.97667em) rotate(4.5deg);
+}
+.ring--penta:nth-child(157) {
+  transform: rotateY(6.75deg) translate(9.74962em) rotate(6.75deg);
+}
+.ring--penta:nth-child(156) {
+  transform: rotateY(9deg) translate(9.54708em) rotate(9deg);
+}
+.ring--penta:nth-child(155) {
+  transform: rotateY(11.25deg) translate(9.36692em) rotate(11.25deg);
+}
+.ring--penta:nth-child(154) {
+  transform: rotateY(13.5deg) translate(9.20738em) rotate(13.5deg);
+}
+.ring--penta:nth-child(153) {
+  transform: rotateY(15.75deg) translate(9.06692em) rotate(15.75deg);
+}
+.ring--penta:nth-child(152) {
+  transform: rotateY(18deg) translate(8.94427em) rotate(18deg);
+}
+.ring--penta:nth-child(151) {
+  transform: rotateY(20.25deg) translate(8.83834em) rotate(20.25deg);
+}
+.ring--penta:nth-child(150) {
+  transform: rotateY(22.5deg) translate(8.74822em) rotate(22.5deg);
+}
+.ring--penta:nth-child(149) {
+  transform: rotateY(24.75deg) translate(8.67316em) rotate(24.75deg);
+}
+.ring--penta:nth-child(148) {
+  transform: rotateY(27deg) translate(8.61254em) rotate(27deg);
+}
+.ring--penta:nth-child(147) {
+  transform: rotateY(29.25deg) translate(8.56588em) rotate(29.25deg);
+}
+.ring--penta:nth-child(146) {
+  transform: rotateY(31.5deg) translate(8.53281em) rotate(31.5deg);
+}
+.ring--penta:nth-child(145) {
+  transform: rotateY(33.75deg) translate(8.51307em) rotate(33.75deg);
+}
+.ring--penta:nth-child(144) {
+  transform: rotateY(36deg) translate(8.50651em) rotate(36deg);
+}
+.ring--penta:nth-child(143) {
+  transform: rotateY(38.25deg) translate(8.51307em) rotate(38.25deg);
+}
+.ring--penta:nth-child(142) {
+  transform: rotateY(40.5deg) translate(8.53281em) rotate(40.5deg);
+}
+.ring--penta:nth-child(141) {
+  transform: rotateY(42.75deg) translate(8.56588em) rotate(42.75deg);
+}
+.ring--penta:nth-child(140) {
+  transform: rotateY(45deg) translate(8.61254em) rotate(45deg);
+}
+.ring--penta:nth-child(139) {
+  transform: rotateY(47.25deg) translate(8.67316em) rotate(47.25deg);
+}
+.ring--penta:nth-child(138) {
+  transform: rotateY(49.5deg) translate(8.74822em) rotate(49.5deg);
+}
+.ring--penta:nth-child(137) {
+  transform: rotateY(51.75deg) translate(8.83834em) rotate(51.75deg);
+}
+.ring--penta:nth-child(136) {
+  transform: rotateY(54deg) translate(8.94427em) rotate(54deg);
+}
+.ring--penta:nth-child(135) {
+  transform: rotateY(56.25deg) translate(9.06692em) rotate(56.25deg);
+}
+.ring--penta:nth-child(134) {
+  transform: rotateY(58.5deg) translate(9.20738em) rotate(58.5deg);
+}
+.ring--penta:nth-child(133) {
+  transform: rotateY(60.75deg) translate(9.36692em) rotate(60.75deg);
+}
+.ring--penta:nth-child(132) {
+  transform: rotateY(63deg) translate(9.54708em) rotate(63deg);
+}
+.ring--penta:nth-child(131) {
+  transform: rotateY(65.25deg) translate(9.74962em) rotate(65.25deg);
+}
+.ring--penta:nth-child(130) {
+  transform: rotateY(67.5deg) translate(9.97667em) rotate(67.5deg);
+}
+.ring--penta:nth-child(129) {
+  transform: rotateY(69.75deg) translate(10.23069em) rotate(69.75deg);
+}
+.ring--penta:nth-child(128) {
+  transform: rotateY(72deg) translate(10.51462em) rotate(72deg);
+}
+.ring--penta:nth-child(127) {
+  transform: rotateY(74.25deg) translate(10.23069em) rotate(74.25deg);
+}
+.ring--penta:nth-child(126) {
+  transform: rotateY(76.5deg) translate(9.97667em) rotate(76.5deg);
+}
+.ring--penta:nth-child(125) {
+  transform: rotateY(78.75deg) translate(9.74962em) rotate(78.75deg);
+}
+.ring--penta:nth-child(124) {
+  transform: rotateY(81deg) translate(9.54708em) rotate(81deg);
+}
+.ring--penta:nth-child(123) {
+  transform: rotateY(83.25deg) translate(9.36692em) rotate(83.25deg);
+}
+.ring--penta:nth-child(122) {
+  transform: rotateY(85.5deg) translate(9.20738em) rotate(85.5deg);
+}
+.ring--penta:nth-child(121) {
+  transform: rotateY(87.75deg) translate(9.06692em) rotate(87.75deg);
+}
+.ring--penta:nth-child(120) {
+  transform: rotateY(90deg) translate(8.94427em) rotate(90deg);
+}
+.ring--penta:nth-child(119) {
+  transform: rotateY(92.25deg) translate(8.83834em) rotate(92.25deg);
+}
+.ring--penta:nth-child(118) {
+  transform: rotateY(94.5deg) translate(8.74822em) rotate(94.5deg);
+}
+.ring--penta:nth-child(117) {
+  transform: rotateY(96.75deg) translate(8.67316em) rotate(96.75deg);
+}
+.ring--penta:nth-child(116) {
+  transform: rotateY(99deg) translate(8.61254em) rotate(99deg);
+}
+.ring--penta:nth-child(115) {
+  transform: rotateY(101.25deg) translate(8.56588em) rotate(101.25deg);
+}
+.ring--penta:nth-child(114) {
+  transform: rotateY(103.5deg) translate(8.53281em) rotate(103.5deg);
+}
+.ring--penta:nth-child(113) {
+  transform: rotateY(105.75deg) translate(8.51307em) rotate(105.75deg);
+}
+.ring--penta:nth-child(112) {
+  transform: rotateY(108deg) translate(8.50651em) rotate(108deg);
+}
+.ring--penta:nth-child(111) {
+  transform: rotateY(110.25deg) translate(8.51307em) rotate(110.25deg);
+}
+.ring--penta:nth-child(110) {
+  transform: rotateY(112.5deg) translate(8.53281em) rotate(112.5deg);
+}
+.ring--penta:nth-child(109) {
+  transform: rotateY(114.75deg) translate(8.56588em) rotate(114.75deg);
+}
+.ring--penta:nth-child(108) {
+  transform: rotateY(117deg) translate(8.61254em) rotate(117deg);
+}
+.ring--penta:nth-child(107) {
+  transform: rotateY(119.25deg) translate(8.67316em) rotate(119.25deg);
+}
+.ring--penta:nth-child(106) {
+  transform: rotateY(121.5deg) translate(8.74822em) rotate(121.5deg);
+}
+.ring--penta:nth-child(105) {
+  transform: rotateY(123.75deg) translate(8.83834em) rotate(123.75deg);
+}
+.ring--penta:nth-child(104) {
+  transform: rotateY(126deg) translate(8.94427em) rotate(126deg);
+}
+.ring--penta:nth-child(103) {
+  transform: rotateY(128.25deg) translate(9.06692em) rotate(128.25deg);
+}
+.ring--penta:nth-child(102) {
+  transform: rotateY(130.5deg) translate(9.20738em) rotate(130.5deg);
+}
+.ring--penta:nth-child(101) {
+  transform: rotateY(132.75deg) translate(9.36692em) rotate(132.75deg);
+}
+.ring--penta:nth-child(100) {
+  transform: rotateY(135deg) translate(9.54708em) rotate(135deg);
+}
+.ring--penta:nth-child(99) {
+  transform: rotateY(137.25deg) translate(9.74962em) rotate(137.25deg);
+}
+.ring--penta:nth-child(98) {
+  transform: rotateY(139.5deg) translate(9.97667em) rotate(139.5deg);
+}
+.ring--penta:nth-child(97) {
+  transform: rotateY(141.75deg) translate(10.23069em) rotate(141.75deg);
+}
+.ring--penta:nth-child(96) {
+  transform: rotateY(144deg) translate(10.51462em) rotate(144deg);
+}
+.ring--penta:nth-child(95) {
+  transform: rotateY(146.25deg) translate(10.23069em) rotate(146.25deg);
+}
+.ring--penta:nth-child(94) {
+  transform: rotateY(148.5deg) translate(9.97667em) rotate(148.5deg);
+}
+.ring--penta:nth-child(93) {
+  transform: rotateY(150.75deg) translate(9.74962em) rotate(150.75deg);
+}
+.ring--penta:nth-child(92) {
+  transform: rotateY(153deg) translate(9.54708em) rotate(153deg);
+}
+.ring--penta:nth-child(91) {
+  transform: rotateY(155.25deg) translate(9.36692em) rotate(155.25deg);
+}
+.ring--penta:nth-child(90) {
+  transform: rotateY(157.5deg) translate(9.20738em) rotate(157.5deg);
+}
+.ring--penta:nth-child(89) {
+  transform: rotateY(159.75deg) translate(9.06692em) rotate(159.75deg);
+}
+.ring--penta:nth-child(88) {
+  transform: rotateY(162deg) translate(8.94427em) rotate(162deg);
+}
+.ring--penta:nth-child(87) {
+  transform: rotateY(164.25deg) translate(8.83834em) rotate(164.25deg);
+}
+.ring--penta:nth-child(86) {
+  transform: rotateY(166.5deg) translate(8.74822em) rotate(166.5deg);
+}
+.ring--penta:nth-child(85) {
+  transform: rotateY(168.75deg) translate(8.67316em) rotate(168.75deg);
+}
+.ring--penta:nth-child(84) {
+  transform: rotateY(171deg) translate(8.61254em) rotate(171deg);
+}
+.ring--penta:nth-child(83) {
+  transform: rotateY(173.25deg) translate(8.56588em) rotate(173.25deg);
+}
+.ring--penta:nth-child(82) {
+  transform: rotateY(175.5deg) translate(8.53281em) rotate(175.5deg);
+}
+.ring--penta:nth-child(81) {
+  transform: rotateY(177.75deg) translate(8.51307em) rotate(177.75deg);
+}
+.ring--penta:nth-child(80) {
+  transform: rotateY(180deg) translate(8.50651em) rotate(180deg);
+}
+.ring--penta:nth-child(79) {
+  transform: rotateY(182.25deg) translate(8.51307em) rotate(182.25deg);
+}
+.ring--penta:nth-child(78) {
+  transform: rotateY(184.5deg) translate(8.53281em) rotate(184.5deg);
+}
+.ring--penta:nth-child(77) {
+  transform: rotateY(186.75deg) translate(8.56588em) rotate(186.75deg);
+}
+.ring--penta:nth-child(76) {
+  transform: rotateY(189deg) translate(8.61254em) rotate(189deg);
+}
+.ring--penta:nth-child(75) {
+  transform: rotateY(191.25deg) translate(8.67316em) rotate(191.25deg);
+}
+.ring--penta:nth-child(74) {
+  transform: rotateY(193.5deg) translate(8.74822em) rotate(193.5deg);
+}
+.ring--penta:nth-child(73) {
+  transform: rotateY(195.75deg) translate(8.83834em) rotate(195.75deg);
+}
+.ring--penta:nth-child(72) {
+  transform: rotateY(198deg) translate(8.94427em) rotate(198deg);
+}
+.ring--penta:nth-child(71) {
+  transform: rotateY(200.25deg) translate(9.06692em) rotate(200.25deg);
+}
+.ring--penta:nth-child(70) {
+  transform: rotateY(202.5deg) translate(9.20738em) rotate(202.5deg);
+}
+.ring--penta:nth-child(69) {
+  transform: rotateY(204.75deg) translate(9.36692em) rotate(204.75deg);
+}
+.ring--penta:nth-child(68) {
+  transform: rotateY(207deg) translate(9.54708em) rotate(207deg);
+}
+.ring--penta:nth-child(67) {
+  transform: rotateY(209.25deg) translate(9.74962em) rotate(209.25deg);
+}
+.ring--penta:nth-child(66) {
+  transform: rotateY(211.5deg) translate(9.97667em) rotate(211.5deg);
+}
+.ring--penta:nth-child(65) {
+  transform: rotateY(213.75deg) translate(10.23069em) rotate(213.75deg);
+}
+.ring--penta:nth-child(64) {
+  transform: rotateY(216deg) translate(10.51462em) rotate(216deg);
+}
+.ring--penta:nth-child(63) {
+  transform: rotateY(218.25deg) translate(10.23069em) rotate(218.25deg);
+}
+.ring--penta:nth-child(62) {
+  transform: rotateY(220.5deg) translate(9.97667em) rotate(220.5deg);
+}
+.ring--penta:nth-child(61) {
+  transform: rotateY(222.75deg) translate(9.74962em) rotate(222.75deg);
+}
+.ring--penta:nth-child(60) {
+  transform: rotateY(225deg) translate(9.54708em) rotate(225deg);
+}
+.ring--penta:nth-child(59) {
+  transform: rotateY(227.25deg) translate(9.36692em) rotate(227.25deg);
+}
+.ring--penta:nth-child(58) {
+  transform: rotateY(229.5deg) translate(9.20738em) rotate(229.5deg);
+}
+.ring--penta:nth-child(57) {
+  transform: rotateY(231.75deg) translate(9.06692em) rotate(231.75deg);
+}
+.ring--penta:nth-child(56) {
+  transform: rotateY(234deg) translate(8.94427em) rotate(234deg);
+}
+.ring--penta:nth-child(55) {
+  transform: rotateY(236.25deg) translate(8.83834em) rotate(236.25deg);
+}
+.ring--penta:nth-child(54) {
+  transform: rotateY(238.5deg) translate(8.74822em) rotate(238.5deg);
+}
+.ring--penta:nth-child(53) {
+  transform: rotateY(240.75deg) translate(8.67316em) rotate(240.75deg);
+}
+.ring--penta:nth-child(52) {
+  transform: rotateY(243deg) translate(8.61254em) rotate(243deg);
+}
+.ring--penta:nth-child(51) {
+  transform: rotateY(245.25deg) translate(8.56588em) rotate(245.25deg);
+}
+.ring--penta:nth-child(50) {
+  transform: rotateY(247.5deg) translate(8.53281em) rotate(247.5deg);
+}
+.ring--penta:nth-child(49) {
+  transform: rotateY(249.75deg) translate(8.51307em) rotate(249.75deg);
+}
+.ring--penta:nth-child(48) {
+  transform: rotateY(252deg) translate(8.50651em) rotate(252deg);
+}
+.ring--penta:nth-child(47) {
+  transform: rotateY(254.25deg) translate(8.51307em) rotate(254.25deg);
+}
+.ring--penta:nth-child(46) {
+  transform: rotateY(256.5deg) translate(8.53281em) rotate(256.5deg);
+}
+.ring--penta:nth-child(45) {
+  transform: rotateY(258.75deg) translate(8.56588em) rotate(258.75deg);
+}
+.ring--penta:nth-child(44) {
+  transform: rotateY(261deg) translate(8.61254em) rotate(261deg);
+}
+.ring--penta:nth-child(43) {
+  transform: rotateY(263.25deg) translate(8.67316em) rotate(263.25deg);
+}
+.ring--penta:nth-child(42) {
+  transform: rotateY(265.5deg) translate(8.74822em) rotate(265.5deg);
+}
+.ring--penta:nth-child(41) {
+  transform: rotateY(267.75deg) translate(8.83834em) rotate(267.75deg);
+}
+.ring--penta:nth-child(40) {
+  transform: rotateY(270deg) translate(8.94427em) rotate(270deg);
+}
+.ring--penta:nth-child(39) {
+  transform: rotateY(272.25deg) translate(9.06692em) rotate(272.25deg);
+}
+.ring--penta:nth-child(38) {
+  transform: rotateY(274.5deg) translate(9.20738em) rotate(274.5deg);
+}
+.ring--penta:nth-child(37) {
+  transform: rotateY(276.75deg) translate(9.36692em) rotate(276.75deg);
+}
+.ring--penta:nth-child(36) {
+  transform: rotateY(279deg) translate(9.54708em) rotate(279deg);
+}
+.ring--penta:nth-child(35) {
+  transform: rotateY(281.25deg) translate(9.74962em) rotate(281.25deg);
+}
+.ring--penta:nth-child(34) {
+  transform: rotateY(283.5deg) translate(9.97667em) rotate(283.5deg);
+}
+.ring--penta:nth-child(33) {
+  transform: rotateY(285.75deg) translate(10.23069em) rotate(285.75deg);
+}
+.ring--penta:nth-child(32) {
+  transform: rotateY(288deg) translate(10.51462em) rotate(288deg);
+}
+.ring--penta:nth-child(31) {
+  transform: rotateY(290.25deg) translate(10.23069em) rotate(290.25deg);
+}
+.ring--penta:nth-child(30) {
+  transform: rotateY(292.5deg) translate(9.97667em) rotate(292.5deg);
+}
+.ring--penta:nth-child(29) {
+  transform: rotateY(294.75deg) translate(9.74962em) rotate(294.75deg);
+}
+.ring--penta:nth-child(28) {
+  transform: rotateY(297deg) translate(9.54708em) rotate(297deg);
+}
+.ring--penta:nth-child(27) {
+  transform: rotateY(299.25deg) translate(9.36692em) rotate(299.25deg);
+}
+.ring--penta:nth-child(26) {
+  transform: rotateY(301.5deg) translate(9.20738em) rotate(301.5deg);
+}
+.ring--penta:nth-child(25) {
+  transform: rotateY(303.75deg) translate(9.06692em) rotate(303.75deg);
+}
+.ring--penta:nth-child(24) {
+  transform: rotateY(306deg) translate(8.94427em) rotate(306deg);
+}
+.ring--penta:nth-child(23) {
+  transform: rotateY(308.25deg) translate(8.83834em) rotate(308.25deg);
+}
+.ring--penta:nth-child(22) {
+  transform: rotateY(310.5deg) translate(8.74822em) rotate(310.5deg);
+}
+.ring--penta:nth-child(21) {
+  transform: rotateY(312.75deg) translate(8.67316em) rotate(312.75deg);
+}
+.ring--penta:nth-child(20) {
+  transform: rotateY(315deg) translate(8.61254em) rotate(315deg);
+}
+.ring--penta:nth-child(19) {
+  transform: rotateY(317.25deg) translate(8.56588em) rotate(317.25deg);
+}
+.ring--penta:nth-child(18) {
+  transform: rotateY(319.5deg) translate(8.53281em) rotate(319.5deg);
+}
+.ring--penta:nth-child(17) {
+  transform: rotateY(321.75deg) translate(8.51307em) rotate(321.75deg);
+}
+.ring--penta:nth-child(16) {
+  transform: rotateY(324deg) translate(8.50651em) rotate(324deg);
+}
+.ring--penta:nth-child(15) {
+  transform: rotateY(326.25deg) translate(8.51307em) rotate(326.25deg);
+}
+.ring--penta:nth-child(14) {
+  transform: rotateY(328.5deg) translate(8.53281em) rotate(328.5deg);
+}
+.ring--penta:nth-child(13) {
+  transform: rotateY(330.75deg) translate(8.56588em) rotate(330.75deg);
+}
+.ring--penta:nth-child(12) {
+  transform: rotateY(333deg) translate(8.61254em) rotate(333deg);
+}
+.ring--penta:nth-child(11) {
+  transform: rotateY(335.25deg) translate(8.67316em) rotate(335.25deg);
+}
+.ring--penta:nth-child(10) {
+  transform: rotateY(337.5deg) translate(8.74822em) rotate(337.5deg);
+}
+.ring--penta:nth-child(9) {
+  transform: rotateY(339.75deg) translate(8.83834em) rotate(339.75deg);
+}
+.ring--penta:nth-child(8) {
+  transform: rotateY(342deg) translate(8.94427em) rotate(342deg);
+}
+.ring--penta:nth-child(7) {
+  transform: rotateY(344.25deg) translate(9.06692em) rotate(344.25deg);
+}
+.ring--penta:nth-child(6) {
+  transform: rotateY(346.5deg) translate(9.20738em) rotate(346.5deg);
+}
+.ring--penta:nth-child(5) {
+  transform: rotateY(348.75deg) translate(9.36692em) rotate(348.75deg);
+}
+.ring--penta:nth-child(4) {
+  transform: rotateY(351deg) translate(9.54708em) rotate(351deg);
+}
+.ring--penta:nth-child(3) {
+  transform: rotateY(353.25deg) translate(9.74962em) rotate(353.25deg);
+}
+.ring--penta:nth-child(2) {
+  transform: rotateY(355.5deg) translate(9.97667em) rotate(355.5deg);
+}
+.ring--penta:nth-child(1) {
+  transform: rotateY(357.75deg) translate(10.23069em) rotate(357.75deg);
+}
+
+.strip {
+  margin: -2.5em -0.125em;
+  width: 0.25em;
+  height: 5em;
+}
+.strip:before, .strip:after {
+  margin: -2.5em -0.125em;
+  width: 0.25em;
+  height: 5em;
+  transform: rotateY(-90deg);
+  background: green;
+  content: '';
+}
+.strip:after {
+  transform: rotateY(90deg);
+}
+.strip:nth-child(1) {
+  transform: rotate(0deg) translate(3.44095em);
+}
+.strip:nth-child(2) {
+  transform: rotate(72deg) translate(3.44095em);
+}
+.strip:nth-child(3) {
+  transform: rotate(144deg) translate(3.44095em);
+}
+.strip:nth-child(4) {
+  transform: rotate(216deg) translate(3.44095em);
+}
+.strip:nth-child(5) {
+  transform: rotate(288deg) translate(3.44095em);
+}
+
+</style></head><body>
+<div class='torus torus--polygonal'>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+  <div class='ring ring--penta'>
+    <div class='rotor'>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+      <div class='strip'></div>
+    </div>
+  </div>
+</div>
+</body></html>
diff --git a/gfx/tests/reftest/1696439-1-ref.html b/gfx/tests/reftest/1696439-1-ref.html
new file mode 100644
index 0000000000..d98885f597
--- /dev/null
+++ b/gfx/tests/reftest/1696439-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+<style>
+.circle {
+    width: 140px;
+    height: 140px;
+    border-radius: 70px;
+    background: green;
+}
+</style>
+</head>
+<body>
+<div class="circle"></div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1696439-1.html b/gfx/tests/reftest/1696439-1.html
new file mode 100644
index 0000000000..09d2f67acc
--- /dev/null
+++ b/gfx/tests/reftest/1696439-1.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+<style>
+.circle {
+    width: 140px;
+    height: 140px;
+    border-radius: 70px;
+    background: green;
+    transform: rotate(15deg);
+}
+</style>
+</head>
+<body>
+<div class="circle"></div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/1722689-1-ref.html b/gfx/tests/reftest/1722689-1-ref.html
new file mode 100644
index 0000000000..37f2dfa504
--- /dev/null
+++ b/gfx/tests/reftest/1722689-1-ref.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: Ahem;
+  src: local("Ahem"), url(Ahem.ttf);
+}
+div {
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 50px;
+  font: 0.5px/0 Ahem;
+  transform: scale(50);
+}
+</style>
+<div>test</div>
diff --git a/gfx/tests/reftest/1722689-1.html b/gfx/tests/reftest/1722689-1.html
new file mode 100644
index 0000000000..cf3c64e8cb
--- /dev/null
+++ b/gfx/tests/reftest/1722689-1.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: Ahem;
+  src: local("Ahem"), url(Ahem.ttf);
+}
+div {
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 50px;
+  font: 0.1px/0 Ahem;
+  transform: scale(250);
+}
+</style>
+<div>test</div>
diff --git a/gfx/tests/reftest/1724901-1-helper.svg b/gfx/tests/reftest/1724901-1-helper.svg
new file mode 100644
index 0000000000..7d88bae430
--- /dev/null
+++ b/gfx/tests/reftest/1724901-1-helper.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="15" viewBox="0 0 50 50" fill="black" xmlns="http://www.w3.org/2000/svg">
+<text x="-20" y="20" font-size="30">some</text>
+</svg>
diff --git a/gfx/tests/reftest/1724901-1-ref.html b/gfx/tests/reftest/1724901-1-ref.html
new file mode 100644
index 0000000000..d8cccf0077
--- /dev/null
+++ b/gfx/tests/reftest/1724901-1-ref.html
@@ -0,0 +1,3 @@
+<div style="transform: scale(40); transform-origin: top left">
+<!-- regular uri makes this an in-process if with or without fission -->
+<iframe src="1724901-1-helper.svg" style="border: none; width: 30px; height: 15px;">
diff --git a/gfx/tests/reftest/1724901-1.html b/gfx/tests/reftest/1724901-1.html
new file mode 100644
index 0000000000..6765bc57cd
--- /dev/null
+++ b/gfx/tests/reftest/1724901-1.html
@@ -0,0 +1,3 @@
+<div style="transform: scale(40); transform-origin: top left">
+<!-- data uri makes this an oop if with fission in a reftest because reftests set the pref browser.tabs.remote.dataUriInDefaultWebProcess -->
+<iframe src="data:image/svg+xml,<svg width='30' height='15' viewBox='0 0 50 50' fill='black' xmlns='http://www.w3.org/2000/svg'><text x='-20' y='20' font-size='30'>some</text></svg>" style="border: none; width: 30px; height: 15px;">
diff --git a/gfx/tests/reftest/1724901-2-helper.html b/gfx/tests/reftest/1724901-2-helper.html
new file mode 100644
index 0000000000..8893d65529
--- /dev/null
+++ b/gfx/tests/reftest/1724901-2-helper.html
@@ -0,0 +1,4 @@
+<style>
+	html, body, img { padding: 0; margin: 0;}
+</style>
+<img style="width: 1.5px; height: 2px;" src="bwinton.jpg">
diff --git a/gfx/tests/reftest/1724901-2-ref.html b/gfx/tests/reftest/1724901-2-ref.html
new file mode 100644
index 0000000000..52216d9e31
--- /dev/null
+++ b/gfx/tests/reftest/1724901-2-ref.html
@@ -0,0 +1,3 @@
+<div style="transform: scale(220); transform-origin: top left">
+<!-- regular uri makes this an in-process if with or without fission -->
+<iframe src="1724901-2-helper.html" style="border: none;">
diff --git a/gfx/tests/reftest/1724901-2.html b/gfx/tests/reftest/1724901-2.html
new file mode 100644
index 0000000000..d447d103fd
--- /dev/null
+++ b/gfx/tests/reftest/1724901-2.html
@@ -0,0 +1,3 @@
+<div style="transform: scale(220); transform-origin: top left">
+<!-- http example.org uri makes this an oop if with fission -->
+<iframe src="http://example.org/1724901-2-helper.html" style="border: none;">
diff --git a/gfx/tests/reftest/1760747-1-ref.html b/gfx/tests/reftest/1760747-1-ref.html
new file mode 100644
index 0000000000..12fe560065
--- /dev/null
+++ b/gfx/tests/reftest/1760747-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+   <body>
+    <div id="thediv" style="height: calc(100vh - 48px); overflow: auto; background: pink;">
+      <svg viewBox="400 0 700.000037419857 3313.000026691723" width="700.000037419857" height="3313.000026691723" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+
+        <g id="shape-957b8a71-919c-11ec-986a-ef8b5c5f9609">
+            <g id="shape-957b6363-919c-11ec-986a-ef8b5c5f9609" rx="0" ry="0" style="fill: none;">
+              <g id="shape-957aee43-919c-11ec-986a-ef8b5c5f9609" filter="url(#filter_efeb8b30-a903-11ec-9f8a-8f99f800c080)">
+                  <defs>
+                    <filter id="filter_efeb8b30-a903-11ec-9f8a-8f99f800c080" x="-0.07038252421852338" y="-0.04350809057600663" width="1.1407650484370468" height="1.1104536811520134" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
+                        <feflood flood-opacity="0" result="BackgroundImageFix"></feflood>
+                        <fecolormatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></fecolormatrix>
+                        <femorphology radius="2" operator="dilate" in="SourceAlpha" result="filter_62f77df0-8aa0-11ec-964c-41abbc9945a1"></femorphology>
+                        <feoffset dx="0" dy="3"></feoffset>
+                        <fegaussianblur stdDeviation="6"></fegaussianblur>
+                        <fecolormatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></fecolormatrix>
+                        <feblend mode="normal" in2="BackgroundImageFix" result="filter_62f77df0-8aa0-11ec-964c-41abbc9945a1"></feblend>
+                        <feblend mode="normal" in="SourceGraphic" in2="filter_62f77df0-8aa0-11ec-964c-41abbc9945a1" result="shape">
+                        </feblend>
+                    </filter>
+                  </defs>
+                  <g class="stroke-shape">
+                    <defs></defs>
+                    <path rx="0" ry="0" d="M653.5119461812897,606.9361755487703C653.5119461843797,598.437514118968,660.6813057936843,591.5376791790882,669.5119461839863,591.5376790200978L917.511946139,591.5376745549943C926.342586529302,591.5376743960032,933.5119461335889,598.4375090777221,933.5119461304989,606.9361705075248L933.5119460020705,960.1391780263225C933.5119459989801,968.6378394561248,926.3425863896755,975.5376743960046,917.5119459993734,975.5376745549952L669.5119460443602,975.537679020099C660.6813056540582,975.53767917909,653.5119460497713,968.6378444973707,653.5119460528613,960.1391830675684L653.5119461812897,606.9361755487703Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
+                  </g>
+              </g>
+            </g>
+        </g>
+      </svg>
+    </div>
+   </body>
+</html>
diff --git a/gfx/tests/reftest/1760747-1.html b/gfx/tests/reftest/1760747-1.html
new file mode 100644
index 0000000000..d471772afa
--- /dev/null
+++ b/gfx/tests/reftest/1760747-1.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<script>
+function scrollBottom() {
+  document.getElementById("thediv").scrollTo(0,999999);
+
+  document.defaultView.requestAnimationFrame(() => {
+    document.defaultView.requestAnimationFrame(scrollUp1);
+  });
+}
+function scrollUp1() {
+  document.getElementById("thediv").scrollTo(0,1216);
+
+  document.defaultView.requestAnimationFrame(() => {
+    document.defaultView.requestAnimationFrame(scrollUp2);
+  });
+}
+function scrollUp2() {
+  document.getElementById("thediv").scrollTo(0,971);
+
+  document.defaultView.requestAnimationFrame(() => {
+    document.defaultView.requestAnimationFrame(scrollUp3);
+  });
+}
+function scrollUp3() {
+  document.getElementById("thediv").scrollTo(0,523);
+
+  document.defaultView.requestAnimationFrame(() => {
+    document.defaultView.requestAnimationFrame(scrollUp4);
+  });
+}
+function scrollUp4() {
+  document.getElementById("thediv").scrollTo(0,0);
+
+  document.documentElement.removeAttribute('class');
+}
+
+window.addEventListener("MozReftestInvalidate", scrollBottom);
+</script>
+   <body>
+    <div id="thediv" style="height: calc(100vh - 48px); overflow: auto; background: pink;">
+      <svg viewBox="400 0 700.000037419857 3313.000026691723" width="700.000037419857" height="3313.000026691723" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+
+        <g id="shape-957b8a71-919c-11ec-986a-ef8b5c5f9609">
+            <g id="shape-957b6363-919c-11ec-986a-ef8b5c5f9609" rx="0" ry="0" style="fill: none;">
+              <g id="shape-957aee43-919c-11ec-986a-ef8b5c5f9609" filter="url(#filter_efeb8b30-a903-11ec-9f8a-8f99f800c080)">
+                  <defs>
+                    <filter id="filter_efeb8b30-a903-11ec-9f8a-8f99f800c080" x="-0.07038252421852338" y="-0.04350809057600663" width="1.1407650484370468" height="1.1104536811520134" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB">
+                        <feflood flood-opacity="0" result="BackgroundImageFix"></feflood>
+                        <fecolormatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></fecolormatrix>
+                        <femorphology radius="2" operator="dilate" in="SourceAlpha" result="filter_62f77df0-8aa0-11ec-964c-41abbc9945a1"></femorphology>
+                        <feoffset dx="0" dy="3"></feoffset>
+                        <fegaussianblur stdDeviation="6"></fegaussianblur>
+                        <fecolormatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"></fecolormatrix>
+                        <feblend mode="normal" in2="BackgroundImageFix" result="filter_62f77df0-8aa0-11ec-964c-41abbc9945a1"></feblend>
+                        <feblend mode="normal" in="SourceGraphic" in2="filter_62f77df0-8aa0-11ec-964c-41abbc9945a1" result="shape">
+                        </feblend>
+                    </filter>
+                  </defs>
+                  <g class="stroke-shape">
+                    <defs></defs>
+                    <path rx="0" ry="0" d="M653.5119461812897,606.9361755487703C653.5119461843797,598.437514118968,660.6813057936843,591.5376791790882,669.5119461839863,591.5376790200978L917.511946139,591.5376745549943C926.342586529302,591.5376743960032,933.5119461335889,598.4375090777221,933.5119461304989,606.9361705075248L933.5119460020705,960.1391780263225C933.5119459989801,968.6378394561248,926.3425863896755,975.5376743960046,917.5119459993734,975.5376745549952L669.5119460443602,975.537679020099C660.6813056540582,975.53767917909,653.5119460497713,968.6378444973707,653.5119460528613,960.1391830675684L653.5119461812897,606.9361755487703Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"></path>
+                  </g>
+              </g>
+            </g>
+        </g>
+      </svg>
+    </div>
+   </body>
+</html>
diff --git a/gfx/tests/reftest/1761460-ref.html b/gfx/tests/reftest/1761460-ref.html
new file mode 100644
index 0000000000..e487b961d1
--- /dev/null
+++ b/gfx/tests/reftest/1761460-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<style>
+.card {
+  box-sizing: border-box;
+  height: 400px;
+  width: 300px;
+  overflow: clip;
+  border-radius: 4px;
+}
+.card-heading-image {
+  width: 900px;
+  height: 300px;
+  background: red;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+</style>
+<div class="card">
+  <div class="card-heading-image"></div>
+</div>
diff --git a/gfx/tests/reftest/1761460.html b/gfx/tests/reftest/1761460.html
new file mode 100644
index 0000000000..d0a498f246
--- /dev/null
+++ b/gfx/tests/reftest/1761460.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<style>
+.card {
+  box-sizing: border-box;
+  height: 400px;
+  width: 300px;
+  overflow: clip;
+  border-radius: 4px;
+}
+.card-heading-image {
+  width: 900px;
+  height: 300px;
+  background: red;
+  transform: scaleX(-1);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+</style>
+<div class="card">
+  <div class="card-heading-image"></div>
+</div>
diff --git a/gfx/tests/reftest/1761685-1-ref.html b/gfx/tests/reftest/1761685-1-ref.html
new file mode 100644
index 0000000000..47811f9458
--- /dev/null
+++ b/gfx/tests/reftest/1761685-1-ref.html
@@ -0,0 +1,10 @@
+<span style="
+display: block;
+width: 50px;
+height: 50px;
+position: absolute;
+top: 45%; left: 45%;
+image-rendering: crisp-edges;
+background-size: 100% 100%;
+transform: scaleX(-1);
+"></span>
diff --git a/gfx/tests/reftest/1761685-1.html b/gfx/tests/reftest/1761685-1.html
new file mode 100644
index 0000000000..a8837695fc
--- /dev/null
+++ b/gfx/tests/reftest/1761685-1.html
@@ -0,0 +1,11 @@
+<span style="
+display: block;
+width: 50px;
+height: 50px;
+position: absolute;
+top: 45%; left: 45%;
+background-image: url('dino.png');
+image-rendering: crisp-edges;
+background-size: 100% 100%;
+transform: scaleX(-1);
+"></span>
diff --git a/gfx/tests/reftest/1765862-ref.html b/gfx/tests/reftest/1765862-ref.html
new file mode 100644
index 0000000000..c56f1b80d6
--- /dev/null
+++ b/gfx/tests/reftest/1765862-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.site-header {
+				position: relative;
+				z-index: 7;
+			}
+			.dropnav {
+				visibility: hidden;
+			}
+			.dropnav:after {
+				-webkit-backdrop-filter:blur(5px);
+				content:"";
+				height:calc(100vh - 70px);
+				position:fixed;
+				width:100%;
+			}
+		</style>
+	</head>
+	<body>
+		<header class="site-header">
+			<div class="dropnav">
+				<span>App</span>
+			</div>
+		</header>
+		<div style="position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background: blue;"></div>
+	</body>
+</html>
diff --git a/gfx/tests/reftest/1765862.html b/gfx/tests/reftest/1765862.html
new file mode 100644
index 0000000000..2f4546724f
--- /dev/null
+++ b/gfx/tests/reftest/1765862.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			.site-header {
+				position: relative;
+				z-index: 7;
+			}
+			.dropnav {
+				visibility: hidden;
+			}
+			.dropnav:after {
+				-webkit-backdrop-filter:blur(5px);
+				backdrop-filter:blur(5px);
+				content:"";
+				height:calc(100vh - 70px);
+				position:fixed;
+				width:100%;
+			}
+		</style>
+	</head>
+	<body>
+		<header class="site-header">
+			<div class="dropnav">
+				<span>App</span>
+			</div>
+		</header>
+		<div style="position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background: blue;"></div>
+	</body>
+</html>
diff --git a/gfx/tests/reftest/1792527-1-ref.html b/gfx/tests/reftest/1792527-1-ref.html
new file mode 100644
index 0000000000..85c32ef1c0
--- /dev/null
+++ b/gfx/tests/reftest/1792527-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.smooth {
+  image-rendering: smooth;
+}
+</style>
+</head>
+<body>
+<img class="smooth" src="dino.png" width="32" height="32">
+<img class="smooth" src="dino.png" width="32" height="32">
+<img class="smooth" src="dino.png" width="32" height="32">
+</body>
+</html>
diff --git a/gfx/tests/reftest/1792527-1.html b/gfx/tests/reftest/1792527-1.html
new file mode 100644
index 0000000000..15cd8492d9
--- /dev/null
+++ b/gfx/tests/reftest/1792527-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.crisp-edges {
+  image-rendering: crisp-edges;
+}
+
+.pixelated {
+  image-rendering: pixelated;
+}
+
+.smooth {
+  image-rendering: smooth;
+}
+</style>
+</head>
+<body>
+<img class="crisp-edges" src="dino.png" width="32" height="32">
+<img class="pixelated" src="dino.png" width="32" height="32">
+<img class="smooth" src="dino.png" width="32" height="32">
+</body>
+</html>
diff --git a/gfx/tests/reftest/1801588-1-ref.html b/gfx/tests/reftest/1801588-1-ref.html
new file mode 100644
index 0000000000..d23c2e67c2
--- /dev/null
+++ b/gfx/tests/reftest/1801588-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <canvas id="canvas" width="100" height="100"></canvas>
+    <script>
+  var c = document.getElementById("canvas");
+  var ctx = c.getContext("2d");
+  ctx.globalCompositeOperation = "copy";
+  ctx.fillStyle = "green";
+  ctx.fillRect(0, 0, 50, 50);
+    </script>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1801588-1.html b/gfx/tests/reftest/1801588-1.html
new file mode 100644
index 0000000000..d4081f1804
--- /dev/null
+++ b/gfx/tests/reftest/1801588-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <canvas id="canvas" width="100" height="100"></canvas>
+    <script>
+  var c = document.getElementById("canvas");
+  var ctx = c.getContext("2d");
+  ctx.fillStyle = "red";
+  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+  ctx.globalCompositeOperation = "copy";
+  ctx.fillStyle = "green";
+  ctx.fillRect(0, 0, 50, 50);
+    </script>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/1806140-notref.html b/gfx/tests/reftest/1806140-notref.html
new file mode 100644
index 0000000000..be9e18042c
--- /dev/null
+++ b/gfx/tests/reftest/1806140-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+.test { font: 24px -apple-system; }
+</style>
+<div class=test>Does italic style work?</div>
diff --git a/gfx/tests/reftest/1806140.html b/gfx/tests/reftest/1806140.html
new file mode 100644
index 0000000000..a9e5652a64
--- /dev/null
+++ b/gfx/tests/reftest/1806140.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+.test { font: 24px -apple-system; font-synthesis: none; }
+</style>
+<div class=test>Does <i>italic style</i> work?</div>
diff --git a/gfx/tests/reftest/1812341-ref.html b/gfx/tests/reftest/1812341-ref.html
new file mode 100644
index 0000000000..4f2da369d5
--- /dev/null
+++ b/gfx/tests/reftest/1812341-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+       .cube figure {
+              position: absolute;
+              width: 100%;
+              height: 100%
+       }
+</style>
+</head>
+
+<body style=background-color:#ffffff;overflow:hidden>
+              <div style=width:1504px;height:762px>
+                     <div class="cube" style="width:1024px;height:1024px;transform:translate(-50%,-50%) scale(1.46875);perspective:377px;perspective-origin:512px 512px">
+                            <figure class=face0 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(-89.9999deg) translateZ(-511.5px);background: orange"></figure>
+                            <figure class=face1 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(0.0001deg) translateZ(-511.5px);background: red"></figure>
+                            <figure class=face2 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(89.9999deg) translateZ(-511.5px);background:pink"></figure>
+                            <figure class=face3 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(180deg) translateZ(-511.5px);background: yellow"> </figure>
+                            <figure class=face4 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateX(-89.9999deg) translateZ(-511.5px);background: brown"> </figure>
+                            <figure class=face5 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateX(89.9999deg) translateZ(-511.5px);background: green"></figure>
+                     </div>
+              </div>
+</body>
diff --git a/gfx/tests/reftest/1812341.html b/gfx/tests/reftest/1812341.html
new file mode 100644
index 0000000000..9d9a18e1d4
--- /dev/null
+++ b/gfx/tests/reftest/1812341.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+       .cube figure {
+              position: absolute;
+              backface-visibility: hidden;
+              width: 100%;
+              height: 100%
+       }
+</style>
+</head>
+
+<body style=background-color:#ffffff;overflow:hidden>
+              <div style=width:1504px;height:762px>
+                     <div class="cube" style="width:1024px;height:1024px;transform:translate(-50%,-50%) scale(1.46875);perspective:377px;perspective-origin:512px 512px">
+                            <figure class=face0 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(-89.9999deg) translateZ(-511.5px);background: orange"></figure>
+                            <figure class=face1 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(0.0001deg) translateZ(-511.5px);background: red"></figure>
+                            <figure class=face2 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(89.9999deg) translateZ(-511.5px);background:pink"></figure>
+                            <figure class=face3 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateY(180deg) translateZ(-511.5px);background: yellow"> </figure>
+                            <figure class=face4 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateX(-89.9999deg) translateZ(-511.5px);background: brown"> </figure>
+                            <figure class=face5 style="transform:translateZ(377px) rotateX(-0.0823553rad) rotateY(1.79937rad) rotateX(89.9999deg) translateZ(-511.5px);background: green"></figure>
+                     </div>
+              </div>
+</body>
diff --git a/gfx/tests/reftest/1845828-1-ref.html b/gfx/tests/reftest/1845828-1-ref.html
new file mode 100644
index 0000000000..409b65c528
--- /dev/null
+++ b/gfx/tests/reftest/1845828-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+@font-face {
+    font-family: test;
+    src: url("Ahem.ttf");
+}
+</style>
+<canvas id=c></canvas>
+<script>
+document.fonts.load("10px test").then(() => {
+    ctx = c.getContext("2d");
+    ctx.scale(1, 1);
+    ctx.font = "10px test";
+    ctx.fillText("10px test", 10, 20);
+    ctx.font = "11px test";
+    ctx.fillText("11px test", 10, 40);
+    ctx.font = "12px test";
+    ctx.fillText("12px test", 10, 60);
+    ctx.font = "13px test";
+    ctx.fillText("13px test", 10, 80);
+    ctx.font = "14px test";
+    ctx.fillText("14px test", 10, 100);
+});
+</script>
diff --git a/gfx/tests/reftest/1845828-1.html b/gfx/tests/reftest/1845828-1.html
new file mode 100644
index 0000000000..d3aa93b80c
--- /dev/null
+++ b/gfx/tests/reftest/1845828-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+@font-face {
+    font-family: test;
+    src: url("Ahem.ttf");
+}
+</style>
+<canvas id=c></canvas>
+<script>
+document.fonts.load("1px test").then(() => {
+    ctx = c.getContext("2d");
+    ctx.scale(10, 10);
+    ctx.font = "1.0px test";
+    ctx.fillText("10px test", 1, 2);
+    ctx.font = "1.1px test";
+    ctx.fillText("11px test", 1, 4);
+    ctx.font = "1.2px test";
+    ctx.fillText("12px test", 1, 6);
+    ctx.font = "1.3px test";
+    ctx.fillText("13px test", 1, 8);
+    ctx.font = "1.4px test";
+    ctx.fillText("14px test", 1, 10);
+});
+</script>
diff --git a/gfx/tests/reftest/1853216-1-ref.html b/gfx/tests/reftest/1853216-1-ref.html
new file mode 100644
index 0000000000..5314b6e84a
--- /dev/null
+++ b/gfx/tests/reftest/1853216-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<div style="font-size: 50px; color: transparent; text-shadow: 0px 0px 0 rgba(0,0,0,0.2)">
+&#x1f550;
+&#x1f550;
+&#x1f550;
+</div>
diff --git a/gfx/tests/reftest/1853216-1.html b/gfx/tests/reftest/1853216-1.html
new file mode 100644
index 0000000000..62f0922f3a
--- /dev/null
+++ b/gfx/tests/reftest/1853216-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<div style="font-size: 50px; color: transparent; text-shadow: 0px 0px 0 rgba(0,0,0,0.2)">
+<!-- all 3 of these codepoints are clock faces, just with different hand positions,
+     so we expect their shadows to be identical -->
+&#x1f550;
+&#x1f552;
+&#x1f558;
+</div>
diff --git a/gfx/tests/reftest/1873708-emoji-canvas-filter-ref.html b/gfx/tests/reftest/1873708-emoji-canvas-filter-ref.html
new file mode 100644
index 0000000000..bc5d4ac1ef
--- /dev/null
+++ b/gfx/tests/reftest/1873708-emoji-canvas-filter-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+
+<p>The same 5 gray emoji should be present and unclipped on all 3 lines:</p>
+<canvas id=c width=400 height=200></canvas>
+
+<script>
+const x = c.getContext('2d');
+x.filter = 'invert(.5)';
+x.font = '50px monospace';
+const chWidth = x.measureText('x').width;
+const emojiWidth = x.measureText('\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}').width;
+// First line
+x.fillText('x', 0, 50);
+x.fillText('\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}', chWidth, 50);
+// Second line
+x.fillText('\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}', chWidth, 100);
+x.fillText('x', chWidth + emojiWidth, 100);
+// Third line
+x.fillText('x', 0, 150);
+x.fillText('\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}', chWidth, 150);
+x.fillText('x', chWidth + emojiWidth, 150);
+</script>
diff --git a/gfx/tests/reftest/1873708-emoji-canvas-filter.html b/gfx/tests/reftest/1873708-emoji-canvas-filter.html
new file mode 100644
index 0000000000..51b440c920
--- /dev/null
+++ b/gfx/tests/reftest/1873708-emoji-canvas-filter.html
@@ -0,0 +1,13 @@
+<!doctype html>
+
+<p>The same 5 gray emoji should be present and unclipped on all 3 lines:</p>
+<canvas id=c width=400 height=200></canvas>
+
+<script>
+const x = c.getContext('2d');
+x.filter = 'invert(.5)';
+x.font = '50px monospace';
+x.fillText('x\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E} ', 0, 50);
+x.fillText(' \u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}x', 0, 100);
+x.fillText('x\u{1F41E}\u{1F98A}\u{1F41E}\u{1F98A}\u{1F41E}x', 0, 150);
+</script>
diff --git a/gfx/tests/reftest/1972885-ref.html b/gfx/tests/reftest/1972885-ref.html
new file mode 100644
index 0000000000..1466912b49
--- /dev/null
+++ b/gfx/tests/reftest/1972885-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<title>Reference for Bug 1972885</title>
+<style>
+body {
+  margin: 0;
+}
+canvas {
+  /* Rounded up. */
+  margin-top: 2px;
+  width: 100px;
+  /* Subpixel snapped down. */
+  height: 100px;
+}
+</style>
+<canvas id="canvas"></canvas>
+<script>
+function draw(canvas, width, height) {
+  const ctx = canvas.getContext('2d');
+  canvas.width = width;
+  canvas.height = height;
+  const imgData = ctx.createImageData(width, height);
+  const u32View = new Uint32Array(imgData.data.buffer);
+  u32View.fill(0xFFFFFFFF);
+  for (let y = 0; y < height; y += 2) {
+    for (let x = 0; x < width; x++) {
+      u32View[y * width + x] = 0xFF000000;
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+}
+
+draw(canvas, 100, 100);
+</script>
diff --git a/gfx/tests/reftest/1972885.html b/gfx/tests/reftest/1972885.html
new file mode 100644
index 0000000000..49c0ac0c50
--- /dev/null
+++ b/gfx/tests/reftest/1972885.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Test for Bug 1972885</title>
+<style>
+body {
+  margin: 0;
+}
+canvas {
+  /* Height would round up to 101px, but subpixel snaps to 100. */
+  margin-top: 1.6px;
+  width: 100px;
+  height: 100.5px;
+}
+</style>
+<canvas id="canvas"></canvas>
+<script>
+function draw(canvas, width, height) {
+  const ctx = canvas.getContext('2d');
+  canvas.width = width;
+  canvas.height = height;
+  const imgData = ctx.createImageData(width, height);
+  const u32View = new Uint32Array(imgData.data.buffer);
+  u32View.fill(0xFFFFFFFF);
+  for (let y = 0; y < height; y += 2) {
+    for (let x = 0; x < width; x++) {
+      u32View[y * width + x] = 0xFF000000;
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+}
+
+const ro = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    if (entry.target !== canvas) {
+      continue;
+    }
+    draw(
+      canvas,
+      entry.devicePixelContentBoxSize[0].inlineSize,
+      entry.devicePixelContentBoxSize[0].blockSize);
+  }
+  document.documentElement.removeAttribute("class");
+});
+
+// Get the properly subpixel snapped size through ResizeObserver.
+ro.observe(canvas);
+</script>
diff --git a/gfx/tests/reftest/468496-1-ref.html b/gfx/tests/reftest/468496-1-ref.html
new file mode 100644
index 0000000000..c045d7d769
--- /dev/null
+++ b/gfx/tests/reftest/468496-1-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html><head>
+<title>stretched image artifacts (test)</title>
+<style>
+div {
+  height: 5px;
+  background-image: url("data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=");
+  background-repeat: repeat-x;
+}
+</style>
+</head><body>
+<div style="width: 540px">
+</div><div style="width: 541px">
+</div><div style="width: 542px">
+</div><div style="width: 543px">
+</div><div style="width: 544px">
+</div><div style="width: 545px">
+</div><div style="width: 546px">
+</div><div style="width: 547px">
+</div><div style="width: 548px">
+</div><div style="width: 549px">
+</div><div style="width: 550px">
+</div><div style="width: 551px">
+</div><div style="width: 552px">
+</div><div style="width: 553px">
+</div><div style="width: 554px">
+</div><div style="width: 555px">
+</div><div style="width: 556px">
+</div><div style="width: 557px">
+</div><div style="width: 558px">
+</div><div style="width: 559px">
+</div></body></html>
diff --git a/gfx/tests/reftest/468496-1.html b/gfx/tests/reftest/468496-1.html
new file mode 100644
index 0000000000..a6bc6dde63
--- /dev/null
+++ b/gfx/tests/reftest/468496-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html><head>
+<title>stretched image artifacts (test)</title>
+<style>
+img { display: block; }
+div { height: 5px; }
+</style>
+</head><body>
+<div style="width: 540px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 541px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 542px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 543px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 544px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+
+</div><div style="width: 545px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 546px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 547px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 548px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 549px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 550px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 551px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 552px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 553px">
+
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 554px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 555px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 556px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 557px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 558px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div><div style="width: 559px">
+<img width="100%" height="2" src="data:image/gif;base64,R0lGODdhAQACAPABAAD/AP///ywAAAAAAQACAAACAkQKADs=">
+</div></body></html>
diff --git a/gfx/tests/reftest/611498-1.html b/gfx/tests/reftest/611498-1.html
new file mode 100644
index 0000000000..453ec43624
--- /dev/null
+++ b/gfx/tests/reftest/611498-1.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html class="reftest-wait">
+<script type="text/javascript">
+function done()
+{
+  document.documentElement.className = "";
+}
+function move()
+{
+  elem = document.getElementById("moving");
+  elem.addEventListener("transitionend", done, true);
+  elem.style.position = "relative";
+  elem.style.top = 0;
+}
+</script>
+<body style="background: url('bwinton.jpg'); background-attachment: fixed" onload="move()">
+<div id="moving" style="position: absolute; top: 50px; background-image: url('blacktrans.png'); width: 100px; height: 100px; transition: top 0.1s; padding: 2px;">blah blah blah</div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/611498-ref.html b/gfx/tests/reftest/611498-ref.html
new file mode 100644
index 0000000000..0763857c8b
--- /dev/null
+++ b/gfx/tests/reftest/611498-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<html>
+<body style="background: url('bwinton.jpg'); background-attachment: fixed">
+<div style="background: url('blacktrans.png'); width: 100px; height: 100px; padding: 2px;">blah blah blah</div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/709477-1-ref.html b/gfx/tests/reftest/709477-1-ref.html
new file mode 100644
index 0000000000..eb8897f8ee
--- /dev/null
+++ b/gfx/tests/reftest/709477-1-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>glyph clipping (reference)</title>
+  <style>
+    #clip { position: absolute;
+            overflow: hidden;
+            font-size: 16px;
+            width: 500px;
+            height: 300px;}
+    /* Offsets keep the text far enough away from clip boundaries so that
+       cairo knows the text is within the clip.  Non-unit alpha color makes
+       the bug show even without antialiasing.  */
+    #text { position: absolute;
+            left: 100px;
+            top: 100px;
+            color: rgba(0,0,0,0.4)}
+    #cover { position: absolute;
+             top: 90px;
+             left: 120px;
+             height: 50px;
+             width: 60px;
+             background: transparent; }
+    #mod { position: absolute;
+             top: 400px;
+             left: 0px;
+             height: 2000px;
+             width: 600px;
+             background: transparent; }
+  </style>
+</head>
+<body>
+  <div id="clip">
+    <div id="text">
+    Some text that was</br>
+    initially partially covered.</br>
+    </div>
+  </div>
+  <div id="cover">
+  </div>
+  <div id="mod">
+  </div>
+</body>
+<script>
+  scrollTo(0,1);
+</script>
+</html>
diff --git a/gfx/tests/reftest/709477-1.html b/gfx/tests/reftest/709477-1.html
new file mode 100644
index 0000000000..8895ea67ec
--- /dev/null
+++ b/gfx/tests/reftest/709477-1.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>glyph clipping (test)</title>
+  <style>
+    #clip { position: absolute;
+            overflow: hidden;
+            font-size: 16px;
+            width: 500px;
+            height: 300px;}
+    /* Offsets keep the text far enough away from clip boundaries so that
+       cairo knows the text is within the clip.  Non-unit alpha color makes
+       the bug show even without antialiasing.  */
+    #text { position: absolute;
+            left: 100px;
+            top: 100px;
+            color: rgba(0,0,0,0.4)}
+    #cover { position: absolute;
+             top: 90px;
+             left: 120px;
+             height: 50px;
+             width: 60px;
+             background: green; }
+    #mod { position: absolute;
+             top: 400px;
+             left: 0px;
+             height: 2000px;
+             width: 600px;
+             background: green; }
+  </style>
+  <script>
+
+function doPaint()
+{
+  window.addEventListener("MozAfterPaint", doScroll);
+  var cover = document.getElementById("cover");
+  cover.style.background = "transparent";
+  var mod = document.getElementById("mod");
+  mod.style.background = "transparent";
+}
+
+function doScroll()
+{
+  window.removeEventListener("MozAfterPaint", doScroll);
+  window.addEventListener("MozAfterPaint", endTest);
+  scrollTo(0,1);
+}
+
+function endTest()
+{
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doPaint);
+  </script>
+</head>
+<body>
+  <div id="clip">
+    <div id="text">
+    Some text that was</br>
+    initially partially covered.</br>
+    </div>
+  </div>
+  <div id="cover">
+  </div>
+  <div id="mod">
+  </div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/853889-1-ref.html b/gfx/tests/reftest/853889-1-ref.html
new file mode 100644
index 0000000000..1a8513dedf
--- /dev/null
+++ b/gfx/tests/reftest/853889-1-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head><title>Testcase for bug 853889</title></head>
+  <body>
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
+         width="400px" height="400px">
+      <path d="M 0 0 L 0 50 L 400 50 L 400 0 Z"
+            fill="rgb(12,200,12)"></path>
+    </svg>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/853889-1.html b/gfx/tests/reftest/853889-1.html
new file mode 100644
index 0000000000..2b728c2975
--- /dev/null
+++ b/gfx/tests/reftest/853889-1.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head><title>Testcase for bug 853889</title></head>
+  <body>
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
+         width="400px" height="400px">
+
+      <path d="M 0 400 L 0 450 L 600 450 L 600 400 Z"
+            fill="rgb(200,12,12)"></path>
+      <path d="M 0 0 L 0 50 L 600 50 L 600 0 Z"
+            fill="rgb(200,12,12)"></path>
+
+      <path d="M 0 0 L 0 50 L 600 50 L 600 0 Z
+               M 0 400 L 0 450 L 600 450 L 600 400 Z"
+            fill="rgb(12,200,12)"></path>
+    </svg>
+  </body>
+</html>
diff --git a/gfx/tests/reftest/Ahem.ttf b/gfx/tests/reftest/Ahem.ttf
new file mode 100644
index 0000000000..ac81cb0316
--- /dev/null
+++ b/gfx/tests/reftest/Ahem.ttf
diff --git a/gfx/tests/reftest/blacktrans.png b/gfx/tests/reftest/blacktrans.png
new file mode 100644
index 0000000000..1b3ef9baa5
--- /dev/null
+++ b/gfx/tests/reftest/blacktrans.png
diff --git a/gfx/tests/reftest/bug1523410-translate-scale-snap-ref.html b/gfx/tests/reftest/bug1523410-translate-scale-snap-ref.html
new file mode 100644
index 0000000000..159d8a31e0
--- /dev/null
+++ b/gfx/tests/reftest/bug1523410-translate-scale-snap-ref.html
@@ -0,0 +1,37 @@
+<html reftest-zoom="0.8">
+<head>
+<style type="text/css">
+div.outermost {
+max-width: 1240px;
+}
+
+div.outer {
+max-width: 50%;
+}
+
+div.inner {
+transform: translateX(1px);
+position: relative;
+overflow: hidden;
+padding-bottom: 56.25%;
+}
+
+div.innermost {
+position: absolute;
+will-change: transform;
+transform: scale(1.0);
+}
+</style>
+</head>
+<body>
+<div class="outermost">
+<div class="outer">
+<div class="inner">
+<div class="innermost">
+<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmwAAAFdCAIAAAAxOabnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wEcFTUw5a6RmgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAERklEQVR42u3VMQEAAAjDMMC/56EB7kRCn3YKAPgYCQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUAExUAgAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAI4WK5EDuRah8ngAAAAASUVORK5CYII=">
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/bug1523410-translate-scale-snap.html b/gfx/tests/reftest/bug1523410-translate-scale-snap.html
new file mode 100644
index 0000000000..9c894c748a
--- /dev/null
+++ b/gfx/tests/reftest/bug1523410-translate-scale-snap.html
@@ -0,0 +1,37 @@
+<html reftest-zoom="0.8">
+<head>
+<style type="text/css">
+div.outermost {
+max-width: 1240px;
+}
+
+div.outer {
+max-width: 50%;
+}
+
+div.inner {
+transform: translateX(1px);
+position: relative;
+overflow: hidden;
+padding-bottom: 56.25%;
+}
+
+div.innermost {
+position: absolute;
+will-change: transform;
+transform: scale(2.0);
+}
+</style>
+</head>
+<body>
+<div class="outermost">
+<div class="outer">
+<div class="inner">
+<div class="innermost">
+<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmwAAAFdCAIAAAAxOabnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wEcFTUw5a6RmgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAERklEQVR42u3VMQEAAAjDMMC/56EB7kRCn3YKAPgYCQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUAExUAgAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAI4WK5EDuRah8ngAAAAASUVORK5CYII=">
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/gfx/tests/reftest/bwinton.jpg b/gfx/tests/reftest/bwinton.jpg
new file mode 100644
index 0000000000..708354511b
--- /dev/null
+++ b/gfx/tests/reftest/bwinton.jpg
diff --git a/gfx/tests/reftest/dino.png b/gfx/tests/reftest/dino.png
new file mode 100644
index 0000000000..740fb7a068
--- /dev/null
+++ b/gfx/tests/reftest/dino.png
diff --git a/gfx/tests/reftest/pass.svg b/gfx/tests/reftest/pass.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/gfx/tests/reftest/pass.svg
@@ -0,0 +1,8 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <title>Testcase reference file for generic pass condition</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/gfx/tests/reftest/picture-caching-on-async-zoom.html b/gfx/tests/reftest/picture-caching-on-async-zoom.html
new file mode 100644
index 0000000000..f32ab02d3b
--- /dev/null
+++ b/gfx/tests/reftest/picture-caching-on-async-zoom.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+  <meta name="viewport" content="width=device-width"/>
+  <title>The Grid in an overflowing div</title>
+  <style type="text/css">
+    html, body {
+        padding: 0;
+        border: 0;
+        margin: 0;
+        scrollbar-width: none;
+    }
+    table {
+        padding: 0;
+        margin: 0;
+        border-top: none;
+        border-left: none;
+        border-right: 1px solid black;
+        border-bottom: 1px solid black;
+    }
+    tr {
+        padding: 0;
+        border: 0;
+        margin: 0;
+    }
+    td {
+        /* top border counts as part of height, but
+           left border doesn't count as part of width.
+           go figure.
+        */
+        min-height: 99px;
+        height: 99px;
+        max-height: 99px;
+        min-width: 99px;
+        width: 99px;
+        max-width: 99px;
+        padding: 0;
+        border-left: 1px solid black;
+        border-top: 1px solid black;
+        border-right: none;
+        border-bottom: none;
+        margin: 0;
+        font-size: 12px;
+        text-align: left;
+        vertical-align: top;
+        font-family: monospace;
+    }
+  </style>
+ </head>
+ <body>
+  <div style="color: red">this text is above the scrolling div. the div below is 300x400</div>
+  <div id="nest" style="overflow: scroll; scrollbar-width: none; height: 400px; width: 300px">
+  <table cellspacing="0" cellpadding="0" border="0">
+   <script type="text/javascript">
+    var PAGE_SIZE = 2000;
+    var GRID_SIZE = 100;
+
+    var cnt = (PAGE_SIZE / GRID_SIZE);
+    for (var y = 0; y < cnt; y++) {
+        document.writeln( "<tr>" );
+        for (var x = 0; x < cnt; x++) {
+            var color = ((x + y) % 2) ? "blue" : "red";
+            document.writeln( "<td style='background-color: " + color + "'></td>" );
+        }
+        document.writeln( "</tr>" );
+    }
+   </script>
+  </table>
+  </div>
+  <div style="color: red">this text is below the scrolling div</div>
+  <script>
+    if (location.search == "?ref") {
+        // In the reference case we use a CSS transform so that we don't use
+        // the async-zoom codepath (which is handled differently by WR).
+        document.documentElement.setAttribute("style", "transform: scale(1.1); transform-origin: top left");
+        document.documentElement.classList.remove("reftest-wait");
+    } else {
+        // In the test case, we want to first paint the unscaled content, so that
+        // WR populates the picture cache. Then we apply an async zoom and paint
+        // again for the final snapshot. The bug in this case was that WR wasn't
+        // properly invalidating the picture cache tiles and so things would
+        // appear incorrectly.
+        window.addEventListener("MozAfterPaint", () => {
+            document.documentElement.setAttribute("reftest-async-zoom", "1.1");
+            document.documentElement.classList.remove("reftest-wait");
+        });
+    }
+  </script>
+ </body>
+</html>
diff --git a/gfx/tests/reftest/reftest.list b/gfx/tests/reftest/reftest.list
new file mode 100644
index 0000000000..bb081d5c06
--- /dev/null
+++ b/gfx/tests/reftest/reftest.list
@@ -0,0 +1,47 @@
+# 468496-1 will also detect bugs in video drivers.
+== 468496-1.html 468496-1-ref.html
+fuzzy(0-175,0-443) == 611498-1.html 611498-ref.html
+skip-if(gtkWidget||Android||isDebugBuild) fuzzy-if(appleSilicon,0-1,0-9) == 709477-1.html 709477-1-ref.html #Bug 1620096
+skip-if(!asyncPan) == 1086723.html 1086723-ref.html
+== 853889-1.html 853889-1-ref.html
+skip-if(Android) fuzzy(0-1,0-587) == 1143303-1.svg pass.svg
+fuzzy(0-100,0-30) == 1149923.html 1149923-ref.html # use fuzzy due to few distorted pixels caused by border-radius
+== 1131264-1.svg pass.svg
+== 1419528.html 1419528-ref.html
+== 1424673.html 1424673-ref.html
+== 1429411.html 1429411-ref.html
+fuzzy-if(winWidget,0-1,0-4) == 1435143.html 1435143-ref.html
+== 1444904.html 1444904-ref.html
+fuzzy-if(winWidget,46-95,1000-1100) fuzzy-if(cocoaWidget&&swgl,1-1,1-1) == 1451168.html 1451168-ref.html
+== 1461313.html 1461313-ref.html
+fuzzy-if(!useDrawSnapshot,0-5,0-1060) fuzzy-if(useDrawSnapshot,32-32,26350-26350) fuzzy-if(Android&&device&&!swgl,31-31,2028-2028) == 1463802.html 1463802-ref.html
+fuzzy(0-11,0-4) fails-if(useDrawSnapshot) == 1474722.html 1474722-ref.html
+fails-if(useDrawSnapshot) == 1501195.html 1501195-ref.html
+== 1519754.html 1519754-ref.html
+skip-if(!asyncPan) == 1524261.html 1524261-ref.html
+fuzzy-if(!useDrawSnapshot,14-14,44-95) == 1524353.html 1524353-ref.html
+== 1523776.html 1523776-ref.html
+== bug1523410-translate-scale-snap.html bug1523410-translate-scale-snap-ref.html
+== 1523080.html 1523080-ref.html
+== 1616444-same-color-different-paths.html 1616444-same-color-different-paths-ref.html
+skip-if(!asyncPan||Android) fuzzy-if(winWidget,54-94,2713-3419) fuzzy-if(cocoaWidget,24-24,1190-1200) pref(apz.allow_zooming,true) == picture-caching-on-async-zoom.html picture-caching-on-async-zoom.html?ref
+pref(apz.allow_zooming,true) fails-if(useDrawSnapshot) == 1662062-1-no-blurry.html 1662062-1-ref.html
+# Bug 1715676: nsBulletFrame has been removed and the new rendering does not use PushRoundedRect that this test is for:
+# == 1681610.html 1681610-ref.html
+skip-if(geckoview) fuzzy-if(!useDrawSnapshot,0-255,0-1050) fuzzy-if(useDrawSnapshot,0-255,0-3601) == 1687157-1.html 1687157-1-ref.html
+fuzzy(64-99,506-645) == 1696439-1.html 1696439-1-ref.html
+random-if(gtkWidget) == 1722689-1.html 1722689-1-ref.html
+fuzzy-if(useDrawSnapshot,255-255,5-5) == 1724901-1.html 1724901-1-ref.html
+pref(image.downscale-during-decode.enabled,true) skip-if(Android) fuzzy-if(useDrawSnapshot&&browserIsFission,203-203,193600-193600) HTTP == 1724901-2.html 1724901-2-ref.html
+== 1760747-1.html 1760747-1-ref.html
+!= 1761685-1.html 1761685-1-ref.html
+fuzzy(0-9,0-305) == 1761460.html 1761460-ref.html
+pref(layout.css.backdrop-filter.enabled,true) == 1765862.html 1765862-ref.html
+!= 1792527-1.html 1792527-1-ref.html
+== 1972885.html 1972885-ref.html
+== 1801588-1.html 1801588-1-ref.html
+skip-if(!cocoaWidget) != 1806140.html 1806140-notref.html
+fuzzy(0-1,0-240) == 1812341.html 1812341-ref.html
+random-if(gtkWidget) fuzzy-if(Android,0-125,0-106) == 1845828-1.html 1845828-1-ref.html # Result on Linux depends on font configuration/hinting/etc, affecting whether subpixel positioning is used
+fuzzy-if(!winWidget,0-1,0-4) fuzzy-if(winWidget,14-14,245-245) == 1853216-1.html 1853216-1-ref.html
+fuzzy-if(winWidget,0-1,0-13) == 1873708-emoji-canvas-filter.html 1873708-emoji-canvas-filter-ref.html
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /gfx/tests/reftest
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip