<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
    [viewBox] { color: green }
    [VIEWBOX] { background-color: green }
</style>
<div viewBox id="t1"></div>
<div viewbox id="t2"></div>
<svg viewBox="0 0 800 10" id="t3"></svg>
<svg VIEWBOX="0 0 800 10" id="t4"></svg>
<script>
    test(() => {
        assert_equals(t1.attributes[0].name, "viewbox");
        assert_equals(t2.attributes[0].name, "viewbox");
        assert_equals(t3.attributes[0].name, "viewBox");
        assert_equals(t4.attributes[0].name, "viewBox");
    }, "Normalization of viewBox on html and svg elements in html documents.");

    test(() => {
        assert_equals(getComputedStyle(t1).color, "rgb(0, 128, 0)");
        assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)");
        assert_equals(getComputedStyle(t2).color, "rgb(0, 128, 0)");
        assert_equals(getComputedStyle(t2).backgroundColor, "rgb(0, 128, 0)");
    }, "viewBox attribute without namespace on html element matches case-insensitively in html document.");

    test(() => {
        assert_equals(getComputedStyle(t3).color, "rgb(0, 128, 0)");
    }, "Camel-cased viewBox on svg in html document matches sensitively.");

    test(() => {
        assert_equals(getComputedStyle(t3).backgroundColor, "rgb(0, 128, 0)");
    }, "Camel-cased viewBox on svg in html document should match case-sensitively. Intentional deviation from the spec.");

    test(() => {
        assert_equals(getComputedStyle(t4).color, "rgb(0, 128, 0)", "Attribute is normalized to camelCase.");
    }, "Normalized camel-cased viewBox on svg in html document matches case-sensitively.");

    test(() => {
        assert_equals(getComputedStyle(t4).backgroundColor, "rgb(0, 128, 0)", "Attribute is normalized to camelCase.");
    }, "Normalized camel-cased viewBox on svg in html document should match case-sensitively. Intentional deviation from the spec.");
</script>