diff --git a/css/css-anchor-position/at-position-try-cssom.html b/css/css-anchor-position/at-position-try-cssom.html index 91172c51853131..42f82d9d4bd05a 100644 --- a/css/css-anchor-position/at-position-try-cssom.html +++ b/css/css-anchor-position/at-position-try-cssom.html @@ -24,7 +24,7 @@ const positionTryRule = style.sheet.cssRules[0]; assert_true(positionTryRule instanceof CSSPositionTryRule); assert_equals(positionTryRule.name, '--pf'); - assert_true(positionTryRule.style instanceof CSSStyleDeclaration); + assert_true(positionTryRule.style instanceof CSSPositionTryDescriptors); assert_equals(positionTryRule.style.length, 1); assert_equals(positionTryRule.style.left, 'anchor(right)'); }, 'CSSPositionTryRule attribute values'); @@ -63,4 +63,140 @@ }, 'CSSPositionTryRule.style.setProperty setting allowed and disallowed properties'); +test(t => { + const style = createStyle(t, ` + @position-try --pf { + top: 10px; + left: 20px; + --x: 200px; + color: red; + } + `); + let declarations = style.sheet.cssRules[0].style; + assert_equals(declarations.length, 2); + assert_equals(declarations.item(0), 'top'); + assert_equals(declarations.item(1), 'left'); +}, 'CSSPositionTryDescriptors.item'); + +test(t => { + const style = createStyle(t, '@position-try --pf {}'); + let declarations = style.sheet.cssRules[0].style; + assert_equals(declarations.length, 0); + declarations.cssText = `color:red;top:10px;`; + assert_equals(declarations.length, 1); +}, 'CSSPositionTryDescriptors.cssText'); + +let supported_properties = [ + 'margin', + 'margin-top', + 'margin-right', + 'margin-bottom', + 'margin-left', + 'margin-block', + 'margin-block-start', + 'margin-block-end', + 'margin-inline', + 'margin-inline-start', + 'margin-inline-end', + 'inset', + 'top', + 'left', + 'right', + 'bottom', + 'inset-block', + 'inset-block-start', + 'inset-block-end', + 'inset-inline', + 'inset-inline-start', + 'inset-inline-end', + 'width', + 'height', + 'min-width', + 'max-width', + 'min-height', + 'max-height', + 'block-size', + 'min-block-size', + 'max-block-size', + 'inline-size', + 'min-inline-size', + 'max-inline-size', + 'place-self', + 'align-self', + 'justify-self', + 'position-anchor', + 'inset-area', +]; + +// A selection of unsupported properties. +let unsupported_properties = [ + 'color', + 'align-items', + 'align-content', + 'background', + 'display', + 'position', + 'writing-mode', + 'direction', + 'syntax', // @property +]; + +let upperFirst = (x) => x[0].toUpperCase() + x.slice(1); +let lowerFirst = (x) => x[0].toLowerCase() + x.slice(1); +let toLowerCamelCase = (x) => lowerFirst(x.split('-').map(upperFirst).join('')); + +// Test getting/setting the specified property on a CSSPositionTryDescriptors +// object. The property can either be supported or not supported, +// which determines the expected results. +function test_property(prop, supported) { + test(t => { + let decls = supported_properties.map(x => `${x}:unset;`).join(''); + let style = createStyle(t, `@position-try --pf { ${decls} }`); + let declarations = style.sheet.cssRules[0].style; + assert_equals(declarations.getPropertyValue(prop), supported ? 'unset' : ''); + }, `CSSPositionTryDescriptors.getPropertyValue(${prop})`); + + test(t => { + let style = createStyle(t, '@position-try --pf {}'); + let declarations = style.sheet.cssRules[0].style; + declarations.setProperty(prop, 'unset'); + assert_equals(declarations.getPropertyValue(prop), supported ? 'unset' : ''); + }, `CSSPositionTryDescriptors.setProperty(${prop})`); + + test(t => { + let decls = supported_properties.map(x => `${x}:unset;`).join(''); + let style = createStyle(t, `@position-try --pf { ${decls} }`); + let declarations = style.sheet.cssRules[0].style; + assert_equals(declarations[prop], supported ? 'unset' : undefined); + }, `CSSPositionTryDescriptors[${prop}] (set)`); + + test(t => { + let style = createStyle(t, '@position-try --pf {}'); + let declarations = style.sheet.cssRules[0].style; + declarations[prop] = 'unset'; + assert_equals(declarations.getPropertyValue(prop), supported ? 'unset' : ''); + }, `CSSPositionTryDescriptors[${prop}] (get)`); + + let camelCaseAttr = toLowerCamelCase(prop); + if (camelCaseAttr != prop) { + // Also test the camelCase version of the attribute. + test(t => { + let decls = supported_properties.map(x => `${x}:unset;`).join(''); + let style = createStyle(t, `@position-try --pf { ${decls} }`); + let declarations = style.sheet.cssRules[0].style; + assert_equals(declarations[camelCaseAttr], supported ? 'unset' : undefined); + }, `CSSPositionTryDescriptors[${camelCaseAttr}] (get)`); + + test(t => { + let style = createStyle(t, '@position-try --pf {}'); + let declarations = style.sheet.cssRules[0].style; + declarations[camelCaseAttr] = 'unset'; + assert_equals(declarations.getPropertyValue(prop), supported ? 'unset' : ''); + }, `CSSPositionTryDescriptors[${camelCaseAttr}] (set)`); + } +} + +supported_properties.forEach(x => { test_property(x, /* supported */ true); }); +unsupported_properties.forEach(x => { test_property(x, /* supported */ false); }); +