attr-case-sensitivity-004.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-content/attr-case-sensitivity-004.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>attr() with SVG attributes</title>

<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notation">

<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">

<meta name="assert" content="This test checks that SVG attribute names specified in the attr() function are case-sensitive.">

<style>

    svg { width: 100px; height: 100px; }

    #casematch { background-color: attr(testCase type(<color>), white); }

    #lowercase { background-color: attr(testcase type(<color>), white); }

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<svg id="casematch"></svg>

<svg id="lowercase"></svg>

<script>

    document.getElementById("casematch").setAttribute("testCase", "green");

    document.getElementById("lowercase").setAttribute("testCase", "red");

</script>