wpt / css / css-inline / baseline-shift / baseline-shift-sub-super.html

Status: FAIL | Duration: 51ms | Subtests: 0/2 | Open test on wpt.live | wpt.fyi

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

SubtestStatusMessage
baseline-shift: sub is below baselineFAILassert_greater_than: expected a number greater than 8 but got 8
baseline-shift: super is above baselineFAILassert_less_than: expected a number less than 8 but got 8

/css/css-inline/baseline-shift/baseline-shift-sub-super.html

<!DOCTYPE html>
<html>
<head>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-shift-property">
  <link rel="stylesheet" href="/fonts/ahem.css">
  <meta name="flags" content="ahem" />
  <meta charset="utf-8">
</head>
<body>
  <span style="font: 20px/1 'Ahem';">
    <span id="baseline">X</span>
    <span id="sub" style="baseline-shift: sub">X</span>
    <span id="super" style="baseline-shift: super">X</span>
  </span>
  <script>
    const $baseline = document.getElementById('baseline');
    const $sub = document.getElementById('sub');
    const $super = document.getElementById('super');

    test(() => {
      assert_greater_than(
        $sub.getBoundingClientRect().top,
        $baseline.getBoundingClientRect().top
      );
    }, "baseline-shift: sub is below baseline");

    test(() => {
      assert_less_than(
        $super.getBoundingClientRect().top,
        $baseline.getBoundingClientRect().top
      );
    }, "baseline-shift: super is above baseline");
  </script>
</body>
</html>