logicalprops-with-deferred-writing-mode.html (4372B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Logical properties with deferred <code>writing-mode</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 <link rel="help" href="https://drafts.csswg.org/css-values-4/#common-keywords"> 8 <meta name="assert" content="Checks that logical properties are resolved correctly when the writing mode isn't known until computed-value time."> 9 <style> 10 #parent { 11 writing-mode: vertical-lr; 12 } 13 14 @layer { 15 .revert-layer { 16 writing-mode: vertical-rl; 17 } 18 } 19 @layer { 20 .revert-layer { 21 writing-mode: horizontal-tb; 22 writing-mode: revert-layer; 23 } 24 } 25 </style> 26 <div id="parent"> 27 <div id="target"></div> 28 </div> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script> 32 const target = document.getElementById("target"); 33 const computedStyle = getComputedStyle(target); 34 35 function check(expected) { 36 for (let [prop, value] of Object.entries(expected)) { 37 assert_equals(computedStyle.getPropertyValue(prop), value, prop); 38 } 39 } 40 41 test(function() { 42 target.style.cssText = ` 43 --wm: vertical-rl; 44 writing-mode: var(--wm); 45 margin-block-start: 1px; 46 margin-block-end: 2px; 47 margin-inline-start: 3px; 48 margin-inline-end: 4px; 49 `; 50 check({ 51 // Logicals 52 "margin-block-start": "1px", 53 "margin-block-end": "2px", 54 "margin-inline-start": "3px", 55 "margin-inline-end": "4px", 56 // Physicals 57 "margin-right": "1px", 58 "margin-left": "2px", 59 "margin-top": "3px", 60 "margin-bottom": "4px", 61 }); 62 }, "Writing mode with variable"); 63 64 test(function() { 65 target.style.cssText = ` 66 --wm1: vertical-rl; 67 --wm2: var(--wm1); 68 writing-mode: var(--wm2); 69 margin-block-start: 1px; 70 margin-block-end: 2px; 71 margin-inline-start: 3px; 72 margin-inline-end: 4px; 73 `; 74 check({ 75 // Logicals 76 "margin-block-start": "1px", 77 "margin-block-end": "2px", 78 "margin-inline-start": "3px", 79 "margin-inline-end": "4px", 80 // Physicals 81 "margin-right": "1px", 82 "margin-left": "2px", 83 "margin-top": "3px", 84 "margin-bottom": "4px", 85 }); 86 }, "Writing mode with nested variables"); 87 88 test(function() { 89 target.style.cssText = ` 90 writing-mode: inherit; 91 margin-block-start: 1px; 92 margin-block-end: 2px; 93 margin-inline-start: 3px; 94 margin-inline-end: 4px; 95 `; 96 check({ 97 // Logicals 98 "margin-block-start": "1px", 99 "margin-block-end": "2px", 100 "margin-inline-start": "3px", 101 "margin-inline-end": "4px", 102 // Physicals 103 "margin-left": "1px", 104 "margin-right": "2px", 105 "margin-top": "3px", 106 "margin-bottom": "4px", 107 }); 108 }, "Writing mode with 'inherit'"); 109 110 test(function() { 111 target.style.cssText = ` 112 writing-mode: initial; 113 margin-block-start: 1px; 114 margin-block-end: 2px; 115 margin-inline-start: 3px; 116 margin-inline-end: 4px; 117 `; 118 check({ 119 // Logicals 120 "margin-block-start": "1px", 121 "margin-block-end": "2px", 122 "margin-inline-start": "3px", 123 "margin-inline-end": "4px", 124 // Physicals 125 "margin-top": "1px", 126 "margin-bottom": "2px", 127 "margin-left": "3px", 128 "margin-right": "4px", 129 }); 130 }, "Writing mode with 'initial'"); 131 132 test(function() { 133 target.style.cssText = ` 134 writing-mode: revert; 135 margin-block-start: 1px; 136 margin-block-end: 2px; 137 margin-inline-start: 3px; 138 margin-inline-end: 4px; 139 `; 140 check({ 141 // Logicals 142 "margin-block-start": "1px", 143 "margin-block-end": "2px", 144 "margin-inline-start": "3px", 145 "margin-inline-end": "4px", 146 // Physicals 147 "margin-left": "1px", 148 "margin-right": "2px", 149 "margin-top": "3px", 150 "margin-bottom": "4px", 151 }); 152 }, "Writing mode with 'revert'"); 153 154 test(function() { 155 target.className = "revert-layer"; 156 target.style.cssText = ` 157 margin-block-start: 1px; 158 margin-block-end: 2px; 159 margin-inline-start: 3px; 160 margin-inline-end: 4px; 161 `; 162 check({ 163 // Logicals 164 "margin-block-start": "1px", 165 "margin-block-end": "2px", 166 "margin-inline-start": "3px", 167 "margin-inline-end": "4px", 168 // Physicals 169 "margin-right": "1px", 170 "margin-left": "2px", 171 "margin-top": "3px", 172 "margin-bottom": "4px", 173 }); 174 }, "Writing mode with 'revert-layer'"); 175 </script>