| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| <body> |
| <script> |
| var container, child, otherFrame; |
| var testNumber = 0; |
| |
| description("This tests invalidation of :lang selectors when the document element's lang attribute changes and a descendant element is using the 'explicit language matching document element language' optimization"); |
| |
| function matchedLang(element) { |
| for (let lang of ["en", "de", "zh"]) { |
| if (element.matches(`:lang(${lang})`)) |
| return lang; |
| } |
| return ""; |
| } |
| |
| function shouldMatchLang(elementName, lang) { |
| shouldBe(`matchedLang(${elementName})`, `"${lang}"`); |
| } |
| |
| function test(f) { |
| document.documentElement.lang = "en"; |
| f(); |
| container = null; |
| child = null; |
| debug("----"); |
| } |
| |
| function testWithOtherDocument(f) { |
| test(function() { |
| otherFrame = document.createElement("iframe"); |
| otherFrame.srcdoc = "<!DOCTYPE html><html lang=en><body>"; |
| document.body.append(otherFrame); |
| f(); |
| otherFrame.remove(); |
| otherFrame = null; |
| }); |
| } |
| |
| function makeContainer() { |
| container = document.createElement("div"); |
| return container; |
| } |
| |
| function makeChild() { |
| child = document.createElement("div"); |
| return child; |
| } |
| |
| function makeContainerWithChild() { |
| container = document.createElement("div"); |
| child = document.createElement("div"); |
| container.append(child); |
| return container; |
| } |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| shouldMatchLang("container", "en"); |
| shouldMatchLang("child", "en"); |
| container.remove(); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| document.documentElement.lang = "de"; |
| shouldMatchLang("container", "de"); |
| shouldMatchLang("child", "de"); |
| container.remove(); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "en"; |
| shouldMatchLang("container", "en"); |
| shouldMatchLang("child", "en"); |
| container.remove(); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "en"; |
| document.documentElement.lang = "de"; |
| shouldMatchLang("container", "en"); |
| shouldMatchLang("child", "en"); |
| container.remove(); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "en"; |
| document.documentElement.lang = "de"; |
| container.lang = "de"; |
| shouldMatchLang("container", "de"); |
| shouldMatchLang("child", "de"); |
| container.remove(); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "en"; |
| document.documentElement.lang = "de"; |
| container.lang = "de"; |
| document.documentElement.lang = "zh"; |
| shouldMatchLang("container", "de"); |
| shouldMatchLang("child", "de"); |
| container.remove(); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "en"; |
| document.documentElement.lang = "de"; |
| container.removeAttribute("lang"); |
| shouldMatchLang("container", "de"); |
| shouldMatchLang("child", "de"); |
| container.remove(); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "en"; |
| container.remove(); |
| shouldMatchLang("container", "en"); |
| shouldMatchLang("child", "en"); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "de"; |
| container.remove(); |
| shouldMatchLang("container", "de"); |
| shouldMatchLang("child", "de"); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainer()); |
| container.lang = "en"; |
| container.append(makeChild()); |
| shouldMatchLang("child", "en"); |
| container.remove(); |
| }); |
| |
| test(function() { |
| document.body.append(makeContainer()); |
| container.lang = "de"; |
| makeChild(); |
| child.lang = "en"; |
| container.append(child); |
| shouldMatchLang("child", "en"); |
| container.remove(); |
| }); |
| |
| testWithOtherDocument(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "en"; |
| otherFrame.contentDocument.body.append(container); |
| shouldMatchLang("container", "en"); |
| shouldMatchLang("child", "en"); |
| }); |
| |
| testWithOtherDocument(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "de"; |
| otherFrame.contentDocument.body.append(container); |
| shouldMatchLang("container", "de"); |
| shouldMatchLang("child", "de"); |
| }); |
| |
| testWithOtherDocument(function() { |
| document.body.append(makeContainerWithChild()); |
| otherFrame.contentDocument.body.append(container); |
| otherFrame.contentDocument.documentElement.lang = "de"; |
| shouldMatchLang("container", "de"); |
| shouldMatchLang("child", "de"); |
| }); |
| |
| testWithOtherDocument(function() { |
| document.body.append(makeContainerWithChild()); |
| container.lang = "en"; |
| otherFrame.contentDocument.body.append(container); |
| otherFrame.contentDocument.documentElement.lang = "de"; |
| shouldMatchLang("container", "en"); |
| shouldMatchLang("child", "en"); |
| }); |
| |
| test(function() { |
| makeContainerWithChild(); |
| shouldMatchLang("container", ""); |
| shouldMatchLang("child", ""); |
| }); |
| |
| test(function() { |
| makeContainerWithChild(); |
| container.lang = "en"; |
| shouldMatchLang("container", "en"); |
| shouldMatchLang("child", "en"); |
| }); |
| |
| testWithOtherDocument(function() { |
| otherFrame.contentDocument.documentElement.lang = "de"; |
| makeContainerWithChild(); |
| container.lang = "en"; |
| otherFrame.contentDocument.adoptNode(container); |
| shouldMatchLang("container", "en"); |
| shouldMatchLang("child", "en"); |
| }); |
| |
| test(function() { |
| makeContainer(); |
| container.lang = "de"; |
| document.documentElement.append(container); |
| container.removeAttribute("lang"); |
| shouldMatchLang("container", "en"); |
| }); |
| |
| testWithOtherDocument(function() { |
| container = otherFrame.contentDocument.documentElement; |
| container.removeAttribute("lang"); |
| container.remove(); |
| shouldMatchLang("container", ""); |
| }); |
| |
| testWithOtherDocument(function() { |
| otherFrame.contentDocument.documentElement.lang = "de"; |
| makeContainerWithChild(); |
| otherFrame.contentDocument.body.append(container); |
| container.lang = "de"; |
| otherFrame.contentDocument.documentElement.remove(); |
| let newRoot = document.createElement("html"); |
| otherFrame.contentDocument.append(newRoot); |
| newRoot.lang = "zh"; |
| shouldMatchLang("container", "de"); |
| shouldMatchLang("child", "de"); |
| }); |
| |
| testWithOtherDocument(function() { |
| otherFrame.contentDocument.documentElement.lang = "de"; |
| otherFrame.contentDocument.documentElement.remove(); |
| makeContainerWithChild(); |
| container.lang = "zh"; |
| otherFrame.contentDocument.append(container); |
| shouldMatchLang("container", "zh"); |
| shouldMatchLang("child", "zh"); |
| }); |
| |
| testWithOtherDocument(function() { |
| container = otherFrame.contentDocument.documentElement; |
| container.lang = "de"; |
| container.remove(); |
| shouldMatchLang("container", "de"); |
| }); |
| </script> |
