| Index: LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html
|
| diff --git a/LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html b/LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..ff67468540d54e3ef8be27cea8c410e8b1fc794b
|
| --- /dev/null
|
| +++ b/LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html
|
| @@ -0,0 +1,110 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| + <style>
|
| + .container {
|
| + position: absolute;
|
| + height: 200px;
|
| + width:200px;
|
| + background-color: gray;
|
| + }
|
| +
|
| + .nopreserve {
|
| + top: 0;
|
| + left: 0;
|
| + }
|
| +
|
| + .preserve {
|
| + top: 250px;
|
| + left: 0;
|
| + -webkit-transform-style: preserve-3d;
|
| + -moz-transform-style: preserve-3d;
|
| + transform-style: preserve-3d;
|
| + }
|
| +
|
| + .box {
|
| + width: 100%;
|
| + position: absolute;
|
| + height: 100%;
|
| + top: 0;
|
| + }
|
| +
|
| + .red {
|
| + background-color: red;
|
| + -webkit-transform: perspective( 600px ) rotateY( 45deg );
|
| + -moz-transform: perspective( 600px ) rotateY( 45deg );
|
| + transform: perspective( 600px ) rotateY( 45deg );
|
| + }
|
| +
|
| + .blue {
|
| + background-color: blue;
|
| + -webkit-transform: perspective( 600px ) rotateY( -45deg );
|
| + -moz-transform: perspective( 600px ) rotateY( -45deg );
|
| + transform: perspective( 600px ) rotateY( -45deg );
|
| + }
|
| +
|
| + /* target1 contain points with negative z-offsets */
|
| + #target {
|
| + position: relative;
|
| + height: 160px;
|
| + width: 160px;
|
| + margin: 20px;
|
| + background-color: #DDD;
|
| + -webkit-transform: rotate3d(0, 1, 0, -45deg);
|
| + -webkit-transform-origin: right;
|
| + -moz-transform: rotate3d(0, 1, 0, -45deg);
|
| + -moz-transform-origin: right;
|
| + transform: rotate3d(0, 1, 0, -45deg);
|
| + transform-origin: right;
|
| + }
|
| +
|
| + #description {
|
| + margin-top: 460px;
|
| + }
|
| + </style>
|
| + <script src="resources/hit-test-utils.js"></script>
|
| + <script>
|
| + const hitTestData = [
|
| +
|
| + { 'point': [10, 100], 'target' : 'container-nopreserve' },
|
| + { 'point': [20, 100], 'target' : 'target2' },
|
| + { 'point': [80, 100], 'target' : 'target1' },
|
| + { 'point': [100, 100], 'target' : 'target1' },
|
| + { 'point': [120, 100], 'target' : 'target1' },
|
| + { 'point': [180, 100], 'target' : 'target1' },
|
| + { 'point': [190, 100], 'target' : 'container-nopreserve' },
|
| +
|
| + { 'point': [10, 250], 'target' : 'container-preserve' },
|
| + { 'point': [20, 250], 'target' : 'target4' },
|
| + { 'point': [80, 250], 'target' : 'target4' },
|
| + { 'point': [100, 250], 'target' : 'target4' },
|
| + { 'point': [120, 250], 'target' : 'target3' },
|
| + { 'point': [180, 250], 'target' : 'target3' },
|
| + { 'point': [190, 250], 'target' : 'container-preserve' },
|
| +
|
| + ];
|
| + window.addEventListener('load', runTest, false);
|
| + </script>
|
| +</head>
|
| +<body>
|
| +
|
| + <div id="container-nopreserve" class="container nopreserve">
|
| + <div id="target2" class="box red">
|
| + </div>
|
| + <div id="target1" class="box blue">
|
| + </div>
|
| + </div>
|
| +
|
| + <div id="container-preserve" class="container preserve">
|
| + <div id="target3" class="box blue">
|
| + </div>
|
| + <div id="target4" class="box red">
|
| + </div>
|
| + </div>
|
| +
|
| + <p id="description">Checks that hit testing is correct when two layers with negative z-offset overlap</p>
|
| +
|
| + <div id="results"></div>
|
| +
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 79943002:
Only not take zOffset into account during hit-testing when child layers are in the same 3d renderin… (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master