<!DOCTYPE html>
<meta charset="utf-8">
<title>Declarations trim whitespace from their beginning/ending</title>
<meta name="author" title="Tab Atkins-Bittner">
<link rel=help href="https://drafts.csswg.org/css-syntax/#consume-declaration">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
    <div id="log"></div>
    <style id="style-el">
    #foo {
        --foo-1:bar;
        --foo-2: bar;
        --foo-3:bar ;
        --foo-4: bar ;
        --foo-5: bar !important;
        --foo-6: bar !important ;
        --foo-7:bar!important;
        --foo-8:bar!important ;
        --foo-9:bar
    }
    </style>
    <p id=foo>foo</p>
    <script>
    let stylesheet = getComputedStyle(document.querySelector("#foo"));
    let canonical = "bar";
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-1"), canonical);
    }, "--foo-1:bar;");
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-2"), canonical);
    }, "--foo-2: bar;");
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-3"), canonical);
    }, "--foo-3:bar ;");
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-4"), canonical);
    }, "--foo-4: bar ;");
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-5"), canonical);
    }, "--foo-5: bar !important;");
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-6"), canonical);
    }, "--foo-6: bar !important ;");
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-7"), canonical);
    }, "--foo-7:bar!important;");
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-8"), canonical);
    }, "--foo-8:bar!important ;");
    test(function() {
        assert_equals(stylesheet.getPropertyValue("--foo-9"), canonical);
    }, "--foo-9:bar (then ws until end of rule)");
    </script>