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…

Side by Side 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: Sorry for the late delay. Here is an updated patch. I've put the description under the tested eleme… Created 6 years, 11 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 unified diff | Download patch

« LayoutTests/transforms/3d/hit-testing/negative-zoffset-hit-test.html ('K') | « LayoutTests/transforms/3d/hit-testing/negative-zoffset-hit-test-expected.txt ('k') | LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4 <style type="text/css">

	5 .container

	6 {

	7 position: absolute;

	8 height: 200px;

	9 width:200px;

	10 background-color: gray;

	11 }

	12

	13 .nopreserve {

	14 top: 0;

	15 left: 0;

	16 }

	17

	18 .preserve {

	19 top: 250px;

	20 left: 0;

	21 -webkit-transform-style: preserve-3d;

	22 -moz-transform-style: preserve-3d;

	23 }
	Julien - ping for review 2014/01/10 13:59:54 The test is inconsistent. If you want to make it w The test is inconsistent. If you want to make it work in all browsers and future proof it (which is a really good goal), you should do it everywhere. Here we don't always add all the appropriate style (this declaration is missing transform-style: preserve-3d) so it makes me think we should just keep the -webkit version.
	24

	25 .box {

	26 width: 100%;

	27 position: absolute;

	28 height: 100%;

	29 top: 0;

	30 }

	31

	32 .red {
	Julien - ping for review 2014/01/10 13:59:54 Weird indentation on this line. Weird indentation on this line.
	33 background-color: red;

	34 -webkit-transform: perspective( 600px ) rotateY( 45deg );

	35 -moz-transform: perspective( 600px ) rotateY( 45deg );

	36 transform: perspective( 600px ) rotateY( 45deg );

	37 }

	38

	39 .blue {
	Julien - ping for review 2014/01/10 13:59:54 Same comment. Same comment.
	40 background-color: blue;

	41 -webkit-transform: perspective( 600px ) rotateY( -45deg );

	42 -moz-transform: perspective( 600px ) rotateY( -45deg );

	43 transform: perspective( 600px ) rotateY( -45deg );

	44 }

	45

	46 /* target1 contain points with negative z-offsets */

	47 #target

	48 {

	49 position: relative;

	50 height: 160px;

	51 width: 160px;

	52 margin: 20px;

	53 background-color: #DDD;

	54 -webkit-transform: rotate3d(0, 1, 0, -45deg);

	55 -webkit-transform-origin: right;

	56 }

	57

	58

	59 #description {

	60 margin-top: 460px;

	61 }

	62 </style>

	63 <script src="resources/hit-test-utils.js"></script>

	64 <script>

	65 const hitTestData = [

	66

	67 { 'point': [10, 100], 'target' : 'container-nopreserve' },

	68 { 'point': [20, 100], 'target' : 'target2' },

	69 { 'point': [80, 100], 'target' : 'target1' },

	70 { 'point': [100, 100], 'target' : 'target1' },

	71 { 'point': [120, 100], 'target' : 'target1' },

	72 { 'point': [180, 100], 'target' : 'target1' },

	73 { 'point': [190, 100], 'target' : 'container-nopreserve' },

	74

	75 { 'point': [10, 250], 'target' : 'container-preserve' },

	76 { 'point': [20, 250], 'target' : 'target4' },

	77 { 'point': [80, 250], 'target' : 'target4' },

	78 { 'point': [100, 250], 'target' : 'target4' },

	79 { 'point': [120, 250], 'target' : 'target3' },

	80 { 'point': [180, 250], 'target' : 'target3' },

	81 { 'point': [190, 250], 'target' : 'container-preserve' },

	82

	83 ];

	84 window.addEventListener('load', runTest, false);

	85 </script>

	86 </head>

	87 <body>

	88

	89 <div id="container-nopreserve" class="container nopreserve">

	90 <div id="target2" class="box red">

	91 </div>

	92 <div id="target1" class="box blue">

	93 </div>

	94 </div>

	95

	96 <div id="container-preserve" class="container preserve">

	97 <div id="target3" class="box blue">

	98 </div>

	99 <div id="target4" class="box red">

	100 </div>

	101 </div>

	102

	103 <p id="description">Checks that hit testing is correct when two layers with ne gative z-offset overlap</p>

	104

	105 <div id="results"></div>

	106

	107 </body>

	108 </html>

OLD	NEW