function test_counter_style_descriptor(descriptor, value, expected) {
  let descriptors = [];
  descriptors.push(`${descriptor}: ${value}`);

  // Fill out the remaining necessary descriptors
  if (descriptor === 'system') {
    if (value === 'additive')
      descriptors.push('additive-symbols: 1 "I"');
    else if (!value.startsWith('extends'))
      descriptors.push('symbols: "X" "Y"');
  } else if (descriptor === 'symbols') {
    descriptors.push('system: symbolic');
  } else if (descriptor === 'additive-symbols') {
    descriptors.push('system: additive');
  } else {
    descriptors.push('system: symbolic');
    descriptors.push('symbols: "X" "Y"');
  }

  let style = document.createElement('style');
  style.textContent = `@counter-style foo { ${descriptors.join(';')} }`;
  document.head.appendChild(style);

  test(() => {
    let rule = style.sheet.cssRules[0];
    // TODO: The spec is inconsistent on when the entire rule is invalid
    // (and hence absent from OM), and when only the descriptor is invalid.
    // Revise when spec issue is resolved.
    // See https://github.com/w3c/csswg-drafts/issues/5717
    if (!rule) {
      assert_equals(expected, undefined);
      return;
    }

    assert_equals(rule.constructor.name, 'CSSCounterStyleRule');

    let text = rule.cssText;
    if (expected)
      assert_not_equals(text.indexOf(`${descriptor}: ${expected}`), -1);
    else
      assert_equals(text.indexOf(`${descriptor}:`), -1);
  }, `@counter-style '${descriptor}: ${value}' is ${expected ? 'valid' : 'invalid'}`);

  style.remove();
}

function test_valid_counter_style_descriptor(descriptor, value, expected) {
  expected = expected || value;
  test_counter_style_descriptor(descriptor, value, expected);
}

function test_invalid_counter_style_descriptor(descriptor, value) {
  test_counter_style_descriptor(descriptor, value, undefined);
}

function test_counter_style_name(name, isValid) {
  let style = document.createElement('style');
  style.textContent = `@counter-style ${name} { system: symbolic; symbols: 'X' 'Y'; }`;
  document.head.appendChild(style);

  test(() => {
    let rule = style.sheet.cssRules[0];
    if (!isValid) {
      assert_equals(rule, undefined);
      return;
    }

    assert_not_equals(rule, undefined);
    assert_equals(rule.constructor.name, 'CSSCounterStyleRule');
    assert_equals(rule.name, name);
  }, `@counter-style name ${name} is ${isValid ? 'valid' : 'invalid'}`);

  style.remove();
}

function test_valid_name(name) {
  test_counter_style_name(name, true);
}

function test_invalid_name(name) {
  test_counter_style_name(name, false);
}