| <html> |
| <link rel="import" href="../resources/mocha.html" /> |
| <link rel="import" href="../resources/chai.html" /> |
| <div id="tests"> |
| <div id="id1"> |
| <div class="class2"></div> |
| </div> |
| <tag-name-3 class="class7" id="tag1"></tag-name-3> |
| <tag-name-3 class="class7" id="tag2"></tag-name-3> |
| <span class="class2"> |
| <span class="class5" id="id5"></span> |
| </span> |
| <div id="id5"></div> |
| <tag-name-6 class="class6" id="id6"> |
| <tag-name-3 class="class7" id="tag2"></tag-name-3> |
| </tag-name-6> |
| </div> |
| <script> |
| function query(selector) { return document.querySelector(selector); } |
| function queryAll(selector) { return document.querySelectorAll(selector); } |
| |
| describe("querySelector", function() { |
| it("should find elements by class name", function() { |
| assert.ok(query(".class2")); |
| assert.equal(query(".class2").classList.toString(), "class2"); |
| assert.equal(queryAll(".class2").length, 2); |
| assert.equal(queryAll(".class2")[0].classList.toString(), "class2"); |
| assert.equal(queryAll(".class2")[1].classList.toString(), "class2"); |
| assert.notEqual(queryAll(".class2")[0], queryAll(".class2")[1]); |
| }); |
| it("should find elements by id", function() { |
| assert.ok(query("#id5")); |
| assert.equal(query("#id5").id, "id5"); |
| assert.equal(query("#id5").classList.toString(), "class5"); |
| // FIXME(sky): Do we still want to allow multiple id stuff like this? |
| assert.equal(queryAll("#id5").length, 2); |
| assert.equal(queryAll("#id5")[0], query("#id5")); |
| assert.notEqual(queryAll("#id5")[1], query("#id5")); |
| assert.equal(queryAll("#id5")[1].id, "id5"); |
| }); |
| it("should find elements by tag name", function() { |
| assert.ok(query("tag-name-6")); |
| assert.equal(query("tag-name-6").tagName, "tag-name-6"); |
| assert.equal(query("tag-name-6").classList.toString(), "class6"); |
| var context = query("#tests"); |
| assert.equal(context.querySelectorAll("span").length, 2); |
| }); |
| it("should find an element by compound selector", function() { |
| assert.ok(query("tag-name-6.class6#id6")); |
| assert.equal(query("tag-name-6.class6#id6").id, "id6"); |
| assert.equal(query("tag-name-6.class6#id6").classList.toString(), "class6"); |
| assert.equal(query("tag-name-6.class6#id6").tagName, "tag-name-6"); |
| }); |
| it("should find all elements by compound selector", function() { |
| assert.ok(queryAll("tag-name-3.class7")); |
| assert.equal(queryAll("tag-name-3.class7").length, 3); |
| assert.equal(queryAll("tag-name-3.class7")[0].id, "tag1"); |
| assert.equal(queryAll("tag-name-3.class7")[1].id, "tag2"); |
| }); |
| }); |
| </script> |
| </html> |
