| <!doctype html> |
| <meta charset="utf-8"> |
| <title>Inline StylePropertyMap.set() with shorthands</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#set-a-value-on-a-stylepropertymap"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../resources/testhelper.js"></script> |
| <body> |
| <script> |
| 'use strict'; |
| |
| const gInvalidTestCases = [ |
| { property: 'margin', values: [CSS.deg(0)], desc: 'an invalid CSSStyleValue' }, |
| { property: 'margin', values: ['10s'], desc: 'an invalid String' }, |
| ]; |
| |
| for (const {property, values, desc} of gInvalidTestCases) { |
| test(t => { |
| let styleMap = createInlineStyleMap(t, ''); |
| assert_throws_js(TypeError, () => styleMap.set(property, ...values)); |
| }, 'Setting a shorthand with ' + desc + ' on inline style throws TypeError'); |
| } |
| |
| test(t => { |
| let [elem, styleMap] = createElementWithInlineStyleMap(t, 'margin: 1px 2px 3px 4px'); |
| |
| const result = styleMap.get('margin'); |
| elem.style.margin = ''; |
| styleMap.set('margin', result); |
| |
| assert_equals(elem.style.getPropertyValue('margin'), '1px 2px 3px 4px'); |
| assert_equals(elem.style.getPropertyValue('margin-top'), '1px'); |
| assert_equals(elem.style.getPropertyValue('margin-right'), '2px'); |
| assert_equals(elem.style.getPropertyValue('margin-bottom'), '3px'); |
| assert_equals(elem.style.getPropertyValue('margin-left'), '4px'); |
| }, 'Setting a shorthand with a CSSStyleValue updates inline style'); |
| |
| test(t => { |
| let [elem, styleMap] = createElementWithInlineStyleMap(t); |
| |
| styleMap.set('margin', '1px 2px 3px 4px'); |
| |
| assert_equals(elem.style.getPropertyValue('margin'), '1px 2px 3px 4px'); |
| assert_equals(elem.style.getPropertyValue('margin-top'), '1px'); |
| assert_equals(elem.style.getPropertyValue('margin-right'), '2px'); |
| assert_equals(elem.style.getPropertyValue('margin-bottom'), '3px'); |
| assert_equals(elem.style.getPropertyValue('margin-left'), '4px'); |
| }, 'Setting a shorthand with a string updates inline style'); |
| |
| </script> |
