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
69
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Logical properties with <code>var()</code></title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box">
<link rel="help" href="https://drafts.csswg.org/css-variables-1/">
<meta name="assert" content="Checks that logical properties can use the 'var()' notation to reference custom properties.">
<div id="target"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const target = document.getElementById("target");
const {style} = target;
const computedStyle = getComputedStyle(target);
let title;
function check(property, specifiedExpected, expectedComputed) {
test(() => {
const specifiedActual = style.getPropertyValue(property);
assert_equals(specifiedActual, specifiedExpected, "Specified value");
const computedActual = computedStyle.getPropertyValue(property);
assert_equals(computedActual, expectedComputed, "Computed value");
}, title + " - " + property);
}
{
title = "Logical longhands with variables";
style.cssText = "";
style.setProperty("--one", "1px");
style.setProperty("--two", "2px");
style.setProperty("margin-inline-start", "var(--one)");
style.setProperty("margin-inline-end", "var(--two)");
check("margin-inline-start", "var(--one)", "1px");
check("margin-inline-end", "var(--two)", "2px");
check("margin-inline", "", "1px 2px");
}
{
title = "Logical shorthand with 1 variable";
style.cssText = "";
style.setProperty("--one", "1px");
style.setProperty("margin-inline", "var(--one)");
check("margin-inline-start", "", "1px");
check("margin-inline-end", "", "1px");
check("margin-inline", "var(--one)", "1px");
}
{
title = "Logical shorthand with 2 variables";
style.cssText = "";
style.setProperty("--one", "1px");
style.setProperty("--two", "2px");
style.setProperty("margin-inline", "var(--one) var(--two)");
check("margin-inline-start", "", "1px");
check("margin-inline-end", "", "2px");
check("margin-inline", "var(--one) var(--two)", "1px 2px");
}
{
title = "Logical shorthand with 1 variable and 1 length";
style.cssText = "";
style.setProperty("--one", "1px");
style.setProperty("margin-inline", "var(--one) 2px");
check("margin-inline-start", "", "1px");
check("margin-inline-end", "", "2px");
check("margin-inline", "var(--one) 2px", "1px 2px");
}
</script>
|
