<!doctype html>
<html>
<head>
<style>
@namespace WebKit url(https://www.webkit.org/awesome);
@namespace AweWebKit url(https://www.webkit.org/Awesome);
@namespace XHTML url(http://www.w3.org/1999/xhtml);

target, Target, TARGET {
    width: 100px;
    height: 100px;
    display: block;
    float: left;
    background-color: white;
    color: white;
    border: none;
}

XHTML|target {
    background-color: cyan;
}
XHTML|Target {
    border: 2px solid darkblue;
}
XHTML|TARGET {
    color: maroon;
}

WebKit|target {
    background-color: red;
}
WebKit|Target {
    border: 2px solid blue;
}
WebKit|TARGET {
    color: green;
}

webkit|target {
    background-color: purple;
}
webkit|Target {
    border: 2px solid yellow;
}
webkit|TARGET {
    color: orange;
}

AweWebKit|target {
    background-color: lime;
}
AweWebKit|Target {
    border: 2px solid olive;
}
AweWebKit|TARGET {
    color: silver;
}
</style>
</head>
<body>
    <p>Test styling of elements using their local name. Matching the name should be case-insensitive for HTML, case-sensitive for XML.</p>
    <div id="test-cases">
        <target>Target</target>
        <Target>Target</Target>
        <TARGET>Target</TARGET>
        <xml xmlns="https://www.webkit.org/awesome">
            <target>Target</target>
            <Target>Target</Target>
            <TARGET>Target</TARGET>
        </xml>
    </div>
</body>
<script>
    var xmlDocument = new DOMParser().parseFromString('<xml xmlns="https://www.webkit.org/awesome"><target>Target</target><Target>Target</Target><TARGET>Target</TARGET></xml>', 'text/xml');
    var testCases = document.getElementById("test-cases");
    testCases.appendChild(document.importNode(xmlDocument.documentElement, true));
</script>
</html>