Blitz - WPT: presentational-hints-rollback.html

wpt / css / css-cascade / presentational-hints-rollback.html

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

Subtest	Status	Message
#tests > * 1	FAIL	assert_equals: data-expected-client-width expected 60 got 44 assert_equals: data-expected-client-height expected 60 got 33
#tests > * 2	FAIL	assert_equals: data-expected-client-width expected 60 got 44 assert_equals: data-expected-client-height expected 60 got 33
#tests > * 3	FAIL	assert_equals: data-expected-client-width expected 60 got 44 assert_equals: data-expected-client-height expected 60 got 33
#tests > * 4	FAIL	assert_equals: data-expected-client-width expected 60 got 44 assert_equals: data-expected-client-height expected 60 got 33
#tests > * 5	PASS
#tests > * 6	PASS
#tests > * 7	PASS
#tests > * 8	PASS
#tests > * 9	FAIL	assert_equals: data-expected-client-width expected 300 got 44 assert_equals: data-expected-client-height expected 150 got 33
#tests > * 10	FAIL	assert_equals: data-expected-client-width expected 300 got 44 assert_equals: data-expected-client-height expected 150 got 33
#tests > * 11	FAIL	assert_equals: data-expected-client-width expected 300 got 44 assert_equals: data-expected-client-height expected 150 got 33
#tests > * 12	FAIL	assert_equals: data-expected-client-width expected 300 got 44 assert_equals: data-expected-client-height expected 150 got 33
#tests > * 13	PASS
#tests > * 14	PASS
#tests > * 15	PASS
#tests > * 16	PASS

Enable JavaScript in test iframe

/css/css-cascade/presentational-hints-rollback.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Cascade: rolling back the cascade with presentation hints</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#preshint">
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#default">
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#revert-layer">
<link rel="help" href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes">
<meta name="assert" content="Checks that 'revert' considers presentational hints as part of the author origin,
    and 'revert-layer' considers them an independent origin between the user origin and the author origin.">

<style>
@layer {
  .revert-1 {
    width: revert;
    height: revert;
  }
  .revert-layer-1 {
    width: revert-layer;
    height: revert-layer;
  }
}

.revert-2 {
  width: revert;
  height: revert;
}
.revert-layer-2 {
  width: revert-layer;
  height: revert-layer;
}

.revert-3 {
  animation: revert-3 paused 2s -1s;
}
.revert-layer-3 {
  animation: revert-layer-3 paused 2s -1s;
}
@keyframes revert-3 {
  from, to {
    width: revert;
    height: revert;
  }
}
@keyframes revert-layer-3 {
  from, to {
    width: revert-layer;
    height: revert-layer;
  }
}
</style>

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

<div id="tests">
  <!-- 'revert' considers presentational hints as part of the author origin, so it rolls back to user origin.
        The images should then get an 'auto' size, which will use the natural size of the resource. -->
  <img class="revert-1" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="60"
      height="33" data-expected-client-height="60">
  <img class="revert-2" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="60"
      height="33" data-expected-client-height="60">
  <img class="revert-3" src="/css/support/60x60-green.png"
       width="44" data-expected-client-width="60"
       height="33" data-expected-client-height="60">
  <img style="width: revert; height: revert" src="/css/support/60x60-green.png"
       width="44" data-expected-client-width="60"
       height="33" data-expected-client-height="60">

  <!-- 'revert-layer' considers presentational hints as an independent origin, so it rolls back to them.
        The images should then get size specified in the attributes. -->
  <img class="revert-layer-1" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="44"
      height="33" data-expected-client-height="33">
  <img class="revert-layer-2" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="44"
      height="33" data-expected-client-height="33">
  <img class="revert-layer-3" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="44"
      height="33" data-expected-client-height="33">
  <img style="width: revert-layer; height: revert-layer" src="/css/support/60x60-green.png"
       width="44" data-expected-client-width="44"
       height="33" data-expected-client-height="33">

  <!-- 'revert' considers presentational hints as part of the author origin, so it rolls back to user origin.
        The iframes should then get an 'auto' size, which will default to 300x150. -->
  <iframe class="revert-1" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="300"
      height="33" data-expected-client-height="150"></iframe>
  <iframe class="revert-2" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="300"
      height="33" data-expected-client-height="150"></iframe>
  <iframe class="revert-3" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="300"
      height="33" data-expected-client-height="150"></iframe>
  <iframe style="width: revert; height: revert" src="/css/support/60x60-green.png"
       width="44" data-expected-client-width="300"
       height="33" data-expected-client-height="150"></iframe>

  <!-- 'revert-layer' considers presentational hints as an independent origin, so it rolls back to them.
        The iframes should then get size specified in the attributes. -->
  <iframe class="revert-layer-1" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="44"
      height="33" data-expected-client-height="33"></iframe>
  <iframe class="revert-layer-2" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="44"
      height="33" data-expected-client-height="33"></iframe>
  <iframe class="revert-layer-3" src="/css/support/60x60-green.png"
      width="44" data-expected-client-width="44"
      height="33" data-expected-client-height="33"></iframe>
  <iframe style="width: revert-layer; height: revert-layer" src="/css/support/60x60-green.png"
       width="44" data-expected-client-width="44"
       height="33" data-expected-client-height="33"></iframe>
</div>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
addEventListener("load", function() {
  checkLayout("#tests > *", false);
  done();
}, {once: true});
</script>