mirror of
https://github.com/servo/servo.git
synced 2025-06-26 01:54:33 +01:00
69 lines
2.4 KiB
HTML
69 lines
2.4 KiB
HTML
<!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>
|