css/css-values/attr-parse-url.html

<!DOCTYPE html>
<title>CSS Values and Units Test: Parsing URLs in attr</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notations">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/13946">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id="attr"></div>

<script>
    function test_invalid_attr(property, attrString, attrValue) {
        var elem = document.getElementById("attr");
        var expectedValue = window.getComputedStyle(elem).getPropertyValue(property);

        elem.setAttribute("data-foo", attrValue);
        elem.style.setProperty(property, attrString);

        test(() => {
            assert_equals(window.getComputedStyle(elem).getPropertyValue(property), expectedValue,
                          "Setting property \'" + property + "\' to the value \'" + attrString +
                          "\', where \'data-foo=" + attrValue + "\' should not change it's value.");
        });
        elem.style.setProperty(property, null);
    }

    test_invalid_attr('--x', 'attr(data-foo type(<url>))', 'url("https://does-not-exist.test/404.png")');
</script>