wpt/css/cssom/serialize-variable-reference.html at 5f6ae2dbc5945366194fd4849ffab765df1afda1 · 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
<!doctype html>
<meta charset="utf-8">
<title>CSSOM - Serialization with variable preserves original serialization.</title>
<link rel="help" href="https://drafts.csswg.org/css-variables/#serializing-custom-props">
<link rel="help" href="https://drafts.csswg.org/css-variables/#variables-in-shorthands">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="longhand-whitespace" style="font-size: var(--a);"></div>
<div id="shorthand-whitespace" style="font: var(--a);"></div>
<div id="longhand" style="font-size:var(--a);"></div>
<div id="shorthand" style="font:var(--a);"></div>
<script>
    test(function() {
        var elem = document.getElementById('longhand-whitespace');

        assert_equals(elem.style.cssText, 'font-size: var(--a);');
    }, 'Longhand with variable preserves original serialization: with whitespace')

    test(function() {
        var elem = document.getElementById('shorthand-whitespace');

        assert_equals(elem.style.cssText, 'font: var(--a);');
    }, 'Shorthand with variable preserves original serialization: with whitespace')

    test(function() {
        var elem = document.getElementById('longhand');

        assert_equals(elem.style.cssText, 'font-size:var(--a);');
    }, 'Longhand with variable preserves original serialization: without whitespace')

    test(function() {
        var elem = document.getElementById('shorthand');

        assert_equals(elem.style.cssText, 'font:var(--a);');
    }, 'Shorthand with variable preserves original serialization: without whitespace')
</script>