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