Bug 684759 - Part 5 - Add tests for preserve-3d layer sorting. r=roc

This commit is contained in:
Matt Woodrow 2011-10-07 10:24:58 +13:00
parent 37b2a02d8f
commit 74e918d561
8 changed files with 205 additions and 0 deletions

View File

@ -63,6 +63,8 @@ DEFINES += -D_IMPL_NS_LAYOUT
_TEST_FILES = \
border_radius_hit_testing_iframe.html \
test_preserve3d_sorting_hit_testing.html \
preserve3d_sorting_hit_testing_iframe.html \
bug369950-subframe.xml \
decoration_line_rendering.js \
test_after_paint_pref.html \

View File

@ -0,0 +1,48 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=684759
-->
<head>
<title>Test for Bug 684759</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body onload="run()">
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=684759">Mozilla Bug 684759</a>
<iframe src="preserve3d_sorting_hit_testing_iframe.html" id="iframe" height="1000" width="1000" style="border:none"></iframe>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 684759 **/
SimpleTest.waitForExplicitFinish();
function run() {
var iframe = document.getElementById("iframe");
var doc = iframe.contentDocument;
var big= doc.getElementById("big");
var small = doc.getElementById("small");
function check(x, y, expected_element, description)
{
is(doc.elementFromPoint(x, y), expected_element,
"point (" + x + ", " + y + "): " + description);
}
check(650, 250, small, "Small object should be infront of big");
check(650, 308, big, "Check bounds of small object");
check(650, 207, big, "Check bounds of small object");
check(607, 250, big, "Check bounds of small object");
check(708, 250, big, "Check bounds of small object");
SimpleTest.finish();
}
</script>
</pre>
</body>
</html>

View File

@ -26,3 +26,8 @@ fails == preserve3d-1a.html preserve3d-1-ref.html
== backface-visibility-1b.html about:blank
!= perspective-origin-1a.html rotatex-perspective-1a.html
== perspective-origin-1b.html perspective-origin-1a.html
!= sorting-1a.html sorting-1-ref.html
# Parallel planes, different z depth
== sorting-2a.html sorting-2-ref.html
# Parallel planes, same z depth (shouldn't be sorted!)
== sorting-2b.html sorting-2-ref.html

View File

@ -0,0 +1,35 @@
<html>
<head>
<style type="text/css">
#stage {
-moz-perspective: 1000px;
}
#parent {
-moz-transform-style: preserve-3d;
}
#big {
width: 1000px;
height: 1000px;
background-color: #995C7F;
-moz-transform: rotatey(45deg);
}
#small {
width: 100px;
height: 100px;
background-color: #995C7F;
-moz-transform: translate3d(600px, 200px, 0px);
}
</style>
</head>
<body>
<div id="stage">
<div id="parent">
<div id="small"></div>
<div id="big"></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,35 @@
<html>
<head>
<style type="text/css">
#stage {
-moz-perspective: 1000px;
}
#parent {
-moz-transform-style: preserve-3d;
}
#big {
width: 1000px;
height: 1000px;
background-color: #995C7F;
-moz-transform: rotatey(45deg);
}
#small {
width: 100px;
height: 100px;
background-color: #835A99;
-moz-transform: translate3d(600px, 200px, 0px);
}
</style>
</head>
<body>
<div id="stage">
<div id="parent">
<div id="small"></div>
<div id="big"></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,21 @@
<html>
<head>
<style type="text/css">
#one {
width: 100px;
height: 100px;
background-color: #00FF00;
}
#two {
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>

View File

@ -0,0 +1,29 @@
<html>
<head>
<style type="text/css">
#parent {
-moz-transform-style: preserve-3d;
}
#one {
width: 100px;
height: 100px;
background-color: #00FF00;
-moz-transform: translatez(10px);
}
#two {
width: 100px;
height: 100px;
background-color: red;
-moz-transform: translatez(-10px) translatey(-50px);
}
</style>
</head>
<body>
<div id="parent">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,30 @@
<html>
<head>
<style type="text/css">
#parent {
-moz-transform-style: preserve-3d;
-moz-transform: rotatex(180deg);
}
#one {
width: 100px;
height: 100px;
background-color: red;
-moz-transform: translatez(10px) translatey(50px);
}
#two {
width: 100px;
height: 100px;
background-color: #00FF00;
-moz-transform: translatez(10px);
}
</style>
</head>
<body>
<div id="parent">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>