| <!DOCTYPE html><!-- webkit-test-runner [ CSSTypedOMEnabled=true ] --> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <meta name="author" title="Johnson Zhou" href="mailto:qiaosong_zhou@apple.com"> |
| <meta name="assert" content="Test unparsing of "> |
| <link rel="help" content="https://drafts.css-houdini.org/css-typed-om-1/"> |
| |
| <div id="el" style = "width: 150px; height: 10em; --my-prop: hello;"></div> |
| |
| <script> |
| test(function() { |
| let unparsedValue = CSSStyleValue.parse("height", "calc(42px + var(--foo, 15em))"); |
| assert_true(unparsedValue instanceof CSSUnparsedValue); |
| assert_equals(unparsedValue.length, 3); |
| assert_equals(unparsedValue[0], "calc(42px + "); |
| assert_true(unparsedValue[1] instanceof CSSVariableReferenceValue); |
| assert_equals(unparsedValue[1].fallback.length, 1); |
| assert_equals(unparsedValue[1].fallback[0], " 15em"); |
| assert_equals(unparsedValue[1].variable, "--foo"); |
| assert_equals(unparsedValue[2], ")"); |
| }, 'test that CSSUnparsedValue with fallback is parsed properly'); |
| |
| test(function() { |
| let unparsedValue = CSSStyleValue.parse("height", "calc(42px + var(--foo, 15em) + var(--bar, var(--far) + 15px))"); |
| assert_true(unparsedValue instanceof CSSUnparsedValue); |
| assert_equals(unparsedValue.length, 5); |
| assert_equals(unparsedValue[0], "calc(42px + "); |
| assert_true(unparsedValue[1] instanceof CSSVariableReferenceValue); |
| assert_equals(unparsedValue[1].fallback.length, 1); |
| assert_equals(unparsedValue[1].fallback[0], " 15em"); |
| assert_equals(unparsedValue[1].variable, "--foo"); |
| assert_equals(unparsedValue[2], " + "); |
| assert_equals(unparsedValue[3].variable, "--bar"); |
| assert_equals(unparsedValue[3].fallback.length, 3); |
| assert_equals(unparsedValue[3].fallback[0], " "); |
| assert_equals(unparsedValue[3].fallback[1].variable, "--far"); |
| assert_equals(unparsedValue[3].fallback[1].fallback, null); |
| assert_equals(unparsedValue[3].fallback[2], " + 15px"); |
| assert_equals(unparsedValue[4], ")"); |
| }, 'test that CSSUnparsedValue with nested fallback is parsed properly'); |
| </script> |
