wpt / css / css-overflow / parsing / webkit-box-computed.html

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

TestTest SourceSubtests (4/16)

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

SubtestStatusMessage
display: -webkit-box;FAILassert_equals: expected "-webkit-box" but got "block"
display: -webkit-box; -webkit-box-orient: vertical;FAILassert_equals: expected "-webkit-box" but got "block"
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: none;FAILassert_equals: expected "-webkit-box" but got "block"
display: -webkit-box; -webkit-line-clamp: 3;FAILassert_equals: expected "-webkit-box" but got "block"
display: -webkit-box; -webkit-box-orient: horizontal; -webkit-line-clamp: 3;FAILassert_equals: expected "-webkit-box" but got "block"
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;FAILassert_equals: expected "flow-root" but got "block"
display: -webkit-inline-box;FAILassert_equals: expected "-webkit-inline-box" but got "block"
display: -webkit-inline-box; -webkit-box-orient: vertical;FAILassert_equals: expected "-webkit-inline-box" but got "block"
display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: none;FAILassert_equals: expected "-webkit-inline-box" but got "block"
display: -webkit-inline-box; -webkit-line-clamp: 3;FAILassert_equals: expected "-webkit-inline-box" but got "block"
display: -webkit-inline-box; -webkit-box-orient: horizontal; -webkit-line-clamp: 3;FAILassert_equals: expected "-webkit-inline-box" but got "block"
display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;FAILassert_equals: expected "inline-block" but got "block"
display: flex; -webkit-box-orient: vertical; -webkit-line-clamp: 3;PASS
display: inline-flex; -webkit-box-orient: vertical; -webkit-line-clamp: 3;PASS
display: -webkit-flex; -webkit-box-orient: vertical; -webkit-line-clamp: 3;PASS
display: -webkit-inline-flex; -webkit-box-orient: vertical; -webkit-line-clamp: 3;PASS

/css/css-overflow/parsing/webkit-box-computed.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Overflow: getComputedStyle() for display: -webkit-box in the presence of line-clamp or continue</title>
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#continue">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="target"></div>
<script>

// Checks the computed value of `display` in an element with the specified
// properties in `properties`. If `expectedDisplayComputedValue` is not given,
// it will be assumed to be the same as the specified value of `display`.
function test_display_computed(properties, expectedDisplayComputedValue) {
  test((t) => {
    const target = document.getElementById('target');

    for (const [prop, value] of Object.entries(properties)) {
      target.style[prop] = value;
    }

    t.add_cleanup(() => {
      for (const prop of Object.keys(properties)) {
        target.style.removeProperty(prop);
      }
    });

    assert_equals(
      getComputedStyle(target).display,
      expectedDisplayComputedValue ?? properties.display
    );
  }, Object.entries(properties).map(([k, v]) => `${k}: ${v};`).join(" "));
}

test_display_computed({
  "display": "-webkit-box"
});
test_display_computed({
  "display": "-webkit-box",
  "-webkit-box-orient": "vertical"
});
test_display_computed({
  "display": "-webkit-box",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "none"
});
test_display_computed({
  "display": "-webkit-box",
  "-webkit-line-clamp": "3"
});
test_display_computed({
  "display": "-webkit-box",
  "-webkit-box-orient": "horizontal",
  "-webkit-line-clamp": "3"
});
test_display_computed({
  "display": "-webkit-box",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "3"
}, "flow-root");

test_display_computed({
  "display": "-webkit-inline-box"
});
test_display_computed({
  "display": "-webkit-inline-box",
  "-webkit-box-orient": "vertical"
});
test_display_computed({
  "display": "-webkit-inline-box",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "none"
});
test_display_computed({
  "display": "-webkit-inline-box",
  "-webkit-line-clamp": "3"
});
test_display_computed({
  "display": "-webkit-inline-box",
  "-webkit-box-orient": "horizontal",
  "-webkit-line-clamp": "3"
});
test_display_computed({
  "display": "-webkit-inline-box",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "3"
}, "inline-block");

// -webkit-box and -webkit-inline-box are defined in the Compat spec as keyword
// mappings to flex and inline-flex, respectively (along with -webkit-flex and
// -webkit-inline-flex). However, only -webkit(-inline)-box changes computed
// value in the presence of -webkit-line-clamp.
test_display_computed({
  "display": "flex",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "3"
});
test_display_computed({
  "display": "inline-flex",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "3"
});
test_display_computed({
  "display": "-webkit-flex",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "3"
}, "flex");
test_display_computed({
  "display": "-webkit-inline-flex",
  "-webkit-box-orient": "vertical",
  "-webkit-line-clamp": "3"
}, "inline-flex");

if (CSS.supports("line-clamp: none")) {
  test_display_computed({
    "display": "-webkit-box",
    "-webkit-box-orient": "vertical",
    "line-clamp": "none"
  });
  test_display_computed({
    "display": "-webkit-inline-box",
    "-webkit-box-orient": "vertical",
    "line-clamp": "none"
  });
}

if (CSS.supports("line-clamp: 2")) {
  test_display_computed({
    "display": "-webkit-box",
    "line-clamp": "2"
  });
  test_display_computed({
    "display": "-webkit-box",
    "-webkit-box-orient": "vertical",
    "line-clamp": "2"
  }, "flow-root");
  test_display_computed({
    "display": "-webkit-inline-box",
    "line-clamp": "2"
  });
  test_display_computed({
    "display": "-webkit-inline-box",
    "-webkit-box-orient": "vertical",
    "line-clamp": "2"
  }, "inline-block");
}

if (CSS.supports("line-clamp: auto")) {
  test_display_computed({
    "display": "-webkit-box",
    "line-clamp": "auto"
  });
  test_display_computed({
    "display": "-webkit-box",
    "-webkit-box-orient": "vertical",
    "line-clamp": "auto"
  }, "flow-root");
  test_display_computed({
    "display": "-webkit-inline-box",
    "line-clamp": "auto"
  });
  test_display_computed({
    "display": "-webkit-inline-box",
    "-webkit-box-orient": "vertical",
    "line-clamp": "auto"
  }, "inline-block");
}

if (CSS.supports("continue: none")) {
  test_display_computed({
    "display": "-webkit-box",
    "-webkit-box-orient": "vertical",
    "continue": "none"
  });
  test_display_computed({
    "display": "-webkit-inline-box",
    "-webkit-box-orient": "vertical",
    "continue": "none"
  });
}

if (CSS.supports("continue: discard")) {
  test_display_computed({
    "display": "-webkit-box",
    "continue": "discard"
  });
  test_display_computed({
    "display": "-webkit-box",
    "-webkit-box-orient": "vertical",
    "continue": "discard"
  }, "flow-root");
  test_display_computed({
    "display": "-webkit-inline-box",
    "continue": "discard"
  });
  test_display_computed({
    "display": "-webkit-inline-box",
    "-webkit-box-orient": "vertical",
    "continue": "discard"
  }, "inline-block");
}

</script>
</body>
</html>