wpt / css / css-gaps / parsing / gap-decorations-rule-shorthand-from-longhands.tentative.html

Status: FAIL | Duration: 39ms | Subtests: 12/16 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (12/16)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
column-rule computed from width: 5px, style: solid, color: rgb(0, 128, 0)FAILassert_equals: expected "5px solid rgb(0, 128, 0)" but got ""
column-rule computed from width: repeat(auto, 5px), style: repeat(auto, solid), color: repeat(auto, rgb(255, 0, 0))FAILassert_equals: expected "repeat(auto, 5px solid rgb(255, 0, 0))" but got ""
column-rule computed from width: repeat(auto, thin, medium), style: solid, color: repeat(8, red, blue)PASS
column-rule computed from width: repeat(6, 15px, thick), style: repeat(auto, solid), color: repeat(auto, red)PASS
column-rule computed from width: 15px, 25px, 35px, style: solid, dotted, color: greenPASS
column-rule computed from width: repeat(auto, 5px), style: solid, double, color: repeat(7, red)PASS
column-rule computed from width: repeat(auto, 5px, 8px, 10px), style: repeat(auto, solid, double), color: repeat(auto, red, green, blue)PASS
column-rule computed from width: repeat(2, 1px, 3px, 5px), style: repeat(2, solid, double), color: repeat(2, red)PASS
row-rule computed from width: 5px, style: solid, color: rgb(0, 128, 0)FAILassert_equals: expected "5px solid rgb(0, 128, 0)" but got ""
row-rule computed from width: repeat(auto, 5px), style: repeat(auto, solid), color: repeat(auto, rgb(255, 0, 0))FAILassert_equals: expected "repeat(auto, 5px solid rgb(255, 0, 0))" but got ""
row-rule computed from width: repeat(auto, thin, medium), style: solid, color: repeat(8, red, blue)PASS
row-rule computed from width: repeat(6, 15px, thick), style: repeat(auto, solid), color: repeat(auto, red)PASS
row-rule computed from width: 15px, 25px, 35px, style: solid, dotted, color: greenPASS
row-rule computed from width: repeat(auto, 5px), style: solid, double, color: repeat(7, red)PASS
row-rule computed from width: repeat(auto, 5px, 8px, 10px), style: repeat(auto, solid, double), color: repeat(auto, red, green, blue)PASS
row-rule computed from width: repeat(2, 1px, 3px, 5px), style: repeat(2, solid, double), color: repeat(2, red)PASS

/css/css-gaps/parsing/gap-decorations-rule-shorthand-from-longhands.tentative.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>CSS Gap Decorations: individual separate longhands form shorthand</title>
  <link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
  <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12201">
  <meta name="assert" content="Setting *-rule-width, *-rule-style, and *-rule-color results in the misaligned *-rule shorthand.">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
</head>
  <div id="target"></div>
<script>
const testCases = [
  {
    width: '5px',
    style: 'solid',
    color: 'rgb(0, 128, 0)',
    expected: '5px solid rgb(0, 128, 0)'
  },
  {
    width: 'repeat(auto, 5px)',
    style: 'repeat(auto, solid)',
    color: 'repeat(auto, rgb(255, 0, 0))',
    expected: 'repeat(auto, 5px solid rgb(255, 0, 0))'
  },

  // The following test cases return an empty string because the longhands do not
  // line up.
  {
    width: 'repeat(auto, thin, medium)',
    style: 'solid',
    color: 'repeat(8, red, blue)',
    expected: ''
  },
  {
    width: 'repeat(6, 15px, thick)',
    style: 'repeat(auto, solid)',
    color: 'repeat(auto, red)',
    expected: ''
  },
  {
    width: '15px, 25px, 35px',
    style: 'solid, dotted',
    color: 'green',
    expected: ''
  },
  {
    width: 'repeat(auto, 5px)',
    style: 'solid, double',
    color: 'repeat(7, red)',
    expected: ''
  },
  {
    width: 'repeat(auto, 5px, 8px, 10px)',
    style: 'repeat(auto, solid, double)',
    color: 'repeat(auto, red, green, blue)',
    expected: ''
  },
  {
    width: 'repeat(2, 1px, 3px, 5px)',
    style: 'repeat(2, solid, double)',
    color: 'repeat(2, red)',
    expected: ''
  },
];

const rule_properties = {
    'column-rule': ['columnRuleWidth',
                    'columnRuleStyle',
                    'columnRuleColor'],
    'row-rule':    ['rowRuleWidth',
                    'rowRuleStyle',
                    'rowRuleColor'],
};

for(rule_property in rule_properties) {
  const [widthProperty, styleProperty, colorProperty] = rule_properties[rule_property];
  for (const {width, style, color, expected} of testCases) {
  let div = document.querySelector('#target');
  div.style[widthProperty] = width;
  div.style[styleProperty] = style;
  div.style[colorProperty]= color;
  test(() => {
    assert_equals(window.getComputedStyle(div)[rule_property], expected);
    assert_equals(div.style[rule_property], expected);
    }, `${rule_property} computed from width: ${width}, style: ${style}, color: ${color}`);
  }
}
</script>