1 files changed, 137 insertions, 1 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html
index 91172c5185..42f82d9d4b 100644
--- a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html
+++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html
@@ -24,7 +24,7 @@ test(t => {
   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 @@ test(t => {
 
 }, '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);  });
+
 </script>