blob: 04a065ebb4c334aad2aba625cb284e273808cf3a [file] [log] [blame]
<html>
<!-- This test reproduces a perspective w < 0 error addressed in
https://bugs.webkit.org/show_bug.cgi?id=79136. In that bug, as a layer is being
transformed, it may get "clamped" by the homogeneous coordinate w < 0. When
projecting individual points, this was handled correctly, but projecting quads was
ignoring this clamping, causing invalid quads to be generated, which ultimately did
not hit-test correctly.
-->
<head>
<style type="text/css">
#container {
-webkit-perspective: 1000px;
-webkit-perspective-origin-x: 145px;
/* removing this property fixes the issue, but doesn't provide the desired rendering */
-webkit-perspective-origin-y: 189px;
}
#intermediate {
position: absolute;
left: 40px;
top: 189px;
-webkit-transform-style: preserve-3d;
}
#results {
position: absolute;
top: 420px;
left: 20px;
}
#backgroundLayer {
position: absolute;
width: 400px;
height: 400px;
background-color: gray;
}
.highlightOnHover:hover {
background-color: orange;
}
.rotatedUp {
-webkit-transform: rotateX(-240deg) translateZ(200px)
}
.rotatedDown {
-webkit-transform: rotateX(-300deg) translateZ(200px)
}
.green {
background-color: green;
}
.box {
position: absolute;
width: 300px;
height: 110px;
}
</style>
<script src="resources/hit-test-utils.js"></script>
<script>
var hitTestData = [
// Points near the corners of the top layer
{ 'point': [35, 100], 'target' : 'topLayer' },
{ 'point': [370, 100], 'target' : 'topLayer' },
{ 'point': [40, 40], 'target' : 'topLayer' },
{ 'point': [365, 40], 'target' : 'topLayer' },
// Points within the axis-aligned bounding box of the top layer, but not actually on the layer itself
{ 'point': [35, 40], 'target' : 'backgroundLayer' },
{ 'point': [370, 40], 'target' : 'backgroundLayer' },
// Points near the corners of the top layer
{ 'point': [40, 340], 'target' : 'bottomLayer' },
{ 'point': [365, 340], 'target' : 'bottomLayer' },
{ 'point': [35, 260], 'target' : 'bottomLayer' },
{ 'point': [370, 280], 'target' : 'bottomLayer' },
// Points within the axis-aligned bounding box of the bottom layer, but not actually on the layer itself
{ 'point': [35, 340], 'target' : 'backgroundLayer' },
{ 'point': [371, 340], 'target' : 'backgroundLayer' },
];
window.addEventListener('load', runTest, false);
</script>
</head>
<body>
<div id="backgroundLayer"></div>
<div id="container">
<div id="intermediate" class="host" style="-webkit-transform: rotate3d(1, 0, 0, 270deg)">
<div id="topLayer" class="highlightOnHover rotatedUp green box" style=""></div>
<div id="bottomLayer" class="highlightOnHover rotatedDown green box" style=""></div>
</div>
</div>
<div id="results"></div>
</body>
</html>