logicalprops-with-variables.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-logical/logicalprops-with-variables.html - WPT Dashboard Interop Dashboard

<!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>