| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| svg { |
| display: block; |
| width: 100%; |
| height: 100px |
| } |
| |
| foreignObject { |
| color: green; |
| display: block |
| } |
| |
| foreignobject { |
| font-weight: bold |
| } |
| </style> |
| <foreignObject id="fo1">This text should be green and bold</foreignObject> |
| <FOREIGNObject id="fo2">This text should be green and bold</FOREIGNObject> |
| <svg> |
| <foreignObject y="10" id="fo3" width="400" height="50">This text should be green, not bold</foreignObject> |
| <FOREIGNobject y="30" id="fo4" width="400" height="50">This text should be green, not bold</FOREIGNobject> |
| </svg> |
| <script> |
| description("Testing case-sensitivity for the svg:foreignObject tag in html."); |
| |
| debug("Node.localName is normalized to camel-case inside <svg>, lower-case otherwise.\n"); |
| |
| shouldBeEqualToString("fo1.localName", "foreignobject"); |
| shouldBeEqualToString("fo2.localName", "foreignobject"); |
| shouldBeEqualToString("fo3.localName", "foreignObject"); |
| shouldBeEqualToString("fo4.localName", "foreignObject"); |
| |
| debug("\nSelectors API queries match case-insensitively for html and svg elements in html documents.\n(Should have matched case-sensitively for svg elements according to the html spec.)\n"); |
| |
| var queryAllLower = document.querySelectorAll("foreignOBJEct"); |
| shouldBe("queryAllLower.length", "4"); |
| shouldBeEqualToString("queryAllLower[0].id", "fo1"); |
| shouldBeEqualToString("queryAllLower[1].id", "fo2"); |
| shouldBeEqualToString("queryAllLower[2].id", "fo3"); |
| shouldBeEqualToString("queryAllLower[3].id", "fo4"); |
| |
| var queryAllCamel = document.querySelectorAll("foreignObject"); |
| shouldBe("queryAllCamel.length", "4"); |
| shouldBeEqualToString("queryAllCamel[0].id", "fo1"); |
| shouldBeEqualToString("queryAllCamel[1].id", "fo2"); |
| shouldBeEqualToString("queryAllCamel[2].id", "fo3"); |
| shouldBeEqualToString("queryAllCamel[3].id", "fo4"); |
| |
| debug("\ngetElementsByTagName matches case-insensitively for html elements, case-sensitively for svg elements in html documents.\n"); |
| |
| var byTagNameLower = document.getElementsByTagName("foreignOBJEct"); |
| shouldBe("byTagNameLower.length", "2"); |
| shouldBeEqualToString("byTagNameLower[0].id", "fo1"); |
| shouldBeEqualToString("byTagNameLower[1].id", "fo2"); |
| |
| var byTagNameCamel = document.getElementsByTagName("foreignObject"); |
| shouldBe("byTagNameCamel.length", "4"); |
| shouldBeEqualToString("byTagNameCamel[0].id", "fo1"); |
| shouldBeEqualToString("byTagNameCamel[1].id", "fo2"); |
| shouldBeEqualToString("byTagNameCamel[2].id", "fo3"); |
| shouldBeEqualToString("byTagNameCamel[3].id", "fo4"); |
| |
| debug("\nStyle rule matches case-insensitively for html and svg elements in html documents.\n(Should have matched case-sensitively for svg elements according to the html spec).\n"); |
| |
| function testComputedStyle(id, color, fontWeight){ |
| shouldBeEqualToString("getComputedStyle("+id+").color", color); |
| shouldBeEqualToString("getComputedStyle("+id+").fontWeight", fontWeight); |
| } |
| |
| testComputedStyle("fo1", "rgb(0, 128, 0)", "700"); |
| testComputedStyle("fo2", "rgb(0, 128, 0)", "700"); |
| testComputedStyle("fo3", "rgb(0, 128, 0)", "700"); |
| testComputedStyle("fo4", "rgb(0, 128, 0)", "700"); |
| |
| </script> |
