<!DOCTYPE html>
<sky>
<import src="../resources/mocha.sky" />
<import src="../resources/chai.sky" />
<style>
  div { font-size: 5px; }
  .font-10 { font-size: 10px; }
  .font-12 { font-size: 12px; }
  .font-24 { font-size: 24px; }
</style>
<div id="sandbox"></div>
<script>
describe("Class list", function() {
  var sandbox = document.getElementById("sandbox");
  var target;

  beforeEach(function() {
    target = document.createElement("div");
    sandbox.appendChild(target);
  });

  afterEach(function() {
    target.remove();
  });

  it("should add multiple classes", function() {
    target.classList.add("first", "second", "third");
    assert.equal(target.classList.toString(), "first second third");
  });

  it("should add classes in order", function() {
    target.classList.add("first");
    target.classList.add("second");
    assert.equal(target.classList.toString(), "first second");
  });

  it("should remove classes", function() {
    target.classList.add("first");
    target.classList.add("second");
    target.classList.add("third");
    target.classList.remove("second");
    assert.equal(target.classList.toString(), "first third");
  });

  it("should remove multiple classes", function() {
    target.classList.add("first", "second", "third");
    target.classList.remove("first", "third");
    assert.equal(target.classList.toString(), "second");
  });

  it("should clear all classes", function() {
    target.classList.add("first");
    target.classList.add("second");
    target.classList.clear();
    assert.equal(target.classList.toString(), "");
    assert.isFalse(target.hasAttribute("class"));
  });

  it("should check for classes", function() {
    target.classList.add("first", "second", "third");
    assert.isTrue(target.classList.contains("first"));
    assert.isTrue(target.classList.contains("second"));
    assert.isTrue(target.classList.contains("third"));
    target.classList.remove("second");
    assert.isTrue(target.classList.contains("first"));
    assert.isFalse(target.classList.contains("second"));
    assert.isTrue(target.classList.contains("third"));
  });

  it("should get classes by index", function() {
    target.classList.add("first", "second", "third");
    assert.equal(target.classList[0], "first");
    assert.equal(target.classList[1], "second");
    assert.equal(target.classList[2], "third");
    assert.equal(target.classList.item(0), "first");
    assert.equal(target.classList.item(1), "second");
    assert.equal(target.classList.item(2), "third");
  });

  it("should toggle classes", function() {
    target.classList.add("first", "second");
    assert.isFalse(target.classList.toggle("first"));
    assert.equal(target.classList.toString(), "second");
    assert.isTrue(target.classList.toggle("first"));
    assert.equal(target.classList.toString(), "second first");
    assert.isTrue(target.classList.toggle("second", true));
    assert.equal(target.classList.toString(), "second first");
    assert.isTrue(target.classList.toggle("second", true));
    assert.isFalse(target.classList.toggle("second", false));
    assert.isFalse(target.classList.toggle("second", false));
    assert.equal(target.classList.toString(), "first");
  });

  it("should dynamically update style", function() {
    assert.equal(getComputedStyle(target).fontSize, "5px");
    target.classList.add("font-10");
    target.classList.add("font-12");
    assert.equal(getComputedStyle(target).fontSize, "12px");
    target.classList.add("font-24");
    assert.equal(getComputedStyle(target).fontSize, "24px");
    target.classList.remove("font-12");
    assert.equal(getComputedStyle(target).fontSize, "24px");
    target.classList.remove("font-24");
    assert.equal(getComputedStyle(target).fontSize, "10px");
    target.classList.remove("font-10");
    assert.equal(getComputedStyle(target).fontSize, "5px");
  });
});
</script>
</sky>