wpt / css / css-position / position-absolute-with-negative-sized-imcb.html

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

TestTest SourceSubtests (2/30)

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

SubtestStatusMessage
.abspos 1FAILassert_equals: data-offset-x expected 1 got 0 assert_equals: data-offset-y expected 1 got 0
.abspos 2FAILassert_equals: data-offset-y expected 1 got 8
.abspos 3FAILassert_equals: data-offset-y expected 3 got 12
.abspos 4FAILassert_equals: data-offset-y expected 9 got 18
.abspos 5FAILassert_equals: data-offset-x expected 1 got 2 assert_equals: data-offset-y expected 1 got 0
.abspos 6FAILassert_equals: data-offset-y expected 1 got 8
.abspos 7FAILassert_equals: data-offset-y expected 3 got 12
.abspos 8FAILassert_equals: data-offset-y expected 9 got 18
.abspos 9FAILassert_equals: data-offset-y expected 12 got 18
.abspos 10FAILassert_equals: data-offset-y expected 12 got 18
.abspos 11FAILassert_equals: data-offset-y expected 12 got 18
.abspos 12FAILassert_equals: data-expected-width expected 12 got 0 assert_equals: data-expected-height expected 12 got 0 assert_equals: data-offset-y expected 12 got 18
.abspos 13FAILassert_equals: data-expected-width expected 12 got 0 assert_equals: data-expected-height expected 12 got 0 assert_equals: data-offset-y expected 12 got 18
.abspos 14FAILassert_equals: data-offset-y expected 12 got 18
.abspos 15FAILassert_equals: data-offset-y expected 12 got 18
.abspos 16FAILassert_equals: data-offset-y expected 12 got 18
.abspos 17FAILassert_equals: data-expected-width expected 12 got 0 assert_equals: data-expected-height expected 12 got 0 assert_equals: data-offset-x expected -10 got 2 assert_equals: data-offset-y expected 12 got 18
.abspos 18FAILassert_equals: data-expected-width expected 12 got 0 assert_equals: data-expected-height expected 12 got 0 assert_equals: data-offset-x expected -10 got 2 assert_equals: data-offset-y expected 12 got 18
.abspos 19FAILassert_equals: data-expected-width expected 20 got 4 assert_equals: data-expected-height expected 20 got 4
.abspos 20FAILassert_equals: data-expected-width expected 20 got 4 assert_equals: data-expected-height expected 20 got 4 assert_equals: data-offset-x expected -8 got 8
.abspos 21PASS
.abspos 22FAILassert_equals: data-offset-x expected 5 got 10 assert_equals: data-offset-y expected 5 got 10
.abspos 23FAILassert_equals: data-offset-x expected 10 got 15 assert_equals: data-offset-y expected 10 got 15
.abspos 24FAILassert_equals: data-offset-x expected 15 got 20 assert_equals: data-offset-y expected 15 got 20
.abspos 25FAILassert_equals: data-offset-x expected 20 got 25 assert_equals: data-offset-y expected 20 got 25
.abspos 26PASS
.abspos 27FAILassert_equals: data-offset-x expected 5 got 0 assert_equals: data-offset-y expected 5 got 10
.abspos 28FAILassert_equals: data-offset-x expected 0 got -5 assert_equals: data-offset-y expected 10 got 15
.abspos 29FAILassert_equals: data-offset-x expected -5 got -10 assert_equals: data-offset-y expected 15 got 20
.abspos 30FAILassert_equals: data-offset-x expected -10 got -15 assert_equals: data-offset-y expected 20 got 25

/css/css-position/position-absolute-with-negative-sized-imcb.html

<!DOCTYPE html>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-insets">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11478">
<meta name="assert" content="
  If the insets of an abspos are big enough that would make the inset-modified
  containing block (IMCB) have a negative size, the weaker inset is adjusted
  so that the IMCB size becomes zero instead.
">

<style>
.rtl {
  direction: rtl;
}
.container {
  display: inline-block;
  margin: 8px;
  border: 1px solid;
  position: relative;
  width: 20px;
  height: 20px;
}
.abspos {
  position: absolute;
  background: orange;
}
.abspos.case1 {
  margin: auto;
  width: 18px;
  height: 18px;
}
.abspos.case2 {
  inset: 18px;
  margin: auto;
}
.abspos.case3 {
  inset: 18px;
  margin: -10px;
}
.abspos.case4 {
  width: 10px;
  height: 10px;
  place-self: unsafe center;
}
</style>


<!-- Case 1: Auto margins, fixed size, varying insets -->
<div class="container">
  <div class="abspos case1" style="inset: 0px"
       data-expected-width="18" data-expected-height="18"
       data-offset-x="1" data-offset-y="1"></div>
</div>
<div class="container">
  <div class="abspos case1" style="inset: 8px"
       data-expected-width="18" data-expected-height="18"
       data-offset-x="8" data-offset-y="1"></div>
</div>
<div class="container">
  <div class="abspos case1" style="inset: 12px"
       data-expected-width="18" data-expected-height="18"
       data-offset-x="12" data-offset-y="3"></div>
</div>
<div class="container">
  <div class="abspos case1" style="inset: 18px"
       data-expected-width="18" data-expected-height="18"
       data-offset-x="18" data-offset-y="9"></div>
</div>

<br>

<!-- Case 1, but RTL -->
<div class="container rtl">
  <div class="abspos case1" style="inset: 0px"
       data-expected-width="18" data-expected-height="18"
       data-offset-x="1" data-offset-y="1"></div>
</div>
<div class="container rtl">
  <div class="abspos case1" style="inset: 8px"
       data-expected-width="18" data-expected-height="18"
       data-offset-x="-6" data-offset-y="1"></div>
</div>
<div class="container rtl">
  <div class="abspos case1" style="inset: 12px"
       data-expected-width="18" data-expected-height="18"
       data-offset-x="-10" data-offset-y="3"></div>
</div>
<div class="container rtl">
  <div class="abspos case1" style="inset: 18px"
       data-expected-width="18" data-expected-height="18"
       data-offset-x="-16" data-offset-y="9"></div>
</div>

<hr>

<!-- Case 2: Auto margins, fixed insets, varying sizes -->
<div class="container">
  <div class="abspos case2" style="border: solid orange 6px;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="18" data-offset-y="12"></div>
</div>
<div class="container">
  <div class="abspos case2" style="width: 12px; height: 12px;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="18" data-offset-y="12"></div>
</div>
<div class="container">
  <div class="abspos case2" style="min-width: 12px; min-height: 12px;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="18" data-offset-y="12"></div>
</div>
<div class="container">
  <div class="abspos case2" style="width: min-content; height: min-content;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="18" data-offset-y="12">
    <div style="width: 12px; height: 12px"></div>
  </div>
</div>
<div class="container">
  <div class="abspos case2" style="display: table;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="18" data-offset-y="12">
    <div style="width: 12px; height: 12px"></div>
  </div>
</div>

<br>

<!-- Case 2, but RTL -->
<div class="container rtl">
  <div class="abspos case2" style="border: solid orange 6px;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="-10" data-offset-y="12"></div>
</div>
<div class="container rtl">
  <div class="abspos case2" style="width: 12px; height: 12px;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="-10" data-offset-y="12"></div>
</div>
<div class="container rtl">
  <div class="abspos case2" style="min-width: 12px; min-height: 12px;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="-10" data-offset-y="12"></div>
</div>
<div class="container rtl">
  <div class="abspos case2" style="width: min-content; height: min-content;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="-10" data-offset-y="12">
    <div style="width: 12px; height: 12px"></div>
  </div>
</div>
<div class="container rtl">
  <div class="abspos case2" style="display: table;"
       data-expected-width="12" data-expected-height="12"
       data-offset-x="-10" data-offset-y="12">
    <div style="width: 12px; height: 12px"></div>
  </div>
</div>

<hr>

<!-- Case 3: No margins, fixed insets, auto sizes -->
<div class="container">
  <div class="abspos case3"
       data-expected-width="20" data-expected-height="20"
       data-offset-x="8" data-offset-y="8"></div>
</div>
<div class="container rtl">
  <div class="abspos case3"
       data-expected-width="20" data-expected-height="20"
       data-offset-x="-8" data-offset-y="8"></div>
</div>

<hr>

<!-- Case 4: Fixed size, unsafe center alignment, varying insets -->
<div class="container">
  <div class="abspos case4" style="inset: 5px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="5" data-offset-y="5"></div>
</div>
<div class="container">
  <div class="abspos case4" style="inset: 10px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="5" data-offset-y="5"></div>
</div>
<div class="container">
  <div class="abspos case4" style="inset: 15px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="10" data-offset-y="10"></div>
</div>
<div class="container">
  <div class="abspos case4" style="inset: 20px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="15" data-offset-y="15"></div>
</div>
<div class="container">
  <div class="abspos case4" style="inset: 25px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="20" data-offset-y="20"></div>
</div>

<br>

<!-- Case 4, but RTL -->
<div class="container rtl">
  <div class="abspos case4" style="inset: 5px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="5" data-offset-y="5"></div>
</div>
<div class="container rtl">
  <div class="abspos case4" style="inset: 10px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="5" data-offset-y="5"></div>
</div>
<div class="container rtl">
  <div class="abspos case4" style="inset: 15px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="0" data-offset-y="10"></div>
</div>
<div class="container rtl">
  <div class="abspos case4" style="inset: 20px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="-5" data-offset-y="15"></div>
</div>
<div class="container rtl">
  <div class="abspos case4" style="inset: 25px"
       data-expected-width="10" data-expected-height="10"
       data-offset-x="-10" data-offset-y="20"></div>
</div>


<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout(".abspos");
</script>