diff options
Diffstat (limited to 'gfx/tests/reftest')
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: �& will-change: transform</div> + <div class="swatch header">C: �& border</div> + <div class="swatch header">D: solid-color gradient </div> + <div class="swatch header">E: �& will-change: transform</div> + <div class="swatch header">F: �& 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: �& will-change: transform</div> + <div class="swatch header">C: �& border</div> + <div class="swatch header">D: solid-color gradient </div> + <div class="swatch header">E: �& will-change: transform</div> + <div class="swatch header">F: �& 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)"> +🕐 +🕐 +🕐 +</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 --> +🕐 +🕒 +🕘 +</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 Binary files differnew file mode 100644 index 0000000000..ac81cb0316 --- /dev/null +++ b/gfx/tests/reftest/Ahem.ttf diff --git a/gfx/tests/reftest/blacktrans.png b/gfx/tests/reftest/blacktrans.png Binary files differnew file mode 100644 index 0000000000..1b3ef9baa5 --- /dev/null +++ b/gfx/tests/reftest/blacktrans.png diff --git a/gfx/tests/reftest/bug1523410-translate-scale-snap-ref.html b/gfx/tests/reftest/bug1523410-translate-scale-snap-ref.html new file mode 100644 index 0000000000..159d8a31e0 --- /dev/null +++ b/gfx/tests/reftest/bug1523410-translate-scale-snap-ref.html @@ -0,0 +1,37 @@ +<html reftest-zoom="0.8"> +<head> +<style type="text/css"> +div.outermost { +max-width: 1240px; +} + +div.outer { +max-width: 50%; +} + +div.inner { +transform: translateX(1px); +position: relative; +overflow: hidden; +padding-bottom: 56.25%; +} + +div.innermost { +position: absolute; +will-change: transform; +transform: scale(1.0); +} +</style> +</head> +<body> +<div class="outermost"> +<div class="outer"> +<div class="inner"> +<div class="innermost"> +<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmwAAAFdCAIAAAAxOabnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wEcFTUw5a6RmgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAERklEQVR42u3VMQEAAAjDMMC/56EB7kRCn3YKAPgYCQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUAExUAgAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAI4WK5EDuRah8ngAAAAASUVORK5CYII="> +</div> +</div> +</div> +</div> +</body> +</html> diff --git a/gfx/tests/reftest/bug1523410-translate-scale-snap.html b/gfx/tests/reftest/bug1523410-translate-scale-snap.html new file mode 100644 index 0000000000..9c894c748a --- /dev/null +++ b/gfx/tests/reftest/bug1523410-translate-scale-snap.html @@ -0,0 +1,37 @@ +<html reftest-zoom="0.8"> +<head> +<style type="text/css"> +div.outermost { +max-width: 1240px; +} + +div.outer { +max-width: 50%; +} + +div.inner { +transform: translateX(1px); +position: relative; +overflow: hidden; +padding-bottom: 56.25%; +} + +div.innermost { +position: absolute; +will-change: transform; +transform: scale(2.0); +} +</style> +</head> +<body> +<div class="outermost"> +<div class="outer"> +<div class="inner"> +<div class="innermost"> +<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmwAAAFdCAIAAAAxOabnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wEcFTUw5a6RmgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAERklEQVR42u3VMQEAAAjDMMC/56EB7kRCn3YKAPgYCQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAcBEAQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQAwUQDARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAEwUAEwUAEwUAEwUAExUAgAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQAMFEAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFAEwUAEwUAEwUAEwUAEwUADBRADBRADBRADBRADBRAMBEAcBEAcBEAcBEAQATBQATBQATBQATBQATBQBMFABMFABMFABMFABMFAAwUQAwUQAwUQAwUQDARAHARAHARAHARAHARAEAEwUAEwUAEwUAEwUAEwUATBQATBQATBQATBQATBQAMFEAMFEAMFEAMFEAwEQBwEQBwEQBwEQBwEQBABMFABMFABMFABMFABMFAI4WK5EDuRah8ngAAAAASUVORK5CYII="> +</div> +</div> +</div> +</div> +</body> +</html> diff --git a/gfx/tests/reftest/bwinton.jpg b/gfx/tests/reftest/bwinton.jpg Binary files differnew file mode 100644 index 0000000000..708354511b --- /dev/null +++ b/gfx/tests/reftest/bwinton.jpg diff --git a/gfx/tests/reftest/dino.png b/gfx/tests/reftest/dino.png Binary files differnew file mode 100644 index 0000000000..740fb7a068 --- /dev/null +++ b/gfx/tests/reftest/dino.png diff --git a/gfx/tests/reftest/pass.svg b/gfx/tests/reftest/pass.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/gfx/tests/reftest/pass.svg @@ -0,0 +1,8 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/gfx/tests/reftest/picture-caching-on-async-zoom.html b/gfx/tests/reftest/picture-caching-on-async-zoom.html new file mode 100644 index 0000000000..f32ab02d3b --- /dev/null +++ b/gfx/tests/reftest/picture-caching-on-async-zoom.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <meta name="viewport" content="width=device-width"/> + <title>The Grid in an overflowing div</title> + <style type="text/css"> + html, body { + padding: 0; + border: 0; + margin: 0; + scrollbar-width: none; + } + table { + padding: 0; + margin: 0; + border-top: none; + border-left: none; + border-right: 1px solid black; + border-bottom: 1px solid black; + } + tr { + padding: 0; + border: 0; + margin: 0; + } + td { + /* top border counts as part of height, but + left border doesn't count as part of width. + go figure. + */ + min-height: 99px; + height: 99px; + max-height: 99px; + min-width: 99px; + width: 99px; + max-width: 99px; + padding: 0; + border-left: 1px solid black; + border-top: 1px solid black; + border-right: none; + border-bottom: none; + margin: 0; + font-size: 12px; + text-align: left; + vertical-align: top; + font-family: monospace; + } + </style> + </head> + <body> + <div style="color: red">this text is above the scrolling div. the div below is 300x400</div> + <div id="nest" style="overflow: scroll; scrollbar-width: none; height: 400px; width: 300px"> + <table cellspacing="0" cellpadding="0" border="0"> + <script type="text/javascript"> + var PAGE_SIZE = 2000; + var GRID_SIZE = 100; + + var cnt = (PAGE_SIZE / GRID_SIZE); + for (var y = 0; y < cnt; y++) { + document.writeln( "<tr>" ); + for (var x = 0; x < cnt; x++) { + var color = ((x + y) % 2) ? "blue" : "red"; + document.writeln( "<td style='background-color: " + color + "'></td>" ); + } + document.writeln( "</tr>" ); + } + </script> + </table> + </div> + <div style="color: red">this text is below the scrolling div</div> + <script> + if (location.search == "?ref") { + // In the reference case we use a CSS transform so that we don't use + // the async-zoom codepath (which is handled differently by WR). + document.documentElement.setAttribute("style", "transform: scale(1.1); transform-origin: top left"); + document.documentElement.classList.remove("reftest-wait"); + } else { + // In the test case, we want to first paint the unscaled content, so that + // WR populates the picture cache. Then we apply an async zoom and paint + // again for the final snapshot. The bug in this case was that WR wasn't + // properly invalidating the picture cache tiles and so things would + // appear incorrectly. + window.addEventListener("MozAfterPaint", () => { + document.documentElement.setAttribute("reftest-async-zoom", "1.1"); + document.documentElement.classList.remove("reftest-wait"); + }); + } + </script> + </body> +</html> diff --git a/gfx/tests/reftest/reftest.list b/gfx/tests/reftest/reftest.list new file mode 100644 index 0000000000..bb081d5c06 --- /dev/null +++ b/gfx/tests/reftest/reftest.list @@ -0,0 +1,47 @@ +# 468496-1 will also detect bugs in video drivers. +== 468496-1.html 468496-1-ref.html +fuzzy(0-175,0-443) == 611498-1.html 611498-ref.html +skip-if(gtkWidget||Android||isDebugBuild) fuzzy-if(appleSilicon,0-1,0-9) == 709477-1.html 709477-1-ref.html #Bug 1620096 +skip-if(!asyncPan) == 1086723.html 1086723-ref.html +== 853889-1.html 853889-1-ref.html +skip-if(Android) fuzzy(0-1,0-587) == 1143303-1.svg pass.svg +fuzzy(0-100,0-30) == 1149923.html 1149923-ref.html # use fuzzy due to few distorted pixels caused by border-radius +== 1131264-1.svg pass.svg +== 1419528.html 1419528-ref.html +== 1424673.html 1424673-ref.html +== 1429411.html 1429411-ref.html +fuzzy-if(winWidget,0-1,0-4) == 1435143.html 1435143-ref.html +== 1444904.html 1444904-ref.html +fuzzy-if(winWidget,46-95,1000-1100) fuzzy-if(cocoaWidget&&swgl,1-1,1-1) == 1451168.html 1451168-ref.html +== 1461313.html 1461313-ref.html +fuzzy-if(!useDrawSnapshot,0-5,0-1060) fuzzy-if(useDrawSnapshot,32-32,26350-26350) fuzzy-if(Android&&device&&!swgl,31-31,2028-2028) == 1463802.html 1463802-ref.html +fuzzy(0-11,0-4) fails-if(useDrawSnapshot) == 1474722.html 1474722-ref.html +fails-if(useDrawSnapshot) == 1501195.html 1501195-ref.html +== 1519754.html 1519754-ref.html +skip-if(!asyncPan) == 1524261.html 1524261-ref.html +fuzzy-if(!useDrawSnapshot,14-14,44-95) == 1524353.html 1524353-ref.html +== 1523776.html 1523776-ref.html +== bug1523410-translate-scale-snap.html bug1523410-translate-scale-snap-ref.html +== 1523080.html 1523080-ref.html +== 1616444-same-color-different-paths.html 1616444-same-color-different-paths-ref.html +skip-if(!asyncPan||Android) fuzzy-if(winWidget,54-94,2713-3419) fuzzy-if(cocoaWidget,24-24,1190-1200) pref(apz.allow_zooming,true) == picture-caching-on-async-zoom.html picture-caching-on-async-zoom.html?ref +pref(apz.allow_zooming,true) fails-if(useDrawSnapshot) == 1662062-1-no-blurry.html 1662062-1-ref.html +# Bug 1715676: nsBulletFrame has been removed and the new rendering does not use PushRoundedRect that this test is for: +# == 1681610.html 1681610-ref.html +skip-if(geckoview) fuzzy-if(!useDrawSnapshot,0-255,0-1050) fuzzy-if(useDrawSnapshot,0-255,0-3601) == 1687157-1.html 1687157-1-ref.html +fuzzy(64-99,506-645) == 1696439-1.html 1696439-1-ref.html +random-if(gtkWidget) == 1722689-1.html 1722689-1-ref.html +fuzzy-if(useDrawSnapshot,255-255,5-5) == 1724901-1.html 1724901-1-ref.html +pref(image.downscale-during-decode.enabled,true) skip-if(Android) fuzzy-if(useDrawSnapshot&&browserIsFission,203-203,193600-193600) HTTP == 1724901-2.html 1724901-2-ref.html +== 1760747-1.html 1760747-1-ref.html +!= 1761685-1.html 1761685-1-ref.html +fuzzy(0-9,0-305) == 1761460.html 1761460-ref.html +pref(layout.css.backdrop-filter.enabled,true) == 1765862.html 1765862-ref.html +!= 1792527-1.html 1792527-1-ref.html +== 1972885.html 1972885-ref.html +== 1801588-1.html 1801588-1-ref.html +skip-if(!cocoaWidget) != 1806140.html 1806140-notref.html +fuzzy(0-1,0-240) == 1812341.html 1812341-ref.html +random-if(gtkWidget) fuzzy-if(Android,0-125,0-106) == 1845828-1.html 1845828-1-ref.html # Result on Linux depends on font configuration/hinting/etc, affecting whether subpixel positioning is used +fuzzy-if(!winWidget,0-1,0-4) fuzzy-if(winWidget,14-14,245-245) == 1853216-1.html 1853216-1-ref.html +fuzzy-if(winWidget,0-1,0-13) == 1873708-emoji-canvas-filter.html 1873708-emoji-canvas-filter-ref.html |
