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