/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Tests that keyboard and mouse navigation updates aria-active and focus
// of elements.

const TEST_URI = `
  <style>
  div { position: absolute; top: 42px; left: 42px;
  height: 100.111px; width: 100px; border: 10px solid black;
  padding: 20px; margin: 30px auto;}
  </style><div></div>
`;

add_task(function* () {
  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
  let {inspector, boxmodel} = yield openLayoutView();
  yield selectNode("div", inspector);

  yield testInitialFocus(inspector, boxmodel);
  yield testChangingLevels(inspector, boxmodel);
  yield testTabbingWrapAround(inspector, boxmodel);
  yield testChangingLevelsByClicking(inspector, boxmodel);
});

function* testInitialFocus(inspector, boxmodel) {
  info("Test that the focus is(on margin layout.");
  let doc = boxmodel.document;
  let container = doc.querySelector(".boxmodel-container");
  container.focus();
  EventUtils.synthesizeKey("KEY_Enter");

  is(container.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
    "Should be set to the position layout.");
}

function* testChangingLevels(inspector, boxmodel) {
  info("Test that using arrow keys updates level.");
  let doc = boxmodel.document;
  let container = doc.querySelector(".boxmodel-container");
  container.focus();
  EventUtils.synthesizeKey("KEY_Enter");
  EventUtils.synthesizeKey("KEY_Escape");

  EventUtils.synthesizeKey("KEY_ArrowDown");
  is(container.getAttribute("activedescendant"), "boxmodel-margins",
    "Should be set to the margin layout.");

  EventUtils.synthesizeKey("KEY_ArrowDown");
  is(container.getAttribute("activedescendant"), "boxmodel-borders",
    "Should be set to the border layout.");

  EventUtils.synthesizeKey("KEY_ArrowDown");
  is(container.getAttribute("activedescendant"), "boxmodel-paddings",
    "Should be set to the padding layout.");

  EventUtils.synthesizeKey("KEY_ArrowDown");
  is(container.getAttribute("activedescendant"), "boxmodel-contents",
    "Should be set to the content layout.");

  EventUtils.synthesizeKey("KEY_ArrowUp");
  is(container.getAttribute("activedescendant"), "boxmodel-paddings",
    "Should be set to the padding layout.");

  EventUtils.synthesizeKey("KEY_ArrowUp");
  is(container.getAttribute("activedescendant"), "boxmodel-borders",
    "Should be set to the border layout.");

  EventUtils.synthesizeKey("KEY_ArrowUp");
  is(container.getAttribute("activedescendant"), "boxmodel-margins",
    "Should be set to the margin layout.");

  EventUtils.synthesizeKey("KEY_ArrowUp");
  is(container.getAttribute("activedescendant"), "boxmodel-main devtools-monospace",
    "Should be set to the position layout.");
}

function* testTabbingWrapAround(inspector, boxmodel) {
  info("Test that using arrow keys updates level.");
  let doc = boxmodel.document;
  let container = doc.querySelector(".boxmodel-container");
  container.focus();
  EventUtils.synthesizeKey("KEY_Enter");

  let editLevel = container.getAttribute("activedescendant").split(" ")[0];
  let dataLevel = doc.querySelector(`.${editLevel}`).getAttribute("data-box");
  let editBoxes = [...doc.querySelectorAll(
    `[data-box="${dataLevel}"].boxmodel-editable`)];

  EventUtils.synthesizeKey("KEY_Escape");
  editBoxes[3].focus();
  EventUtils.synthesizeKey("KEY_Tab");
  is(editBoxes[0], doc.activeElement, "Top edit box should have focus.");

  editBoxes[0].focus();
  EventUtils.synthesizeKey("KEY_Tab", {shiftKey: true});
  is(editBoxes[3], doc.activeElement, "Left edit box should have focus.");
}

function* testChangingLevelsByClicking(inspector, boxmodel) {
  info("Test that clicking on levels updates level.");
  let doc = boxmodel.document;
  let container = doc.querySelector(".boxmodel-container");
  container.focus();

  let marginLayout = doc.querySelector(".boxmodel-margins");
  let borderLayout = doc.querySelector(".boxmodel-borders");
  let paddingLayout = doc.querySelector(".boxmodel-paddings");
  let contentLayout = doc.querySelector(".boxmodel-contents");
  let layouts = [contentLayout, paddingLayout, borderLayout, marginLayout];

  layouts.forEach(layout => {
    layout.click();
    is(container.getAttribute("activedescendant"), layout.className,
      "Should be set to" + layout.getAttribute("data-box") + "layout.");
  });
}
