src/third_party/WebKit/LayoutTests/inspector/layers/layers-3d-view-hit-testing.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/layers-test.js"></script>
   5 <script>
   6 function test()
   7 {
   8     var contentRoot;
   9     var layers;
  10     var rootOffsetXInPixels, rootOffsetYInPixels, rootHeightInPixels, rootWidthInPixels;
  11     var canvas;
  12     const ButtonByEventType = { mousemove: -1, mousedown: 0, mouseup: 0 };
  13
  14     function initLayers()
  15     {
  16         layerA = InspectorTest.findLayerByNodeIdAttribute("a");
  17         layerB = InspectorTest.findLayerByNodeIdAttribute("b");
  18         contentRoot = InspectorTest.layerTreeModel.contentRoot();
  19         layers = [{layer: layerA, name: "layer a"}, {layer: layerB, name: "layer b"}, {layer: contentRoot, name: "content root"}];
  20     }
  21
  22     function initSizes()
  23     {
  24         canvas = InspectorTest.layers3DView._canvasElement;
  25         var canvasWidth = canvas.offsetWidth;
  26         var canvasHeight = canvas.offsetHeight;
  27         var rootWidth = contentRoot.width();
  28         var rootHeight = contentRoot.height();
  29         var scaleX = rootWidth / canvasWidth;
  30         var scaleY = rootHeight / canvasHeight;
  31         var resultScale = Math.max(scaleX, scaleY);
  32         var width = canvasWidth * resultScale;
  33         var height = canvasHeight * resultScale;
  34         var rootOffsetX = (width - rootWidth) / 2;
  35         var rootOffsetY = (height - rootHeight) / 2;
  36         rootOffsetXInPixels = rootOffsetX / width * canvasWidth;
  37         rootOffsetYInPixels = rootOffsetY / height * canvasHeight;
  38         rootHeightInPixels = rootHeight / height * canvasHeight;
  39         rootWidthInPixels = rootHeight / width * canvasWidth;
  40     }
  41
  42     function dispatchMouseEventOnCanvas(eventType, x, y)
  43     {
  44         InspectorTest.dispatchMouseEvent(eventType, ButtonByEventType[eventType], canvas, rootOffsetXInPixels + rootWidthInPixels * x, rootOffsetYInPixels + rootHeightInPixels * y);
  45     }
  46
  47     function dumpStateForOutlineType(type)
  48     {
  49         var outlined = "none";
  50
  51         function checkLayer(layerInfo)
  52         {
  53             if (InspectorTest.layers3DView._lastActiveObject[type] && layerInfo.layer.id() === InspectorTest.layers3DView._lastActiveObject[type].layer.id())
  54                 outlined = layerInfo.name;
  55         }
  56
  57         layers.forEach(checkLayer);
  58         InspectorTest.addResult(type + " layer: " + outlined);
  59     }
  60
  61     function dumpOutlinedStateForLayers()
  62     {
  63         InspectorTest.addResult("State of layers:");
  64         dumpStateForOutlineType(WebInspector.Layers3DView.OutlineType.Hovered);
  65         dumpStateForOutlineType(WebInspector.Layers3DView.OutlineType.Selected);
  66     }
  67
  68     function onGotLayers()
  69     {
  70         initLayers();
  71         initSizes();
  72
  73         InspectorTest.addResult("Initial state");
  74         dumpOutlinedStateForLayers();
  75
  76         InspectorTest.addResult("\nHovering content root");
  77         dispatchMouseEventOnCanvas("mousemove", 0.1237135833164431, 0.11536508236291274);
  78         dumpOutlinedStateForLayers();
  79
  80         InspectorTest.addResult("\nSelecting layer b");
  81         dispatchMouseEventOnCanvas("mousedown", 0.5, 0.5);
  82         dispatchMouseEventOnCanvas("mouseup", 0.5, 0.5);
  83         dumpOutlinedStateForLayers();
  84
  85         InspectorTest.addResult("\nHovering layer a");
  86         dispatchMouseEventOnCanvas("mousemove", 0.4, 0.1);
  87         dumpOutlinedStateForLayers();
  88
  89         InspectorTest.addResult("\nSelecting content root");
  90         dispatchMouseEventOnCanvas("mousedown", 0.5, 0.001);
  91         dispatchMouseEventOnCanvas("mouseup", 0.5, 0.001);
  92         dumpOutlinedStateForLayers();
  93
  94         InspectorTest.completeTest();
  95     }
  96
  97     WebInspector.inspectorView.showPanel("layers");
  98     InspectorTest.requestLayers(onGotLayers);
  99 }
 100 </script>
 101 </head>
 102 <body onload="runTest()" style="height:500px;width:500px;">
 103 <div id="a" style="-webkit-transform:translateZ(0px) translateY(60px) rotateZ(45deg);width:300px;height:300px;margin-left:100px;">
 104     <div id="b" style="-webkit-transform:translateX(0px) translateY(0px) translateZ(0px) rotateX(45deg) rotateY(45deg);width:300px;height:300px;"></div>
 105 </div>
 106 </body>
 107 </html>