Bug 1323797 - Add compositor support for triangle layers (for BasicCompositor backend) - Part 4: Add reftests for plane splitting
MozReview-Commit-ID: Dj8TpIiNzba
--- a/layout/reftests/transform-3d/reftest.list
+++ b/layout/reftests/transform-3d/reftest.list
@@ -76,8 +76,11 @@ fuzzy-if(cocoaWidget,128,9) == animate-p
fuzzy(1,2000) == opacity-preserve3d-1.html opacity-preserve3d-1-ref.html
fuzzy(1,15000) == opacity-preserve3d-2.html opacity-preserve3d-2-ref.html
fuzzy(1,10000) == opacity-preserve3d-3.html opacity-preserve3d-3-ref.html
fuzzy(1,10000) == opacity-preserve3d-4.html opacity-preserve3d-4-ref.html
== snap-perspective-1.html snap-perspective-1-ref.html
== mask-layer-1.html mask-layer-ref.html
== mask-layer-2.html mask-layer-ref.html
== mask-layer-3.html mask-layer-ref.html
+fails-if(winWidget&&layersGPUAccelerated) == split-intersect1.html split-intersect1-ref.html # Bug 1323791: implement DirectX compositor polygon support
+fuzzy(255,150) fails-if(winWidget&&layersGPUAccelerated) == split-intersect2.html split-intersect2-ref.html # Bug 1323791
+fuzzy(255,100) fails-if(winWidget&&layersGPUAccelerated) == split-non-ortho1.html split-non-ortho1-ref.html # Bug 1323791
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 1 ref</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+
+ width: 50px;
+ height: 100px;
+}
+
+.first {
+ background-color: rgba(255,0,0,1);
+ left: 58px;
+}
+
+.second {
+ background-color: rgba(0,255,0,1);
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape first"></div>
+ <div class="shape second"></div>
+ </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 1</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+
+ transform-style: preserve-3d;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+
+ width: 100px;
+ height: 100px;
+}
+
+.first {
+ background-color: rgba(255,0,0,1);
+}
+
+.second {
+ background-color: rgba(0,255,0,1);
+ transform: rotateY(0.1deg);
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape first"></div>
+ <div class="shape second"></div>
+ </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect2-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 2 ref</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+}
+
+.red {
+ background-color: rgba(255,0,0,1);
+
+ width: 100px;
+ height: 15px;
+
+ top: 150.5px;
+ left: 73px;
+}
+
+.green1 {
+ background-color: rgba(0,255,0,1);
+
+ width: 30px;
+ height: 42.5px;
+
+ top: 108px;
+ left: 88px;
+}
+
+.green2 {
+ background-color: rgba(0,255,0,1);
+
+ width: 30px;
+ height: 50px;
+
+ top: 158px;
+ left: 88px;
+}
+
+.blue1 {
+ background-color: rgba(0,0,255,1);
+
+ top: 108px;
+ left: 128px;
+
+ width: 30px;
+ height: 42.5px;
+}
+
+.blue2 {
+ background-color: rgba(0,0,255,1);
+
+ width: 30px;
+ height: 50px;
+
+ top: 158px;
+ left: 128px;
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape red"></div>
+ <div class="shape green1"></div>
+ <div class="shape green2"></div>
+ <div class="shape blue1"></div>
+ <div class="shape blue2"></div>
+ </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect2.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 2</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+
+ transform-style: preserve-3d;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+
+ width: 30px;
+ height: 100px;
+}
+
+.red {
+ background-color: rgba(255,0,0,1);
+ transform: translate(100px, 100px) rotateZ(90deg) rotateY(60deg);
+}
+
+.green {
+ background-color: rgba(0,255,0,1);
+ transform: translate(80px, 100px);
+}
+
+.blue {
+ background-color: rgba(0,0,255,1);
+ transform: translate(120px, 100px);
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape red"></div>
+ <div class="shape green"></div>
+ <div class="shape blue"></div>
+ </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/split-non-ortho1-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split non-orthogonal 1 ref</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+
+ position: absolute;
+ transform-style: preserve-3d;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+}
+
+.red-square-back {
+ background-color: rgba(255,0,0,1);
+
+ width: 100px;
+ height: 100px;
+
+ top: 50px;
+ left: 50px;
+}
+
+.green-square-back {
+ background-color: rgba(0,255,0,1);
+
+ width: 150px;
+ height: 150px;
+
+ top: 50px;
+ left: 50px;
+
+ transform: rotateZ(45deg);
+}
+
+.red-square-front {
+ background-color: rgba(255,0,0,1);
+
+ width: 50px;
+ height: 50px;
+
+ top: 100px;
+ left: 100px;
+}
+
+.green-square-front {
+ background-color: rgba(0,255,0,1);
+
+ width: 72px;
+ height: 72px;
+
+ top: 63.5px;
+ left: 63.5px;
+
+ transform: rotateZ(45deg);
+}
+
+#canvas {
+ width: 100px
+ height: 100px;
+
+ top: 100px;
+ left: 100px;
+}
+
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape red-square-back"></div>
+ <div class="shape green-square-back"></div>
+ <div class="shape red-square-front"></div>
+ <div class="shape green-square-front"></div>
+ </div>
+</body>
+
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/split-non-ortho1.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split non-orthogonal 1</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+
+ position: absolute;
+ transform-style: preserve-3d;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+}
+
+.first {
+ background-color: rgba(255,0,0,1);
+
+ width: 100px;
+ height: 100px;
+
+ top: 50px;
+ left: 50px;
+}
+
+.second {
+ background-color: rgba(0,255,0,1);
+
+ width: 150px;
+ height: 150px;
+
+ top: 50px;
+ left: 50px;
+
+ transform: rotateZ(45deg) rotateY(0.1deg);
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape second"></div>
+ <div class="shape first"></div>
+ </div>
+</body>
+</html>