| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| [style="display:none"] * { |
| color: rgb(0, 0, 0); |
| background-color: rgb(0, 0, 0); |
| } |
| :lang(fr):lang(fr-be):lang(fr) #target1 { |
| color: rgb(1, 2, 3); |
| } |
| :lang(fr):lang(fr-ca) #target2 { |
| color: rgb(4, 5, 6); |
| } |
| :lang(fr-ch):lang(fr) #target3 { |
| color: rgb(7, 8, 9); |
| } |
| |
| :lang(es):lang(es-ar):lang(es) #target4 { |
| color: rgb(10, 11, 12); |
| } |
| :lang(es):lang(es-co) #target5 { |
| color: rgb(13, 14, 15); |
| } |
| :lang(es-mx):lang(es) #target6 { |
| color: rgb(16, 17, 18); |
| } |
| |
| :lang(xml):lang(xml-lang1):lang(xml) #target7 { |
| color: rgb(19, 20, 21); |
| } |
| :lang(xml):lang(xml-lang2) #target8 { |
| color: rgb(22, 23, 24); |
| } |
| :lang(xml-lang3):lang(xml) #target9 { |
| color: rgb(25, 26, 27); |
| } |
| |
| /* None of those should match. */ |
| :lang(html):lang(html-lang):lang(html) * { |
| background-color: rgb(1, 1, 1); |
| } |
| :lang(html):lang(html-lang) * { |
| background-color: rgb(1, 1, 1); |
| } |
| :lang(html-lang):lang(html) * { |
| background-color: rgb(1, 1, 1); |
| } |
| </style> |
| </head> |
| <body> |
| <div style="display:none"> |
| <!-- HTML lang cases. --> |
| <a lang="FR-BE"> |
| <b> |
| <c id="target1"></c> |
| </b> |
| </a> |
| <a lang="FR-CA"> |
| <b> |
| <c id="target2"></c> |
| </b> |
| </a> |
| <a lang="FR-CH"> |
| <b> |
| <c id="target3"></c> |
| </b> |
| </a> |
| |
| <!-- XML lang cases. --> |
| <a xml:lang="es-ar"> |
| <b> |
| <c id="target4"></c> |
| </b> |
| </a> |
| <a xml:lang="es-co"> |
| <b> |
| <c id="target5"></c> |
| </b> |
| </a> |
| <a xml:lang="es-mx"> |
| <b> |
| <c id="target6"></c> |
| </b> |
| </a> |
| |
| <!-- XML + HTML lang cases. --> |
| <a xml:lang="xml-lang1" lang="html-lang"> |
| <b> |
| <c id="target7"></c> |
| </b> |
| </a> |
| <a xml:lang="xml-lang2" lang="html-lang"> |
| <b> |
| <c id="target8"></c> |
| </b> |
| </a> |
| <a xml:lang="xml-lang3" lang="html-lang"> |
| <b> |
| <c id="target9"></c> |
| </b> |
| </a> |
| </div> |
| </body> |
| <script> |
| description('Verify selector specifying multiple :lang() pseudo class.'); |
| |
| debug("HTML lang only") |
| shouldBe('document.querySelectorAll(":lang(fr):lang(fr-be):lang(fr) #target1").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(1, 2, 3)'); |
| shouldBe('document.querySelectorAll(":lang(fr):lang(fr-ca) #target2").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(4, 5, 6)'); |
| shouldBe('document.querySelectorAll(":lang(fr):lang(fr-ch) #target3").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(7, 8, 9)'); |
| |
| debug("XML lang only") |
| shouldBe('document.querySelectorAll(":lang(es):lang(es-ar):lang(es) #target4").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(10, 11, 12)'); |
| shouldBe('document.querySelectorAll(":lang(es):lang(es-co) #target5").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(13, 14, 15)'); |
| shouldBe('document.querySelectorAll(":lang(es):lang(es-mx) #target6").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(16, 17, 18)'); |
| |
| debug("XML and HTML lang") |
| shouldBe('document.querySelectorAll(":lang(xml):lang(xml-lang1):lang(xml) #target7").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target7")).color', 'rgb(19, 20, 21)'); |
| shouldBe('document.querySelectorAll(":lang(xml):lang(xml-lang2) #target8").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target8")).color', 'rgb(22, 23, 24)'); |
| shouldBe('document.querySelectorAll(":lang(xml):lang(xml-lang3) #target9").length', '1'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("target9")).color', 'rgb(25, 26, 27)'); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
