Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(245)

Unified Diff: LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html

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
Patch Set: Created 6 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698