{"size": 2506, "ext": "js", "max_stars_repo_path": "third_party/blink/web_tests/http/tests/devtools/layers/layers-panel-mouse-events.js", "max_stars_repo_name": "zealoussnow/chromium", "max_stars_repo_stars_event_min_datetime": "2020-09-02T03:05:41.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-30T04:40:55.000Z", "max_issues_repo_path": "third_party/blink/web_tests/http/tests/devtools/layers/layers-panel-mouse-events.js", "max_issues_repo_name": "zealoussnow/chromium", "max_issues_repo_issues_event_min_datetime": "2020-09-02T03:21:37.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T22:19:45.000Z", "max_forks_repo_path": "third_party/blink/web_tests/http/tests/devtools/layers/layers-panel-mouse-events.js", "max_forks_repo_name": "zealoussnow/chromium", "max_forks_repo_forks_event_min_datetime": "2020-07-22T18:49:18.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-08T10:27:16.000Z"}
{"max_stars_count": 76, "max_issues_count": 45, "max_forks_count": 8, "avg_line_length": 37.9696969697, "max_line_length": 102, "alphanum_fraction": 0.7083000798}
// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

(async function() {
  TestRunner.addResult(`Tests moust hover/select events handling in the Layers panel\n`);
  await TestRunner.loadModule('panels/layers'); await TestRunner.loadTestModule('layers_test_runner');
  await TestRunner.loadHTML(`
      <style>
      .layer {
          position: absolute;
          transform: translateZ(10px);
          opacity: 0.8;
          left: 20px;
          top: 20px;
          background-color: #eee;
          border-color: black;
      }
      </style>
      <div id="a" style="width: 200px; height: 200px" class="layer">
        <div class="layer" id="b1" style="width: 150px; height: 100px"></div>
        <div id="b2" class="layer" style="width: 140px; height: 110px">
          <div id="b3" class="layer" style="width: 140px; height: 110px;"></div>
          <div id="c" class="layer" style="width: 100px; height: 90px"></div>
        </div>
      </div>
    `);

  await TestRunner.showPanel('layers');
  await LayersTestRunner.requestLayers();

  UI.panels.layers.update();
  var layerB1 = LayersTestRunner.findLayerByNodeIdAttribute('b1');
  var treeElementB1 = LayersTestRunner.findLayerTreeElement(layerB1);

  var layerB3 = LayersTestRunner.findLayerByNodeIdAttribute('b3');
  var treeElementB3 = LayersTestRunner.findLayerTreeElement(layerB3);

  function dumpElementSelectionState() {
    UI.panels.layers.update();
    LayersTestRunner.dumpSelectedStyles('Layer b1 in tree', treeElementB1);
    LayersTestRunner.dumpSelectedStyles('Layer b3 in tree', treeElementB3);
  }
  TestRunner.addResult('Hovering b1 in tree');
  LayersTestRunner.dispatchMouseEventToLayerTree('mousemove', -1, layerB1);
  dumpElementSelectionState();

  TestRunner.addResult('Hovering b3 in tree');
  LayersTestRunner.dispatchMouseEventToLayerTree('mousemove', -1, layerB3);
  dumpElementSelectionState();

  TestRunner.addResult('Hovering away from tree');
  LayersTestRunner.dispatchMouseEventToLayerTree('mouseout', -1, layerB3);
  dumpElementSelectionState();

  TestRunner.addResult('Selecting b1 in tree');
  LayersTestRunner.dispatchMouseEventToLayerTree('mousedown', 0, layerB1);
  dumpElementSelectionState();

  TestRunner.addResult('Selecting b3 in tree');
  LayersTestRunner.dispatchMouseEventToLayerTree('mousedown', 0, layerB3);
  dumpElementSelectionState();

  TestRunner.completeTest();
})();
