<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf8">
  <title>Test for console.log styling with %c</title>
  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="common.js"></script>
  <!-- Any copyright is dedicated to the Public Domain.
     - http://creativecommons.org/publicdomain/zero/1.0/ -->
</head>
<body>
<p>Test for console.log styling with %c</p>

<script class="testbody" type="text/javascript">
"use strict";

SimpleTest.waitForExplicitFinish();

let expectedConsoleCalls = [];

function doConsoleCalls(aState)
{
  top.console.log("%cOne formatter with no styles");
  top.console.log("%cOne formatter", "color: red");
  top.console.log("%cTwo formatters%cEach with an arg",
    "color: red", "background: red");
  top.console.log("%c%cTwo formatters next to each other",
    "color: red", "background: red");
  top.console.log("%c%c%cThree formatters next to each other",
    "color: red", "background: red", "font-size: 150%");
  top.console.log("%c%cTwo formatters%cWith a third separated",
    "color: red", "background: red", "font-size: 150%");
  top.console.log("%cOne formatter", "color: red",
                  "Second arg with no styles");
  top.console.log("%cOne formatter", "color: red",
                  "%cSecond formatter is ignored", "background: blue")

  expectedConsoleCalls = [
    {
      level: "log",
      styles: undefined,
      arguments: ["%cOne formatter with no styles"],
    },
    {
      level: "log",
      styles: /^color: red$/,
      arguments: ["One formatter"],
    },
    {
      level: "log",
      styles: /^color: red,background: red$/,
      arguments: ["Two formatters", "Each with an arg"],
    },
    {
      level: "log",
      styles: /^background: red$/,
      arguments: ["Two formatters next to each other"],
    },
    {
      level: "log",
      styles: /^font-size: 150%$/,
      arguments: ["Three formatters next to each other"],
    },
    {
      level: "log",
      styles: /^background: red,font-size: 150%$/,
      arguments: ["Two formatters", "With a third separated"],
    },
    {
      level: "log",
      styles: /^color: red$/,
      arguments: ["One formatter", "Second arg with no styles"],
    },
    {
      level: "log",
      styles: /^color: red$/,
      arguments: ["One formatter",
                  "%cSecond formatter is ignored",
                  "background: blue"],
    },
  ];
}

async function startTest()
{
  removeEventListener("load", startTest);

  const {state, response} = await attachConsoleToTab(["ConsoleAPI"]);
  onAttach(state, response);
}

function onAttach(aState, aResponse)
{
  onConsoleAPICall = onConsoleAPICall.bind(null, aState);
  aState.webConsoleFront.on("consoleAPICall", onConsoleAPICall);
  doConsoleCalls(aState.actor);
}

let consoleCalls = [];

function onConsoleAPICall(aState, aPacket)
{
  info("received message level: " + aPacket.message.level);

  consoleCalls.push(aPacket.message);
  if (consoleCalls.length != expectedConsoleCalls.length) {
    return;
  }

  aState.webConsoleFront.off("consoleAPICall", onConsoleAPICall);

  expectedConsoleCalls.forEach(function(aMessage, aIndex) {
    info("checking received console call #" + aIndex);
    const expected = expectedConsoleCalls[aIndex];
    const consoleCall = consoleCalls[aIndex];
    if (expected.styles == undefined) {
      delete expected.styles;
      is(consoleCall.styles, undefined, "No 'styles' property")
    }
    checkConsoleAPICall(consoleCall, expected);
  });


  consoleCalls = [];

  closeDebugger(aState, function() {
    SimpleTest.finish();
  });
}

addEventListener("load", startTest);
</script>
</body>
</html>
