| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| :lang(de-DE, DE-de) { |
| color: rgb(1, 2, 3); |
| } |
| :lang(ab, cd, ef) { |
| color: rgb(3, 2, 1); |
| } |
| </style> |
| </head> |
| <body> |
| <div lang="de-DE" class="de"></div> |
| <div lang="de-de" class="de"></div> |
| <div lang="de-De" class="de"></div> |
| <div lang="de-dE" class="de"></div> |
| <div lang="de-DE-1996" class="de"></div> |
| <div lang="de-Latn-DE" class="de"></div> |
| <div lang="de-Latf-DE" class="de"></div> |
| <div lang="de-Latn-DE-1996" class="de"></div> |
| |
| <div lang="Latn-de"></div> |
| <div lang="Latf-de"></div> |
| |
| <div lang="en"></div> |
| <div lang="en-"></div> |
| <div lang="en--"></div> |
| |
| <div lang="foo--bar"></div> |
| <div lang="id---Java"></div> |
| |
| <div lang="tic-tac-tac-toe"></div> |
| |
| <div lang="fr-x"></div> |
| <div lang="fr-xenomorph"></div> |
| <div lang="fr-x-xenomorph"></div> |
| |
| <div lang="cocoa-1-bar"></div> |
| <div lang="cocoa-a-bar"></div> |
| |
| <div lang="ab"></div> |
| <div lang="cd"></div> |
| <div lang="ef"></div> |
| |
| <script> |
| description('Verify selector specifying multiple :lang() pseudo class using comma-separated list arguments.'); |
| |
| shouldBe('document.querySelectorAll(":lang(en, en)").length', '3'); |
| shouldBe('document.querySelectorAll(":lang(en-, en-)").length', '2'); |
| shouldBe('document.querySelectorAll(":lang(en--, en--)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(en---, en---)").length', '0'); |
| |
| debug(''); |
| |
| shouldBe('document.querySelectorAll(":lang(de-DE, DE-de)").length', '8'); |
| shouldBe('document.querySelectorAll(":lang(Latn, de-Latn)").length', '3'); |
| shouldBe('document.querySelectorAll(":lang(Latf, de-Latf)").length', '2'); |
| |
| shouldBe('document.querySelectorAll(":lang(de-DE--, de-DE--)").length', '0'); |
| |
| debug(''); |
| |
| for (var i = 0; i < document.querySelectorAll(":lang(de-DE, DE-de)").length; i++) { |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll(":lang(de-DE, DE-de)")[' + i + ']).color', 'rgb(1, 2, 3)'); |
| } |
| |
| debug(''); |
| |
| shouldBeEqualToString('getComputedStyle(document.querySelector(":lang(Latn, Latn-de)")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.querySelector(":lang(Latf, Latf-de)")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.querySelector(":lang(Latf, Latn)")).color', 'rgb(0, 0, 0)'); |
| shouldBeEqualToString('getComputedStyle(document.querySelector(":lang(Latf, Latn)")).color', 'rgb(0, 0, 0)'); |
| |
| shouldBe('document.querySelectorAll(":lang(ab)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(cd)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(ef)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(ab, cd)").length', '2'); |
| shouldBe('document.querySelectorAll(":lang(ab, cd, ef)").length', '3'); |
| |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll(":lang(ab, cd)")[1]).color', 'rgb(3, 2, 1)'); |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll(":lang(ab, cd, ef)")[2]).color', 'rgb(3, 2, 1)'); |
| |
| debug(''); |
| |
| shouldBe('document.querySelectorAll(":lang(-en, -en)").length', '0'); |
| shouldBe('document.querySelectorAll(":lang(-en-, -en-)").length', '0'); |
| shouldBe('document.querySelectorAll(":lang(-en, -en-)").length', '0'); |
| shouldBe('document.querySelectorAll(":lang(-en-, -en--)").length', '0'); |
| |
| debug(''); |
| |
| shouldBe('document.querySelectorAll(":lang(fr-x, fr-x)").length', '0'); |
| shouldBe('document.querySelectorAll(":lang(fr-xenomorph, fr-xenomorph)").length', '1'); |
| |
| debug(''); |
| |
| shouldBe('document.querySelectorAll(":lang(cocoa-1, cocoa-1)").length', '0'); |
| shouldBe('document.querySelectorAll(":lang(cocoa-a, cocoa-a)").length', '0'); |
| shouldBe('document.querySelectorAll(":lang(cocoa-bar, cocoa-bar)").length', '0'); |
| |
| debug(''); |
| |
| shouldBe('document.querySelectorAll(":lang(foo, foo)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(foo-bar, foo-bar)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(foo--bar, foo--bar)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(foo-, foo-)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(foo--, foo--)").length', '0'); |
| |
| shouldBe('document.querySelectorAll(":lang(id, id)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(id-, id-)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(id--, id--)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(id---Java, id---Java)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(id--Java, id--Java)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(id-Java, id-Java)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(id---, id---)").length', '0'); |
| |
| debug(''); |
| |
| shouldBe('document.querySelectorAll(":lang(tic-tac-toe, tic-tac)").length', '1'); |
| shouldBe('document.querySelectorAll(":lang(tic-toe-tac, tic-toe-tac-tac)").length', '0'); |
| |
| debug('') |
| |
| shouldThrow('document.querySelectorAll(":lang(--en--, --en--)").length'); |
| shouldThrow('document.querySelectorAll(":lang(---en---, ---en---)").length'); |
| shouldThrow('document.querySelectorAll(":lang(en us- de- fr-, en us- de- fr-).length")'); |
| |
| </script> |
| |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
