Chromium Code Reviews 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| 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..0f4da5f1b26bf6321add565e0627cfef0e29c04b |
| --- /dev/null |
| +++ b/LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html |
| @@ -0,0 +1,105 @@ |
| +<html> |
| +<head> |
| + <style type="text/css"> |
| + .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; |
| + } |
| + |
| + .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; |
| + } |
| + |
| + |
| + #results { |
| + 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> |
| + |
|
Julien - ping for review
2013/11/25 03:40:17
We should have a description of what is tested and
|
| + <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> |
| + |
| + <div id="results"></div> |
| + |
| +</body> |
| +</html> |
