| <!doctype html> |
| <meta charset="utf-8"> |
| <title>StylePropertyMap.set</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: 'lemon', values: ['ade'], desc: 'an unsupported property name' }, |
| { property: null, values: ['foo'], desc: 'an null property name' }, |
| { property: 'width', values: [CSS.deg(0)], desc: 'an invalid CSSStyleValue' }, |
| { property: 'width', values: ['10s'], desc: 'an invalid String' }, |
| ]; |
| |
| for (const {property, values, desc} of gInvalidTestCases) { |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| assert_throws_js(TypeError, () => styleMap.set(property, ...values)); |
| }, 'Setting a StylePropertyMap with ' + desc + ' throws TypeError'); |
| } |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| assert_throws_js(TypeError, () => styleMap.set('width', CSS.px(10), CSS.px(10))); |
| }, 'Setting a non list-valued property with multiple arguments throws TypeError'); |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| assert_throws_js(TypeError, () => styleMap.set('width', '1s, 2s')); |
| }, 'Setting a non list-valued property with list-valued string throws TypeError'); |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| assert_throws_js(TypeError, () => { |
| styleMap.set('transition-duration', '1s', new CSSUnparsedValue([])); |
| }); |
| }, 'Setting a list-valued property with a CSSUnparsedValue and other ' + |
| 'values throws TypeError'); |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| assert_throws_js(TypeError, () => { |
| styleMap.set('transition-duration', '1s', 'var(--A)'); |
| }); |
| }, 'Setting a list-valued property with a var ref() and other values ' + |
| 'throws TypeError'); |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| |
| styleMap.set('width', CSS.px(10)); |
| assert_style_value_array_equals(styleMap.get('width'), CSS.px(10)); |
| |
| styleMap.set('width', '20px'); |
| assert_style_value_array_equals(styleMap.get('width'), CSS.px(20)); |
| }, 'Setting a property with CSSStyleValue or String updates its value'); |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| |
| styleMap.set('transition-duration', CSS.s(1), '2s'); |
| assert_style_value_array_equals(styleMap.getAll('transition-duration'), [CSS.s(1), CSS.s(2)]); |
| |
| styleMap.set('transition-duration', '3s', CSS.s(4)); |
| assert_style_value_array_equals(styleMap.getAll('transition-duration'), [CSS.s(3), CSS.s(4)]); |
| }, 'Setting a list-valued property with CSSStyleValue or String updates its values'); |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| |
| styleMap.set('transition-duration', '1s, 2s'); |
| assert_style_value_array_equals(styleMap.getAll('transition-duration'), [CSS.s(1), CSS.s(2)]); |
| }, 'Setting a list-valued property with a list-valued string updates its value'); |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, ''); |
| |
| styleMap.set('--foo', new CSSUnparsedValue(['auto'])); |
| assert_style_value_array_equals(styleMap.get('--foo'), new CSSUnparsedValue(['auto'])); |
| |
| styleMap.set('--foo', '20px'); |
| assert_style_value_array_equals(styleMap.get('--foo'), new CSSUnparsedValue(['20px'])); |
| }, 'Setting a custom property with CSSStyleValue or String updates its value'); |
| |
| test(t => { |
| let styleMap = createDeclaredStyleMap(t, 'transition-duration: 5s, 10s'); |
| |
| styleMap.set('tRaNsItIoN-dUrAtIoN', '1s', CSS.s(2)); |
| const result = styleMap.getAll('transition-duration'); |
| assert_style_value_array_equals(result, [CSS.s(1), CSS.s(2)]); |
| }, 'StylePropertyMap.set is case-insensitive'); |
| |
| </script> |
