| 1 | var undef
|
| 2 | , test = require("tape")
|
| 3 | , DOM = require("./dom-lite.js")
|
| 4 | , document = DOM.document
|
| 5 |
|
| 6 |
|
| 7 | function append_el(id, parent, tag) {
|
| 8 | var el = document.createElement(tag || "div")
|
| 9 | el.id = id
|
| 10 | parent.appendChild(el)
|
| 11 | return el
|
| 12 | }
|
| 13 |
|
| 14 |
|
| 15 | test("getElementById, getElementsByTagName, getElementsByClassName, querySelector", function (assert) {
|
| 16 | document = new DOM.Document()
|
| 17 |
|
| 18 | var result
|
| 19 | , el1 = append_el(1, document.body)
|
| 20 | , el2 = append_el(2, document.body)
|
| 21 | , el11 = append_el(11, el1)
|
| 22 | , el12 = append_el(12, el1)
|
| 23 | , el21 = append_el(21, el2)
|
| 24 | , el22 = append_el(22, el2)
|
| 25 | , el221 = append_el(221, el22, "span")
|
| 26 | , el222 = append_el(222, el22)
|
| 27 | , el3 = append_el(3, document.body)
|
| 28 |
|
| 29 | el21.className = "findme first"
|
| 30 | el222.setAttribute("type", "text/css")
|
| 31 | el221.className = "findme"
|
| 32 |
|
| 33 | assert.equal(document.body.appendChild(el3), el3)
|
| 34 |
|
| 35 | assert.equal(document.getElementById(1), el1)
|
| 36 | assert.equal(document.getElementById("2"), el2)
|
| 37 | assert.equal(document.getElementById(3), el3)
|
| 38 | assert.equal(document.getElementById(11), el11)
|
| 39 | assert.equal(document.getElementById(12), el12)
|
| 40 | assert.equal(document.getElementById(21), el21)
|
| 41 | assert.equal(document.getElementById(22), el22)
|
| 42 | assert.equal(document.getElementById(221), el221)
|
| 43 | assert.equal(document.getElementById(222), el222)
|
| 44 |
|
| 45 | assert.equal(document.getElementsByTagName("div").length, 8)
|
| 46 |
|
| 47 | result = document.getElementsByTagName("span")
|
| 48 | assert.equal(result.length, 1)
|
| 49 | assert.equal(result[0], el221)
|
| 50 |
|
| 51 | assert.deepEqual(document.getElementsByClassName("findme")
|
| 52 | , [el21, el221])
|
| 53 |
|
| 54 | assert.equal(document.querySelector("html"), document.documentElement)
|
| 55 | assert.equal(document.querySelector("body"), document.body)
|
| 56 |
|
| 57 | assert.equal(document.querySelector("span"), el221)
|
| 58 | assert.equal(document.querySelector("#22"), el22)
|
| 59 | assert.equal(document.querySelector("div#22"), el22)
|
| 60 | assert.equal(document.querySelector("span#22"), null)
|
| 61 |
|
| 62 | assert.equal(document.querySelector(".findme"), el21)
|
| 63 | assert.equal(document.querySelector(".not_found"), null)
|
| 64 | assert.equal(document.querySelector("div.findme"), el21)
|
| 65 | assert.equal(document.querySelector("div.not_found"), null)
|
| 66 | assert.equal(document.querySelector("span.first"), null)
|
| 67 | assert.equal(document.querySelector("span.not_found"), null)
|
| 68 | assert.equal(document.querySelector("#21.findme"), el21)
|
| 69 | assert.equal(document.querySelector("div#21.findme"), el21)
|
| 70 |
|
| 71 | assert.deepEqual(document.querySelectorAll("div")
|
| 72 | , [el1, el11, el12, el2, el21, el22, el222, el3])
|
| 73 |
|
| 74 | assert.deepEqual(document.querySelectorAll(".findme")
|
| 75 | , [el21, el221])
|
| 76 |
|
| 77 | assert.deepEqual(document.querySelectorAll("span.findme")
|
| 78 | , [el221])
|
| 79 |
|
| 80 | assert.deepEqual(document.querySelectorAll("html")
|
| 81 | , [document.documentElement])
|
| 82 |
|
| 83 | assert.deepEqual(document.querySelectorAll("body")
|
| 84 | , [document.body])
|
| 85 |
|
| 86 | assert.deepEqual(document.querySelectorAll("span.findme, div.findme")
|
| 87 | , [el21, el221])
|
| 88 |
|
| 89 | assert.deepEqual(document.querySelectorAll("body span.findme, div.findme")
|
| 90 | , [el21, el221])
|
| 91 |
|
| 92 | assert.deepEqual(el1.querySelectorAll("div")
|
| 93 | , [el11, el12])
|
| 94 |
|
| 95 | assert.end()
|
| 96 | })
|
| 97 |
|
| 98 |
|
| 99 | test("Element.matches and Element.closest", function (assert) {
|
| 100 | document = new DOM.Document()
|
| 101 |
|
| 102 | var el1 = append_el(1, document.body, "div")
|
| 103 | , s1 = append_el("s1", document.body, "span")
|
| 104 | , s2 = append_el(2, document.body, "span")
|
| 105 | , a1 = append_el(3, s2, "a")
|
| 106 | , in1 = append_el("in1", el1, "input")
|
| 107 | , in2 = append_el("in2", el1, "input")
|
| 108 |
|
| 109 | s2.lang = "en"
|
| 110 | s2.name = "map[]"
|
| 111 | s2.setAttribute("data-space", "a b")
|
| 112 | s2.setAttribute("data-plus", "a+b")
|
| 113 | s2.setAttribute("data-comma", "a,b")
|
| 114 | s2.setAttribute("data-x1", "a,b]")
|
| 115 | s2.setAttribute("data-x2", "a,b[")
|
| 116 | s2.setAttribute("data-x3", "a,b(")
|
| 117 | s2.setAttribute("data-x4", "a,b)")
|
| 118 |
|
| 119 | a1.href = "#A link 1"
|
| 120 | a1.lang = "en-US"
|
| 121 | a1.foo = "en'US"
|
| 122 |
|
| 123 | in1.disabled = true
|
| 124 | in2.required = true
|
| 125 |
|
| 126 | assert.equal(el1.matches("div"), true)
|
| 127 | assert.equal(el1.matches("div, span"), true)
|
| 128 | assert.equal(el1.matches("span"), false)
|
| 129 | assert.equal(el1.matches("#1"), true)
|
| 130 | assert.equal(el1.matches("#2"), false)
|
| 131 | assert.equal(el1.matches("div#1"), true)
|
| 132 | assert.equal(el1.matches("div#2"), false)
|
| 133 |
|
| 134 | assert.equal(el1.matches("body > div#1"), true)
|
| 135 | assert.equal(el1.matches("body > *"), true)
|
| 136 | assert.equal(el1.matches("*"), true)
|
| 137 | assert.equal(el1.matches("body > div#2"), false)
|
| 138 | assert.equal(el1.matches("html > div#1"), false)
|
| 139 | assert.equal(el1.matches("html > div#2"), false)
|
| 140 |
|
| 141 | assert.equal(el1.matches("div + div"), false)
|
| 142 | assert.equal(s1.matches("div + span"), true)
|
| 143 | assert.equal(s2.matches("div + span"), false)
|
| 144 | assert.equal(s2.matches("div + div"), false)
|
| 145 |
|
| 146 | assert.equal(el1.matches("div ~ div"), false)
|
| 147 | assert.equal(s1.matches("div ~ span"), true)
|
| 148 | assert.equal(s2.matches("div ~ span"), true)
|
| 149 | assert.equal(s2.matches("div ~ div"), false)
|
| 150 |
|
| 151 | assert.equal(el1.matches("body div#1"), true)
|
| 152 | assert.equal(el1.matches("html div#1"), true)
|
| 153 |
|
| 154 | assert.equal(s2.matches(":empty"), false)
|
| 155 | assert.equal(s2.matches(":link"), false)
|
| 156 | assert.equal(a1.matches("a:empty"), true)
|
| 157 | assert.equal(a1.matches("i:empty"), false)
|
| 158 | assert.equal(a1.matches(":link"), true)
|
| 159 |
|
| 160 | assert.equal(in1.matches(":enabled"), false)
|
| 161 | assert.equal(in2.matches(":enabled"), true)
|
| 162 | assert.equal(in1.matches(":optional"), true)
|
| 163 | assert.equal(in2.matches(":optional"), false)
|
| 164 |
|
| 165 | assert.equal(el1.matches('[id=1]'), true)
|
| 166 | assert.equal(el1.matches('body [id=1]'), true)
|
| 167 | assert.equal(el1.matches('[id=true]'), false)
|
| 168 |
|
| 169 | assert.equal(s2.matches('[id=2]'), true)
|
| 170 | assert.equal(s2.matches('[id=2][lang=en]'), true)
|
| 171 | assert.equal(s2.matches('[id=2][lang="en"]'), true)
|
| 172 | assert.equal(s2.matches('[id="2"][lang=en]'), true)
|
| 173 | assert.equal(s2.matches('[id="2"][lang="en"]'), true)
|
| 174 | assert.equal(s2.matches('[name="map[]"]'), true)
|
| 175 | assert.equal(s2.matches('body [name="map[]"]'), true)
|
| 176 |
|
| 177 | assert.equal(s2.matches('[data-space]'), true)
|
| 178 | assert.equal(s2.matches('[data-space][data-plus]'), true)
|
| 179 | assert.equal(s2.matches('[data-plu]'), false)
|
| 180 | assert.equal(s2.matches('[data-space="a b"]'), true)
|
| 181 | assert.equal(s2.matches('[data-plus="a b"]'), false)
|
| 182 | assert.equal(s2.matches('[data-plus="a+b"]'), true)
|
| 183 | assert.equal(s2.matches('[data-comma="a,b"]'), true)
|
| 184 | assert.equal(s2.matches('div, [data-comma="a,b"]'), true)
|
| 185 | assert.equal(s2.matches('div[data-comma="a,b"]'), false)
|
| 186 | assert.equal(s2.matches('span[data-comma="a,b"]'), true)
|
| 187 | assert.equal(s2.matches('[data-x1="a,b]"]'), true)
|
| 188 | assert.equal(s2.matches('[data-x1="a,b["]'), false)
|
| 189 | assert.equal(s2.matches('[data-x2="a,b["]'), true)
|
| 190 | assert.equal(s2.matches('[data-x2="a,b]"]'), false)
|
| 191 | assert.equal(s2.matches('[data-x3="a,b("]'), true)
|
| 192 | assert.equal(s2.matches('[data-x3="a,b)"]'), false)
|
| 193 | assert.equal(s2.matches('[data-x4="a,b)"]'), true)
|
| 194 | assert.equal(s2.matches('[data-x4="a,b("]'), false)
|
| 195 |
|
| 196 | assert.equal(s2.matches('div, [data-x1="a,b]"]'), true)
|
| 197 | assert.equal(s2.matches('div, [data-x1="a,b["]'), false)
|
| 198 | assert.equal(s2.matches('div, [data-x2="a,b["]'), true)
|
| 199 | assert.equal(s2.matches('div, [data-x2="a,b]"]'), false)
|
| 200 | assert.equal(s2.matches('div, [data-x3="a,b("]'), true)
|
| 201 | assert.equal(s2.matches('div, [data-x3="a,b)"]'), false)
|
| 202 | assert.equal(s2.matches('div, [data-x4="a,b)"]'), true)
|
| 203 | assert.equal(s2.matches('div, [data-x4="a,b("]'), false)
|
| 204 |
|
| 205 | assert.equal(s2.matches('body > [data-space]'), true)
|
| 206 | assert.equal(s2.matches('body > [data-space][data-plus]'), true)
|
| 207 | assert.equal(s2.matches('body > [data-plu]'), false)
|
| 208 | assert.equal(s2.matches('body > [data-space="a b"]'), true)
|
| 209 | assert.equal(s2.matches('body > [data-plus="a b"]'), false)
|
| 210 | assert.equal(s2.matches('body > [data-plus="a+b"]'), true)
|
| 211 |
|
| 212 | assert.equal(a1.matches('[data-space] a'), true)
|
| 213 | assert.equal(a1.matches('[data-space][data-plus] a'), true)
|
| 214 | assert.equal(a1.matches('[data-plu] a'), false)
|
| 215 | assert.equal(a1.matches('[data-space="a b"] a'), true)
|
| 216 | assert.equal(a1.matches('[data-plus="a b"] a'), false)
|
| 217 | assert.equal(a1.matches('[data-plus="a+b"] a'), true)
|
| 218 |
|
| 219 | assert.equal(a1.matches('[href="#A link 1"]'), true)
|
| 220 | assert.equal(a1.matches("a[href='#A link 1']"), true)
|
| 221 | assert.equal(a1.matches('[href="#A"]'), false)
|
| 222 | assert.equal(a1.matches('[href^="#A"]'), true)
|
| 223 | assert.equal(a1.matches('[href^="A"]'), false)
|
| 224 | assert.equal(a1.matches('[href^="#Aa"]'), false)
|
| 225 | assert.equal(a1.matches('[foo^="en"]'), true)
|
| 226 | assert.equal(a1.matches('[foo^="en\'"]'), true)
|
| 227 | assert.equal(a1.matches('[href$=" 1"]'), true)
|
| 228 | assert.equal(a1.matches('[href$=" 1"]'), false)
|
| 229 | assert.equal(a1.matches('[href*="#A"]'), true)
|
| 230 | assert.equal(a1.matches('[href*="#Aa"]'), false)
|
| 231 | assert.equal(a1.matches('[href*="link"]'), true)
|
| 232 | assert.equal(a1.matches('[href*=" 1"]'), true)
|
| 233 | assert.equal(a1.matches('[href*=" 1"]'), false)
|
| 234 | assert.equal(a1.matches('[href~="link"]'), true)
|
| 235 | assert.equal(a1.matches('[href~="#A"]'), true)
|
| 236 | assert.equal(a1.matches('[href~="A"]'), false)
|
| 237 | assert.equal(s2.matches('[lang|="en"]'), true)
|
| 238 | assert.equal(a1.matches('[lang|="en"]'), true)
|
| 239 | assert.equal(a1.matches('[lang|="e"]'), false)
|
| 240 | assert.equal(a1.matches('[lang|="en-"]'), false)
|
| 241 |
|
| 242 | assert.equal(el1.matches("div:first-child"), true)
|
| 243 | assert.equal(el1.matches("div:not(:first-child)"), false)
|
| 244 |
|
| 245 | assert.equal(el1.matches("div:first-of-type"), true)
|
| 246 | assert.equal(in1.matches(":first-of-type"), true)
|
| 247 | assert.equal(in2.matches(":first-of-type"), false)
|
| 248 | assert.equal(el1.matches("div:not(:first-of-type)"), false)
|
| 249 |
|
| 250 | assert.equal(el1.matches("div:last-of-type"), true)
|
| 251 | assert.equal(in1.matches(":last-of-type"), false)
|
| 252 | assert.equal(in2.matches(":last-of-type"), true)
|
| 253 | assert.equal(el1.matches("div:not(:last-of-type)"), false)
|
| 254 |
|
| 255 | assert.equal(el1.matches("div:only-of-type"), true)
|
| 256 | assert.equal(s1.matches(":only-of-type"), false)
|
| 257 | assert.equal(s2.matches(":only-of-type"), false)
|
| 258 | assert.equal(in1.matches(":only-of-type"), false)
|
| 259 | assert.equal(in2.matches(":only-of-type"), false)
|
| 260 | assert.equal(el1.matches("div:not(:only-of-type)"), false)
|
| 261 |
|
| 262 | assert.equal(el1.matches("div:any(:first-child, :last-child)"), true)
|
| 263 | assert.equal(el1.matches("div:last-child"), false)
|
| 264 | assert.equal(el1.matches("div:not(:last-child)"), true)
|
| 265 | assert.equal(el1.matches("div:any(:first-child, :last-child)"), true)
|
| 266 | assert.equal(el1.matches("div:any(span, a)"), false)
|
| 267 | assert.equal(s2.matches("span:first-child"), false)
|
| 268 | assert.equal(s2.matches("span:last-child"), true)
|
| 269 | assert.equal(s2.matches(":only-child"), false)
|
| 270 | assert.equal(a1.matches(":only-child"), true)
|
| 271 | assert.equal(a1.matches(":root"), false)
|
| 272 | assert.equal(document.body.matches(":root"), false)
|
| 273 | assert.equal(document.documentElement.matches(":root"), true)
|
| 274 |
|
| 275 | assert.equal(el1.closest("div"), el1)
|
| 276 | assert.equal(el1.closest("body"), document.body)
|
| 277 | assert.equal(el1.closest("span"), null)
|
| 278 |
|
| 279 | assert.end()
|
| 280 | })
|
| 281 |
|
| 282 | test(":nth-child selector", function (assert) {
|
| 283 | document = new DOM.Document()
|
| 284 | var el = document.body
|
| 285 | , p1 = append_el("p1", el, "p")
|
| 286 | , p2 = append_el("p2", el, "p")
|
| 287 | , p3 = append_el("p3", el, "p")
|
| 288 | , p4 = append_el("p4", el, "p")
|
| 289 | , p5 = append_el("p5", el, "p")
|
| 290 | , p6 = append_el("p6", el, "p")
|
| 291 | , p7 = append_el("p7", el, "p")
|
| 292 | , p8 = append_el("p8", el, "p")
|
| 293 | , p9 = append_el("p9", el, "p")
|
| 294 |
|
| 295 | assert.deepEqual(el.querySelectorAll(":nth-child(2n)")
|
| 296 | , [p2, p4, p6, p8])
|
| 297 |
|
| 298 | assert.deepEqual(el.querySelectorAll(":nth-child(even)")
|
| 299 | , [p2, p4, p6, p8])
|
| 300 |
|
| 301 | assert.deepEqual(el.querySelectorAll(":nth-child(2n+1)")
|
| 302 | , [p1, p3, p5, p7, p9])
|
| 303 |
|
| 304 | assert.deepEqual(el.querySelectorAll(":nth-child(odd)")
|
| 305 | , [p1, p3, p5, p7, p9])
|
| 306 |
|
| 307 | assert.deepEqual(el.querySelectorAll(":nth-child(3n+3)")
|
| 308 | , [p3, p6, p9])
|
| 309 |
|
| 310 | assert.deepEqual(el.querySelectorAll(":nth-child(4n+1)")
|
| 311 | , [p1, p5, p9])
|
| 312 |
|
| 313 | assert.deepEqual(el.querySelectorAll(":nth-child(4n+4)")
|
| 314 | , [p4, p8])
|
| 315 |
|
| 316 | assert.deepEqual(el.querySelectorAll(":nth-child(4n)")
|
| 317 | , [p4, p8])
|
| 318 |
|
| 319 | assert.deepEqual(el.querySelectorAll(":nth-child(0n+1)")
|
| 320 | , [p1])
|
| 321 |
|
| 322 | assert.deepEqual(el.querySelectorAll(":nth-child(1)")
|
| 323 | , [p1])
|
| 324 |
|
| 325 | assert.deepEqual(el.querySelectorAll(":nth-child(3)")
|
| 326 | , [p3])
|
| 327 |
|
| 328 | assert.deepEqual(el.querySelectorAll(":nth-child(5n-2)")
|
| 329 | , [p3, p8])
|
| 330 |
|
| 331 | assert.deepEqual(el.querySelectorAll(":nth-child(-n+3)")
|
| 332 | , [p1, p2, p3])
|
| 333 |
|
| 334 | assert.deepEqual(el.querySelectorAll(":nth-child(-2n+3)")
|
| 335 | , [p1, p3])
|
| 336 |
|
| 337 | assert.deepEqual(el.querySelectorAll(":nth-child(-2n+4)")
|
| 338 | , [p2, p4])
|
| 339 |
|
| 340 | assert.end()
|
| 341 | })
|
| 342 |
|
| 343 | test(":nth-last-child selector", function (assert) {
|
| 344 | document = new DOM.Document()
|
| 345 | var el = document.body
|
| 346 | , p1 = append_el("p1", el, "p")
|
| 347 | , p2 = append_el("p2", el, "p")
|
| 348 | , p3 = append_el("p3", el, "p")
|
| 349 | , p4 = append_el("p4", el, "p")
|
| 350 | , p5 = append_el("p5", el, "p")
|
| 351 | , p6 = append_el("p6", el, "p")
|
| 352 | , p7 = append_el("p7", el, "p")
|
| 353 | , p8 = append_el("p8", el, "p")
|
| 354 | , p9 = append_el("p9", el, "p")
|
| 355 |
|
| 356 | assert.deepEqual(el.querySelectorAll(":nth-last-child(2n)")
|
| 357 | , [p2, p4, p6, p8])
|
| 358 |
|
| 359 | assert.deepEqual(el.querySelectorAll(":nth-last-child(even)")
|
| 360 | , [p2, p4, p6, p8])
|
| 361 |
|
| 362 | assert.deepEqual(el.querySelectorAll(":nth-last-child(2n+1)")
|
| 363 | , [p1, p3, p5, p7, p9])
|
| 364 |
|
| 365 | assert.deepEqual(el.querySelectorAll(":nth-last-child(odd)")
|
| 366 | , [p1, p3, p5, p7, p9])
|
| 367 |
|
| 368 | assert.deepEqual(el.querySelectorAll(":nth-last-child(3n+3)")
|
| 369 | , [p1, p4, p7])
|
| 370 |
|
| 371 | assert.deepEqual(el.querySelectorAll(":nth-last-child(4n+1)")
|
| 372 | , [p1, p5, p9])
|
| 373 |
|
| 374 | assert.deepEqual(el.querySelectorAll(":nth-last-child(4n+4)")
|
| 375 | , [p2, p6])
|
| 376 |
|
| 377 | assert.deepEqual(el.querySelectorAll(":nth-last-child(4n)")
|
| 378 | , [p2, p6])
|
| 379 |
|
| 380 | assert.deepEqual(el.querySelectorAll(":nth-last-child(0n+1)")
|
| 381 | , [p9])
|
| 382 |
|
| 383 | assert.deepEqual(el.querySelectorAll(":nth-last-child(0n+3)")
|
| 384 | , [p7])
|
| 385 |
|
| 386 | assert.deepEqual(el.querySelectorAll(":nth-last-child(1)")
|
| 387 | , [p9])
|
| 388 |
|
| 389 | assert.deepEqual(el.querySelectorAll(":nth-last-child(3)")
|
| 390 | , [p7])
|
| 391 |
|
| 392 | assert.deepEqual(el.querySelectorAll(":nth-last-child(5n-2)")
|
| 393 | , [p2, p7])
|
| 394 |
|
| 395 | assert.deepEqual(el.querySelectorAll(":nth-last-child(-n+3)")
|
| 396 | , [p7, p8, p9])
|
| 397 |
|
| 398 | assert.deepEqual(el.querySelectorAll(":nth-last-child(-2n+3)")
|
| 399 | , [p7, p9])
|
| 400 |
|
| 401 | assert.deepEqual(el.querySelectorAll(":nth-last-child(-2n+4)")
|
| 402 | , [p6, p8])
|
| 403 |
|
| 404 | assert.end()
|
| 405 | })
|
| 406 |
|
| 407 | test(":lang() selector", function (assert) {
|
| 408 | document = new DOM.Document()
|
| 409 | var el = document.body
|
| 410 | , p1 = append_el("p1", el, "p")
|
| 411 | , p2 = append_el("p2", el, "p")
|
| 412 | , p3 = append_el("p3", p1, "p")
|
| 413 | , p4 = append_el("p4", p2, "p")
|
| 414 |
|
| 415 | el.lang = "en"
|
| 416 | p2.lang = "fr-be"
|
| 417 |
|
| 418 | assert.deepEqual(el.querySelectorAll(":lang(en)")
|
| 419 | , [p1, p3])
|
| 420 |
|
| 421 | assert.deepEqual(el.querySelectorAll(":lang(fr)")
|
| 422 | , [p2, p4])
|
| 423 |
|
| 424 | assert.end()
|
| 425 | })
|
| 426 |
|