| <!DOCTYPE html> |
| <meta charset="utf-8" /> |
| <title>CSS Logical Properties: serialization of the inset properties</title> |
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> |
| <link rel="help" href="https://drafts.csswg.org/css-logical/#inset-properties" /> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| function setCSSLogicalEnabled(test, value) { |
| let initialValue = internals.runtimeFlags.cssLogicalEnabled; |
| internals.runtimeFlags.cssLogicalEnabled = value; |
| test.add_cleanup(() => { |
| internals.runtimeFlags.cssLogicalEnabled = initialValue; |
| }); |
| } |
| |
| function check(inStyle, outStyle) { |
| let element = document.createElement("div"); |
| element.style.cssText = inStyle; |
| assert_equals(element.style.cssText, outStyle); |
| } |
| |
| test(function(t) { |
| setCSSLogicalEnabled(t, true); |
| check("top: 1px; right: 2px; bottom: 3px; left: 4px;", "inset: 1px 2px 3px 4px;"); |
| }, "Inset shorthand serializes longhands when enabled"); |
| |
| test(function(t) { |
| setCSSLogicalEnabled(t, false); |
| let style = "top: 1px; right: 2px; bottom: 3px; left: 4px;"; |
| check(style, style); |
| }, "Inset longhands serialize as-is when shorthand is disabled"); |
| </script> |
