chromium/src/third_party/blink/web_tests/http/tests/devtools/elements/styles/styles-mouse-test.js

// Copyright 2018 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 that the styles sidebar can be used with a mouse.\n`);
  await TestRunner.loadModule('elements_test_runner');
  await TestRunner.showPanel('elements');
  await TestRunner.loadHTML(`
    <style>
      #inspected {
        color: blue;
        background-color: red;
      }
    </style>
    <div id="inspected">Text</div>
  `);
  await new Promise(x => ElementsTestRunner.selectNodeAndWaitForStyles('inspected', x));

  var stylesPane = UI.panels.elements._stylesWidget;
  var firstRule = stylesPane._sectionBlocks[0].sections[1].propertiesTreeOutline;
  var blueElement = () => firstRule.firstChild().valueElement;
  var colorElement = () => firstRule.firstChild().nameElement;
  var listItemElement = () => firstRule.firstChild().listItemElement;

  TestRunner.addResult('Test switching between items')
  mouseDown(blueElement());
  mouseUp(blueElement());
  TestRunner.addResult('');

  mouseDown(colorElement());
  mouseUp(colorElement());
  TestRunner.addResult('');

  mouseDown(blueElement());
  mouseUp(colorElement());
  TestRunner.addResult('');

  TestRunner.addResult('Cancel editing by clicking a blank area');
  mouseDown(listItemElement(), 6); // offset the click to stop eventSender from doing dblclick
  mouseUp(listItemElement(), 6);
  TestRunner.addResult('');

  TestRunner.addResult('Create a new property by clicking a blank area');
  mouseDown(listItemElement());
  mouseUp(listItemElement());
  TestRunner.addResult('');

  TestRunner.addResult('Test disabling the property');

  var checkbox = () => listItemElement().querySelector('.enabled-button');
  mouseDown(checkbox());
  mouseUp(checkbox());
  TestRunner.addResult('Enabled: ' + checkbox().checked);
  TestRunner.addResult('');


  TestRunner.addResult('Test enabling the property');
  mouseDown(checkbox());
  mouseUp(checkbox());
  TestRunner.addResult('Enabled: ' + checkbox().checked);
  TestRunner.addResult('');


  TestRunner.completeTest();

  function dumpEditingState() {
    if (!stylesPane._isEditingStyle) {
      TestRunner.addResult('Not editing');
      return;
    }
    TestRunner.addResult('Editing: "' + TestRunner.textContentWithoutStyles(document.deepActiveElement()) + '"');
  }

  function mouseDown(element, offset = 0) {
    TestRunner.addResult('mouse down: ' + element.tagName + ':' + TestRunner.textContentWithoutStyles(element));
    var rect = element.getBoundingClientRect();
    eventSender.mouseMoveTo((rect.left + rect.right) / 2 + offset, (rect.top + rect.bottom) / 2);
    eventSender.mouseDown();
    dumpEditingState();
  }

  function mouseUp(element, offset = 0) {
    TestRunner.addResult('mouse up: ' + element.tagName + ':' + TestRunner.textContentWithoutStyles(element));
    var rect = element.getBoundingClientRect();
    eventSender.mouseMoveTo((rect.left + rect.right) / 2 + offset, (rect.top + rect.bottom) / 2);
    eventSender.mouseUp();
    dumpEditingState();
  }

})();