src/third_party/WebKit/LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5       .container {
   6         position: absolute;
   7         height: 200px;
   8         width:200px;
   9         background-color: gray;
  10       }
  11
  12       .nopreserve {
  13         top: 0;
  14         left: 0;
  15       }
  16
  17       .preserve {
  18         top: 250px;
  19         left: 0;
  20         transform-style: preserve-3d;
  21       }
  22
  23       .box {
  24         width: 100%;
  25         position: absolute;
  26         height: 100%;
  27         top: 0;
  28       }
  29
  30       .red {
  31         background-color: red;
  32         transform: perspective( 600px ) rotateY( 45deg );
  33       }
  34
  35       .blue {
  36         background-color: blue;
  37         transform: perspective( 600px ) rotateY( -45deg );
  38       }
  39
  40       /* target1 contain points with negative z-offsets */
  41       #target {
  42         position: relative;
  43         height: 160px;
  44         width: 160px;
  45         margin: 20px;
  46         background-color: #DDD;
  47         transform: rotate3d(0, 1, 0, -45deg);
  48         transform-origin: right;
  49       }
  50
  51       #description {
  52         margin-top: 460px;
  53       }
  54   </style>
  55   <script src="resources/hit-test-utils.js"></script>
  56   <script>
  57       const hitTestData = [
  58
  59         { 'point': [10, 100], 'target' : 'container-nopreserve' },
  60         { 'point': [20, 100], 'target' : 'target2' },
  61         { 'point': [80, 100], 'target' : 'target1' },
  62         { 'point': [100, 100], 'target' : 'target1' },
  63         { 'point': [120, 100], 'target' : 'target1' },
  64         { 'point': [180, 100], 'target' : 'target1' },
  65         { 'point': [190, 100], 'target' : 'container-nopreserve' },
  66
  67         { 'point': [10, 250], 'target' : 'container-preserve' },
  68         { 'point': [20, 250], 'target' : 'target4' },
  69         { 'point': [80, 250], 'target' : 'target4' },
  70         { 'point': [100, 250], 'target' : 'target4' },
  71         { 'point': [120, 250], 'target' : 'target3' },
  72         { 'point': [180, 250], 'target' : 'target3' },
  73         { 'point': [190, 250], 'target' : 'container-preserve' },
  74
  75       ];
  76       window.addEventListener('load', runTest, false);
  77   </script>
  78 </head>
  79 <body>
  80
  81   <div id="container-nopreserve" class="container nopreserve">
  82     <div id="target2" class="box red">
  83     </div>
  84     <div id="target1" class="box blue">
  85     </div>
  86   </div>
  87
  88   <div id="container-preserve" class="container preserve">
  89     <div id="target3" class="box blue">
  90     </div>
  91     <div id="target4" class="box red">
  92     </div>
  93   </div>
  94
  95   <p id="description">Checks that hit testing is correct when two layers with negative z-offset overlap</p>
  96
  97   <div id="results"></div>
  98
  99 </body>
 100 </html>