cssText-shorthand.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>

var tests = [
    ['-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 2px;', 'border-spacing: 1px 2px;'],

    // We don't use shorthand for font-family, etc... for compatibility reasons
    ['font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;',
        'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;'],

    ['margin: 1px 2px; margin-top: var(--x);', 'margin-right: 2px; margin-bottom: 1px; margin-left: 2px; margin-top: var(--x);'],
    ['padding: initial; padding-top: initial !important',
        'padding-top: initial !important; padding-right: initial; padding-bottom: initial; padding-left: initial;'],
];

function normalizeCssText(text) { return text.trim().split(/;\s*/).sort().slice(1).join("; "); }

var element;
tests.forEach(function (values) {
    var styleAttribute = values[0];
    var expectedCssText = values[1];
    test(function() {

        element = document.createElement('div');
        element.setAttribute('style', styleAttribute);

        assert_equals(normalizeCssText(element.style.cssText), normalizeCssText(expectedCssText));
    }, "cssText set to " + JSON.stringify(styleAttribute) + " is read back as " + JSON.stringify(expectedCssText));
});

</script>
chromium/third_party/blink/web_tests/fast/css/cssText-shorthand.html
