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