| <!DOCTYPE html> |
| <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> |
| import "../resources/third_party/unittest/unittest.dart"; |
| import "../resources/unit.dart"; |
| |
| import "dart:sky"; |
| |
| main() { |
| initUnit(); |
| |
| var sandbox = document.getElementById("sandbox"); |
| var target = null; |
| |
| setUp(() { |
| target = document.createElement("div"); |
| sandbox.appendChild(target); |
| }); |
| |
| tearDown(() { |
| target.remove(); |
| }); |
| |
| // test("should add multiple classes", () { |
| // target.classList..add("first", "second", "third"); |
| // expect(target.classList.toString(), equals("first second third")); |
| // }); |
| |
| test("should add classes in order", () { |
| target.classList..add("first") |
| ..add("second"); |
| expect(target.classList.toString(), equals("first second")); |
| }); |
| |
| test("should remove classes", () { |
| target.classList..add("first") |
| ..add("second") |
| ..add("third") |
| ..remove("second"); |
| expect(target.classList.toString(), equals("first third")); |
| }); |
| |
| // test("should remove multiple classes", () { |
| // target.classList.add("first", "second", "third"); |
| // target.classList.remove("first", "third"); |
| // expect(target.classList.toString(), equals("second")); |
| // }); |
| |
| test("should clear all classes", () { |
| target.classList.add("first"); |
| target.classList.add("second"); |
| target.classList.clear(); |
| expect(target.classList.toString(), equals("")); |
| expect(target.hasAttribute("class"), isFalse); |
| }); |
| |
| test("should check for classes", () { |
| target.classList..add("first") |
| ..add("second") |
| ..add("third"); |
| expect(target.classList.contains("first"), isTrue); |
| expect(target.classList.contains("second"), isTrue); |
| expect(target.classList.contains("third"), isTrue); |
| target.classList.remove("second"); |
| expect(target.classList.contains("first"), isTrue); |
| expect(target.classList.contains("second"), isFalse); |
| expect(target.classList.contains("third"), isTrue); |
| }); |
| |
| test("should get classes by index", () { |
| target.classList..add("first") |
| ..add("second") |
| ..add("third"); |
| // expect(target.classList[0], equals("first")); |
| // expect(target.classList[1], equals("second")); |
| // expect(target.classList[2], equals("third")); |
| expect(target.classList.item(0), equals("first")); |
| expect(target.classList.item(1), equals("second")); |
| expect(target.classList.item(2), equals("third")); |
| }); |
| |
| test("should toggle classes", () { |
| target.classList..add("first") |
| ..add("second"); |
| expect(target.classList.toggle("first"), isFalse); |
| expect(target.classList.toString(), equals("second")); |
| expect(target.classList.toggle("first"), isTrue); |
| expect(target.classList.toString(), equals("second first")); |
| // expect(target.classList.toggle("second", true), isTrue); |
| // expect(target.classList.toString(), equals("second first")); |
| // expect(target.classList.toggle("second", true), isTrue); |
| // expect(target.classList.toggle("second", false), isFalse); |
| // expect(target.classList.toggle("second", false), isFalse); |
| // expect(target.classList.toString(), equals("first")); |
| }); |
| |
| test("should dynamically update style", () { |
| expect(window.getComputedStyle(target)["font-size"], |
| equals("5px")); |
| target.classList.add("font-10"); |
| target.classList.add("font-12"); |
| expect(window.getComputedStyle(target)["font-size"], |
| equals("12px")); |
| target.classList.add("font-24"); |
| expect(window.getComputedStyle(target)["font-size"], |
| equals("24px")); |
| target.classList.remove("font-12"); |
| expect(window.getComputedStyle(target)["font-size"], |
| equals("24px")); |
| target.classList.remove("font-24"); |
| expect(window.getComputedStyle(target)["font-size"], |
| equals("10px")); |
| target.classList.remove("font-10"); |
| expect(window.getComputedStyle(target)["font-size"], |
| equals("5px")); |
| }); |
| } |
| </script> |
| </sky> |
