wpt / css / css-gaps / parsing / gap-decorations-bidirectional-shorthands.html

Status: FAIL | Duration: 36ms | Subtests: 7/14 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (7/14)

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

SubtestStatusMessage
rule-color shorthand computed from longhand valuesFAILassert_equals: expected "rgb(0, 255, 0)" but got ""
rule-width shorthand computed from longhand valuesFAILassert_equals: expected "10px" but got ""
rule-style shorthand computed from longhand valuesFAILassert_equals: expected "solid" but got ""
rule shorthand computed from longhand valuesFAILassert_equals: expected "10px solid rgb(0, 255, 0)" but got ""
rule-break shorthand computed from longhand valuesFAILassert_equals: expected "intersection" but got ""
rule-visibility-items shorthand computed from longhand valuesFAILassert_equals: expected "around" but got ""
rule-inset shorthand computed from longhand valuesFAILassert_equals: expected "10px 5px / 10px 5px" but got ""
rule-color shorthand cannot be computed from longhand values so expect an empty stringPASS
rule-width shorthand cannot be computed from longhand values so expect an empty stringPASS
rule-style shorthand cannot be computed from longhand values so expect an empty stringPASS
rule shorthand cannot be computed from longhand values so expect an empty stringPASS
rule-break shorthand cannot be computed from longhand values so expect an empty stringPASS
rule-visibility-items shorthand cannot be computed from longhand values so expect an empty stringPASS
rule-inset shorthand cannot be computed from longhand values so expect an empty stringPASS

/css/css-gaps/parsing/gap-decorations-bidirectional-shorthands.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Gap Decoration: shorthand rule-* computed style values from longhands</title>
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#rule-bi-directional">
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
</head>
<body>
<div id="target1"></div>
<div id="target2"></div>
<style>
  #target1 {
    column-rule-color: lime;
    row-rule-color: lime;

    column-rule-width: 10px;
    row-rule-width: 10px;

    column-rule-style: solid;
    row-rule-style: solid;

    column-rule-break: intersection;
    row-rule-break: intersection;

    column-rule-visibility-items: around;
    row-rule-visibility-items: around;

    column-rule-inset-cap-start: 10px;
    row-rule-inset-cap-start: 10px;
    column-rule-inset-cap-end: 5px;
    row-rule-inset-cap-end: 5px;
    column-rule-inset-junction-start: 10px;
    row-rule-inset-junction-start: 10px;
    column-rule-inset-junction-end: 5px;
    row-rule-inset-junction-end: 5px;
  }

  #target2 {
    column-rule-color: blue;
    row-rule-color: red;

    column-rule-width: 15px;
    row-rule-width: 20px;

    column-rule-style: double;
    row-rule-style: dotted;

    column-rule-break: intersection;
    row-rule-break: normal;

    column-rule-visibility-items: around;
    row-rule-visibility-items: between;

    column-rule-inset-cap-start: 5px;
    row-rule-inset-cap-start: 10px;
    column-rule-inset-cap-end: 15px;
    row-rule-inset-cap-end: 20px;
    column-rule-inset-junction-start: 25px;
    row-rule-inset-junction-start: 30px;
    column-rule-inset-junction-end: 35px;
    row-rule-inset-junction-end: 40px;
  }
</style>
<script>
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-color'), 'rgb(0, 255, 0)');
  }, "rule-color shorthand computed from longhand values");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-width'), '10px');
  }, "rule-width shorthand computed from longhand values");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-style'), 'solid');
  }, "rule-style shorthand computed from longhand values");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule'), '10px solid rgb(0, 255, 0)');
  }, "rule shorthand computed from longhand values");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-break'), 'intersection');
  }, "rule-break shorthand computed from longhand values");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-visibility-items'), 'around');
  }, "rule-visibility-items shorthand computed from longhand values");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target1')).getPropertyValue('rule-inset'), '10px 5px / 10px 5px');
  }, "rule-inset shorthand computed from longhand values");



  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-color'), '');
  }, "rule-color shorthand cannot be computed from longhand values so expect an empty string");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-width'), '');
  }, "rule-width shorthand cannot be computed from longhand values so expect an empty string");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-style'), '');
  }, "rule-style shorthand cannot be computed from longhand values so expect an empty string");
    test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule'), '');
  }, "rule shorthand cannot be computed from longhand values so expect an empty string");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-break'), '');
  }, "rule-break shorthand cannot be computed from longhand values so expect an empty string");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-visibility-items'), '');
  }, "rule-visibility-items shorthand cannot be computed from longhand values so expect an empty string");
  test(function() {
    assert_equals(window.getComputedStyle(document.getElementById('target2')).getPropertyValue('rule-inset'), '');
  }, "rule-inset shorthand cannot be computed from longhand values so expect an empty string");
</script>
</body>
</html>