зеркало из https://github.com/mozilla/pjs.git
Bug 684759 - Part 5 - Add tests for preserve-3d layer sorting. r=roc
This commit is contained in:
Matt Woodrow
Родитель
669bd978eb
Коммит
c62fce49f3
|
|
@ -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 \
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Загрузка…
Ссылка в новой задаче