foreign-object-case-sensitivity.html

<!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 &lt;svg&gt;, 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>
chromium/third_party/blink/web_tests/svg/parser/foreign-object-case-sensitivity.html
