wpt/css/css-values/attr-argument-grammar.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<title>CSS Values and Units Test: attr() argument grammar</title>
<meta name="assert" content="test attr values">
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id="attr" data-bar="3"></div>
<div id="expected"></div>

<script>
    function test_attr(property, attrString, attrValue, expectedValue) {
        var elem = document.getElementById("attr");
        elem.setAttribute("data-foo", attrValue);
        elem.style.setProperty(property, attrString);

        var expectedElem =  document.getElementById("expected");
        expectedElem.style.setProperty(property, expectedValue);

        test(() => {
            assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
                          window.getComputedStyle(expectedElem).getPropertyValue(property),
                          "Value \'" + attrString + "\', where \'data-foo=" + attrValue +
                          "\' should be valid for the property \'" + property + "\'.");
        });

        elem.style.setProperty(property, null);
        expectedElem.style.setProperty(property, null);
    }

    document.getElementById("attr").style.setProperty('--x', 'data-foo type(<number>)');
    test_attr('font-weight', 'attr(var(--x))', '10', '10');
    test_attr('font-weight', 'attr(var(--x),)', '10', '10');
    test_attr('font-weight', 'attr(var(--x), 10)', 'invalid', '10');
    document.getElementById("attr").style.setProperty('--x', 'data-foo ');
    test_attr('font-weight', 'attr(var(--x))', '10', '"10"');
    test_attr('font-weight', 'attr(var(--x),)', '10', '"10"');
    test_attr('font-weight', 'attr(var())', '10', '');
    test_attr('font-weight', 'attr(())', '10', '');
    test_attr('font-weight', 'attr(!)', '10', '');

    document.getElementById("attr").style.setProperty('--x', 'data-foo type(<number>), 10');
    test_attr('font-weight', 'attr(var(--x))', '10', '');

    document.getElementById("attr").style.setProperty('--y', 'data-foo type(<custom-ident>)');
    test_attr('--x', 'attr(var(--y), 3px)', 'var(--y)', '3px');
    document.getElementById("attr").style.setProperty('--y', null);

    // Cycles
    document.getElementById("attr").style.setProperty('--y', 'data-foo type(*)');
    test_attr('--x', 'attr(var(--y))', 'var(--x)', '');
    document.getElementById("attr").style.setProperty('--y', null);

    document.getElementById("attr").style.setProperty('--y', 'data-foo type(<custom-ident>)');
    test_attr('--x', 'attr(var(--y), 3px)', 'var(--x)', '');
    document.getElementById("attr").style.setProperty('--y', null);

    // var() in the type position only.
    document.getElementById("attr").style.setProperty('--type', 'type(<number>)');
    test_attr('font-weight', 'attr(data-foo var(--type))', '42', '42');
    test_attr('font-weight', 'attr(data-foo var(--type), 100)', 'invalid', '100');
    document.getElementById("attr").style.setProperty('--type', null);

    document.getElementById("attr").style.setProperty('--unit', 'number');
    test_attr('font-weight', 'attr(data-foo var(--unit))', '42', '42');
    document.getElementById("attr").style.setProperty('--unit', null);

</script>