wpt / css / css-anchor-position / anchor-center-htb-vrl.html

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

TestTest SourceSubtests (3/10)

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

SubtestStatusMessage
.target 1FAILassert_equals: data-expected-height expected 100 got 346 assert_equals: data-offset-y expected 0 got 50
.target 2FAILassert_equals: data-offset-y expected 35 got 50
.target 3FAILassert_equals: data-expected-height expected 80 got 346
.target 4FAILassert_equals: data-expected-height expected 80 got 346 assert_equals: data-offset-y expected 0 got -266
.target 5FAILassert_equals: data-expected-height expected 120 got 346 assert_equals: data-offset-y expected 0 got -226
.target 6FAILassert_equals: data-offset-y expected 15 got 20
.target 7FAILassert_equals: data-expected-height expected 150 got 346 assert_equals: data-offset-y expected 0 got -196
.target 8PASS
.target 9PASS
.target 10PASS

/css/css-anchor-position/anchor-center-htb-vrl.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
<title>Tests the position and available-size of 'anchor-center' alignment with different insets.</title>
<style>
.container {
  width: 100px;
  height: 100px;
  border: solid 3px;
  position: relative;
  margin: 50px;
}

.anchor {
  anchor-name: --anchor;
  position: relative;
  width: 50px;
  height: 50px;
  left: 40px;
  top: 40px;
  background: lime;
}

.target {
  writing-mode: vertical-rl;
  position-anchor: --anchor;
  position: absolute;
  background: cyan;
  align-self: anchor-center;
  right: anchor(left);
  width: 20px;
}
/* used to test the available-size given to the element */
.target::after {
  color: transparent;
  content: 'a a a a a a a a a a a a a a a a a a';
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

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

<!-- no insets -->
<div class="container">
  <div class="anchor"></div>
  <div class="target" data-expected-height="100" data-offset-y="0"></div>
</div>

<div class="container">
  <div class="anchor"></div>
  <div class="target" style="max-height: 60px;" data-expected-height="60" data-offset-y="35"></div>
</div>

<!-- single insets -->
<div class="container">
  <div class="anchor"></div>
  <div class="target" style="top: 20px;" data-expected-height="80" data-offset-y="20"></div>
</div>

<div class="container">
  <div class="anchor"></div>
  <div class="target" style="bottom: 20px;" data-expected-height="80" data-offset-y="0"></div>
</div>

<div class="container">
  <div class="anchor"></div>
  <div class="target" style="bottom: -20px;" data-expected-height="120" data-offset-y="0"></div>
</div>

<div class="container">
  <div class="anchor"></div>
  <div class="target" style="max-height: 100px; bottom: -20px;" data-expected-height="100" data-offset-y="15"></div>
</div>

<div class="container">
  <div class="anchor"></div>
  <div class="target" style="bottom: -50px;" data-expected-height="150" data-offset-y="0"></div>
</div>

<!-- both insets -->
<div class="container">
  <div class="anchor"></div>
  <div class="target" style="top: 10px; bottom: 20px;" data-expected-height="70" data-offset-y="10"></div>
</div>

<div class="container">
  <div class="anchor"></div>
  <div class="target" style="top: 10px; bottom: -20px;" data-expected-height="110" data-offset-y="10"></div>
</div>

<div class="container">
  <div class="anchor"></div>
  <div class="target" style="top: -10px; bottom: -50px;" data-expected-height="160" data-offset-y="-10"></div>
</div>