logicalprops-with-variables.html (2482B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Logical properties with <code>var()</code></title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-logical-1/#box"> 6 <link rel="help" href="https://drafts.csswg.org/css-variables-1/"> 7 <meta name="assert" content="Checks that logical properties can use the 'var()' notation to reference custom properties."> 8 <div id="target"></div> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script> 12 const target = document.getElementById("target"); 13 const {style} = target; 14 const computedStyle = getComputedStyle(target); 15 let title; 16 17 function check(property, specifiedExpected, expectedComputed) { 18 test(() => { 19 const specifiedActual = style.getPropertyValue(property); 20 assert_equals(specifiedActual, specifiedExpected, "Specified value"); 21 const computedActual = computedStyle.getPropertyValue(property); 22 assert_equals(computedActual, expectedComputed, "Computed value"); 23 }, title + " - " + property); 24 } 25 26 { 27 title = "Logical longhands with variables"; 28 style.cssText = ""; 29 style.setProperty("--one", "1px"); 30 style.setProperty("--two", "2px"); 31 style.setProperty("margin-inline-start", "var(--one)"); 32 style.setProperty("margin-inline-end", "var(--two)"); 33 34 check("margin-inline-start", "var(--one)", "1px"); 35 check("margin-inline-end", "var(--two)", "2px"); 36 check("margin-inline", "", "1px 2px"); 37 } 38 { 39 title = "Logical shorthand with 1 variable"; 40 style.cssText = ""; 41 style.setProperty("--one", "1px"); 42 style.setProperty("margin-inline", "var(--one)"); 43 44 check("margin-inline-start", "", "1px"); 45 check("margin-inline-end", "", "1px"); 46 check("margin-inline", "var(--one)", "1px"); 47 } 48 { 49 title = "Logical shorthand with 2 variables"; 50 style.cssText = ""; 51 style.setProperty("--one", "1px"); 52 style.setProperty("--two", "2px"); 53 style.setProperty("margin-inline", "var(--one) var(--two)"); 54 55 check("margin-inline-start", "", "1px"); 56 check("margin-inline-end", "", "2px"); 57 check("margin-inline", "var(--one) var(--two)", "1px 2px"); 58 } 59 { 60 title = "Logical shorthand with 1 variable and 1 length"; 61 style.cssText = ""; 62 style.setProperty("--one", "1px"); 63 style.setProperty("margin-inline", "var(--one) 2px"); 64 65 check("margin-inline-start", "", "1px"); 66 check("margin-inline-end", "", "2px"); 67 check("margin-inline", "var(--one) 2px", "1px 2px"); 68 } 69 </script>