auto-003.html | Explore in Territory

<!DOCTYPE html>
<title>contain-intrinsic-size: auto with various dynamic changes</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

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

<div style="height: 2000px;"></div>

<div style="contain-intrinsic-size: auto 1px; contain: size;" id="test">
  <div style="height: 50px;" id="child"></div> <!-- make 'test' have a 50px height -->
</div>

<script>
var next_func;

var t = async_test("contain-intrinsic-size: auto");

var log = document.getElementById("log");
var el = document.getElementById("test");
var child = document.getElementById("child");
var observer = new ResizeObserver(function() {
  requestAnimationFrame(next_func);
  observer.unobserve(el);
});

function step2() {
  el.style.contentVisibility = "auto";
  el.style.contain = "size";
  assert_equals(el.offsetHeight, 50);
  child.style.height = "30px";
  // We should still use the old saved size.
  assert_equals(el.offsetHeight, 50);

  el.style.contentVisibility = "";
  el.style.contain = "";
  assert_equals(el.offsetHeight, 30);

  // Need to let resize observer run again to update the size.
  next_func = t.step_func_done(finalize);
  observer.observe(el);
}

function finalize() {
  el.style.contentVisibility = "auto";
  el.style.contain = "size";
  assert_equals(el.offsetHeight, 30);
}


el.offsetWidth;
t.step(function() {
  assert_equals(el.offsetHeight, 1);
  el.style.contain = "";
  assert_equals(el.offsetHeight, 50);

  // Let ResizeObserver run so that the size gets saved.
  next_func = t.step_func(step2);
  observer.observe(el);
});

</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-sizing/contain-intrinsic-size/auto-003.html
