wpt / css / css-align / baseline-rules / synthesized-baseline-grid-001.html

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

TestTest SourceSubtests (0/7)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
.wrapper 1FAILassert_equals: data-offset-y expected 30 got 28
.wrapper 2FAILassert_equals: data-offset-y expected 5 got -2 assert_equals: data-offset-y expected 30 got 20
.wrapper 3FAILassert_equals: data-offset-y expected 0 got -2 assert_equals: data-offset-y expected 25 got 20
.wrapper 4FAILassert_equals: data-offset-y expected 25 got -2 assert_equals: data-offset-y expected 50 got 20
.wrapper 5FAILassert_equals: data-offset-y expected 25 got -2 assert_equals: data-offset-y expected 30 got 0 assert_equals: data-offset-y expected 50 got 20
.wrapper 6FAILassert_equals: data-offset-y expected 50 got 20
.wrapper 7FAILassert_equals: data-offset-y expected 50 got 20

/css/css-align/baseline-rules/synthesized-baseline-grid-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Box Alignment Test: Synthesized baseline grid container</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
<meta name="flags" content="ahem">
<meta name="assert" content="This test check the synthesized of a grid container if it has no items (it should use the grid container margin box) or if the items have no baseline (in that case it should use the grid item's border box).">
<style>
.wrapper {
  border: solid thick;
  position: relative;
  width: 300px;
  height: 150px;
  margin: 10px;
}
canvas {
  width: 100px;
  height: 100px;
  background: blue;
}
.magenta-dotted-border {
  border: 5px dotted magenta;
}
.border-padding-margin {
  border: 10px solid cyan;
  padding: 15px;
  margin: 20px 0px;
  background: yellow;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.wrapper')">

<div id="log"></div>

<div class="wrapper">
  <canvas></canvas>
  <div style="display: inline-grid;" class="border-padding-margin"
      data-offset-y="30"></div>
</div>
<div class="wrapper">
  <canvas></canvas>
  <div style="display: inline-block;" class="magenta-dotted-border"
      data-offset-y="5">
    <div style="display: inline-grid;" class="border-padding-margin"
        data-offset-y="30"></div>
  </div>
</div>
<div class="wrapper">
  <canvas></canvas>
  <div style="display: inline-block;" class="magenta-dotted-border"
      data-offset-y="0">
    <div style="display: grid;" class="border-padding-margin"
        data-offset-y="25"></div>
  </div>
</div>
<div class="wrapper">
  <canvas></canvas>
  <div style="display: inline-grid;" class="magenta-dotted-border"
      data-offset-y="25">
    <div class="border-padding-margin" data-offset-y="50"></div>
  </div>
</div>
<div class="wrapper">
  <canvas></canvas>
  <div style="display: inline-block;" class="magenta-dotted-border"
      data-offset-y="25">
    <div style="display: grid;"
        data-offset-y="30">
      <div class="border-padding-margin" data-offset-y="50"></div>
    </div>
  </div>
</div>
<div class="wrapper" style="display: flex; align-items: baseline;">
  <canvas></canvas>
  <div style="display: inline-grid;" class="magenta-dotted-border"
      data-offset-y="25">
    <div class="border-padding-margin" data-offset-y="50"></div>
  </div>
</div>
<div class="wrapper" style="display: flex; align-items: baseline;">
  <canvas></canvas>
  <div style="display: grid;" class="magenta-dotted-border"
      data-offset-y="25">
    <div class="border-padding-margin" data-offset-y="50"></div>
  </div>
</div>

</body>