summaryrefslogtreecommitdiffstats
path: root/gfx/tests/reftest
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /gfx/tests/reftest
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'gfx/tests/reftest')
-rw-r--r--gfx/tests/reftest/1086723-ref.html27
-rw-r--r--gfx/tests/reftest/1086723.html27
-rw-r--r--gfx/tests/reftest/1131264-1.svg17
-rw-r--r--gfx/tests/reftest/1143303-1.svg26
-rw-r--r--gfx/tests/reftest/1149923-ref.html28
-rw-r--r--gfx/tests/reftest/1149923.html29
-rw-r--r--gfx/tests/reftest/1419528-ref.html18
-rw-r--r--gfx/tests/reftest/1419528.html19
-rw-r--r--gfx/tests/reftest/1424673-ref.html6
-rw-r--r--gfx/tests/reftest/1424673.html39
-rw-r--r--gfx/tests/reftest/1429411-ref.html25
-rw-r--r--gfx/tests/reftest/1429411.html27
-rw-r--r--gfx/tests/reftest/1435143-ref.html22
-rw-r--r--gfx/tests/reftest/1435143.html25
-rw-r--r--gfx/tests/reftest/1444904-ref.html18
-rw-r--r--gfx/tests/reftest/1444904.html36
-rw-r--r--gfx/tests/reftest/1451168-ref.html54
-rw-r--r--gfx/tests/reftest/1451168.html56
-rw-r--r--gfx/tests/reftest/1461313-ref.html4
-rw-r--r--gfx/tests/reftest/1461313.html9
-rw-r--r--gfx/tests/reftest/1463802-ref.html22
-rw-r--r--gfx/tests/reftest/1463802.html22
-rw-r--r--gfx/tests/reftest/1474722-ref.html17
-rw-r--r--gfx/tests/reftest/1474722.html17
-rw-r--r--gfx/tests/reftest/1501195-ref.html30
-rw-r--r--gfx/tests/reftest/1501195.html31
-rw-r--r--gfx/tests/reftest/1519754-ref.html5
-rw-r--r--gfx/tests/reftest/1519754.html5
-rw-r--r--gfx/tests/reftest/1523080-ref.html7
-rw-r--r--gfx/tests/reftest/1523080.html13
-rw-r--r--gfx/tests/reftest/1523776-ref.html13
-rw-r--r--gfx/tests/reftest/1523776.html12
-rw-r--r--gfx/tests/reftest/1524261-ref.html4
-rw-r--r--gfx/tests/reftest/1524261.html10
-rw-r--r--gfx/tests/reftest/1524353-ref.html8
-rw-r--r--gfx/tests/reftest/1524353.html8
-rw-r--r--gfx/tests/reftest/1616444-same-color-different-paths-ref.html54
-rw-r--r--gfx/tests/reftest/1616444-same-color-different-paths.html92
-rw-r--r--gfx/tests/reftest/1662062-1-no-blurry.html20
-rw-r--r--gfx/tests/reftest/1662062-1-ref.html20
-rw-r--r--gfx/tests/reftest/1681610-ref.html41
-rw-r--r--gfx/tests/reftest/1681610.html40
-rw-r--r--gfx/tests/reftest/1687157-1-ref.html1982
-rw-r--r--gfx/tests/reftest/1687157-1.html1982
-rw-r--r--gfx/tests/reftest/1696439-1-ref.html15
-rw-r--r--gfx/tests/reftest/1696439-1.html16
-rw-r--r--gfx/tests/reftest/1722689-1-ref.html17
-rw-r--r--gfx/tests/reftest/1722689-1.html17
-rw-r--r--gfx/tests/reftest/1724901-1-helper.svg3
-rw-r--r--gfx/tests/reftest/1724901-1-ref.html3
-rw-r--r--gfx/tests/reftest/1724901-1.html3
-rw-r--r--gfx/tests/reftest/1724901-2-helper.html4
-rw-r--r--gfx/tests/reftest/1724901-2-ref.html3
-rw-r--r--gfx/tests/reftest/1724901-2.html3
-rw-r--r--gfx/tests/reftest/1760747-1-ref.html33
-rw-r--r--gfx/tests/reftest/1760747-1.html70
-rw-r--r--gfx/tests/reftest/1761460-ref.html20
-rw-r--r--gfx/tests/reftest/1761460.html21
-rw-r--r--gfx/tests/reftest/1761685-1-ref.html10
-rw-r--r--gfx/tests/reftest/1761685-1.html11
-rw-r--r--gfx/tests/reftest/1765862-ref.html29
-rw-r--r--gfx/tests/reftest/1765862.html30
-rw-r--r--gfx/tests/reftest/1792527-1-ref.html15
-rw-r--r--gfx/tests/reftest/1792527-1.html23
-rw-r--r--gfx/tests/reftest/1801588-1-ref.html13
-rw-r--r--gfx/tests/reftest/1801588-1.html16
-rw-r--r--gfx/tests/reftest/1806140-notref.html6
-rw-r--r--gfx/tests/reftest/1806140.html6
-rw-r--r--gfx/tests/reftest/1812341-ref.html23
-rw-r--r--gfx/tests/reftest/1812341.html24
-rw-r--r--gfx/tests/reftest/1845828-1-ref.html25
-rw-r--r--gfx/tests/reftest/1845828-1.html25
-rw-r--r--gfx/tests/reftest/1853216-1-ref.html7
-rw-r--r--gfx/tests/reftest/1853216-1.html9
-rw-r--r--gfx/tests/reftest/1873708-emoji-canvas-filter-ref.html22
-rw-r--r--gfx/tests/reftest/1873708-emoji-canvas-filter.html13
-rw-r--r--gfx/tests/reftest/1972885-ref.html35
-rw-r--r--gfx/tests/reftest/1972885.html48
-rw-r--r--gfx/tests/reftest/468496-1-ref.html32
-rw-r--r--gfx/tests/reftest/468496-1.html51
-rw-r--r--gfx/tests/reftest/611498-1.html19
-rw-r--r--gfx/tests/reftest/611498-ref.html6
-rw-r--r--gfx/tests/reftest/709477-1-ref.html47
-rw-r--r--gfx/tests/reftest/709477-1.html69
-rw-r--r--gfx/tests/reftest/853889-1-ref.html12
-rw-r--r--gfx/tests/reftest/853889-1.html19
-rw-r--r--gfx/tests/reftest/Ahem.ttfbin0 -> 12480 bytes
-rw-r--r--gfx/tests/reftest/blacktrans.pngbin0 -> 105 bytes
-rw-r--r--gfx/tests/reftest/bug1523410-translate-scale-snap-ref.html37
-rw-r--r--gfx/tests/reftest/bug1523410-translate-scale-snap.html37
-rw-r--r--gfx/tests/reftest/bwinton.jpgbin0 -> 1110 bytes
-rw-r--r--gfx/tests/reftest/dino.pngbin0 -> 1698 bytes
-rw-r--r--gfx/tests/reftest/pass.svg8
-rw-r--r--gfx/tests/reftest/picture-caching-on-async-zoom.html90
-rw-r--r--gfx/tests/reftest/reftest.list47
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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