Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-sizing/contain-intrinsic-size
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
84 files changed, 4253 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/animation/contain-intrinsic-size-interpolation.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/animation/contain-intrinsic-size-interpolation.html
new file mode 100644
index 0000000000..b768c1a330
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/animation/contain-intrinsic-size-interpolation.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>contain-intrinsic-size interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.target {
+  contain: strict;
+  contain-intrinsic-size: 50px 60px;
+}
+</style>
+
+<body></body>
+
+<script>
+// none doesn't interpolate
+test_interpolation({
+  property: 'contain-intrinsic-size',
+  from: neutralKeyframe,
+  to: '20px 10px',
+}, [
+  {at: -0.3, expect: '59px 75px'},
+  {at: 0, expect: '50px 60px'},
+  {at: 0.3, expect: '41px 45px'},
+  {at: 0.6, expect: '32px 30px'},
+  {at: 1, expect: '20px 10px'},
+  {at: 1.5, expect: '5px 0px'}
+]);
+
+test_no_interpolation({
+  property: 'contain-intrinsic-size',
+  from: 'initial',
+  to: '20px 20px',
+});
+
+test_no_interpolation({
+  property: 'contain-intrinsic-size',
+  from: 'inherit',
+  to: '20px',
+});
+
+test_no_interpolation({
+  property: 'contain-intrinsic-size',
+  from: 'unset',
+  to: '20px',
+});
+
+test_no_interpolation({
+  property: 'contain-intrinsic-size',
+  from: 'none',
+  to: '20px 20px',
+});
+
+test_no_interpolation({
+  property: 'contain-intrinsic-size',
+  from: '10px 15px',
+  to: 'none',
+});
+
+test_interpolation({
+  property: 'contain-intrinsic-size',
+  from: 'auto 0px 0px',
+  to: 'auto 10px 10px'
+}, [
+  {at: -0.3, expect: 'auto 0px 0px'}, // contain-intrinsic-size can't be negative.
+  {at: 0, expect: 'auto 0px 0px'},
+  {at: 0.3, expect: 'auto 3px 3px'},
+  {at: 0.6, expect: 'auto 6px 6px'},
+  {at: 1, expect: 'auto 10px 10px'},
+  {at: 1.5, expect: 'auto 15px 15px'}
+]);
+
+test_no_interpolation({
+  property: 'contain-intrinsic-size',
+  from: 'auto 10px 15px',
+  to: '20px 15px',
+});
+
+test_no_interpolation({
+  property: 'contain-intrinsic-size',
+  from: 'none 15px',
+  to: '20px 15px',
+});
+
+test_no_interpolation({
+  property: 'contain-intrinsic-size',
+  from: 'none 15px',
+  to: 'auto 20px 15px',
+});
+
+test_interpolation({
+  property: 'contain-intrinsic-size',
+  from: '0px 0px',
+  to: '10px'
+}, [
+  {at: -0.3, expect: '0px 0px'}, // contain-intrinsic-size can't be negative.
+  {at: 0, expect: '0px 0px'},
+  {at: 0.3, expect: '3px 3px'},
+  {at: 0.6, expect: '6px 6px'},
+  {at: 1, expect: '10px 10px'},
+  {at: 1.5, expect: '15px 15px'}
+]);
+
+test_interpolation({
+  property: 'contain-intrinsic-size',
+  from: '20px 40px',
+  to: '30px 50px'
+}, [
+  {at: -0.3, expect: '17px 37px'},
+  {at: 0, expect: '20px 40px'},
+  {at: 0.3, expect: '23px 43px'},
+  {at: 0.6, expect: '26px 46px'},
+  {at: 1, expect: '30px 50px'},
+  {at: 1.5, expect: '35px 55px'}
+]);
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-001.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-001.html
new file mode 100644
index 0000000000..7bf28388c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<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;" id="test">
+  <div style="height: 50px;"></div> <!-- make 'test' have a 50px height -->
+</div>
+
+<script>
+function finalize() {
+  el.style.contentVisibility = "auto";
+  log.innerText = el.offsetHeight;
+  assert_equals(el.offsetHeight, 50);
+}
+
+var t = async_test("contain-intrinsic-size: auto");
+
+var log = document.getElementById("log");
+var el = document.getElementById("test");
+var observer = new ResizeObserver(function() {
+  requestAnimationFrame(t.step_func_done(finalize));
+  observer.unobserve(el);
+});
+
+observer.observe(el);
+el.offsetWidth;
+
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-002.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-002.html
new file mode 100644
index 0000000000..6412680b79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>contain-intrinsic-size: auto with a vertical writing mode</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;" id="test">
+  <div style="height: 50px; writing-mode: vertical-lr;"></div> <!-- make 'test' have a 50px height -->
+</div>
+
+<script>
+function finalize() {
+  el.style.contentVisibility = "auto";
+  log.innerText = el.offsetHeight;
+  assert_equals(el.offsetHeight, 50);
+}
+
+var t = async_test("contain-intrinsic-size: auto");
+
+var log = document.getElementById("log");
+var el = document.getElementById("test");
+var observer = new ResizeObserver(function() {
+  requestAnimationFrame(t.step_func_done(finalize));
+  observer.unobserve(el);
+});
+
+observer.observe(el);
+el.offsetWidth;
+
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-003.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-003.html
new file mode 100644
index 0000000000..a995ec1cc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-003.html
@@ -0,0 +1,63 @@
+<!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>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-004.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-004.html
new file mode 100644
index 0000000000..a70e70cb9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-004.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<title>Tests that contain-intrinsic-size: auto only works with content-visibility: auto, not just size containment</title>
+<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;" id="test">
+  <div style="height: 50px;"></div> <!-- make 'test' have a 50px height -->
+</div>
+
+<script>
+function finalize() {
+  el.style.contain = "size";
+  log.innerText = el.offsetHeight;
+  // No content-visibility: auto, so this should remain 1.
+  assert_equals(el.offsetHeight, 1);
+}
+
+var t = async_test("contain-intrinsic-size: auto");
+
+var log = document.getElementById("log");
+var el = document.getElementById("test");
+var observer = new ResizeObserver(function() {
+  requestAnimationFrame(t.step_func_done(finalize));
+  observer.unobserve(el);
+});
+
+observer.observe(el);
+el.offsetWidth;
+
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-005.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-005.html
new file mode 100644
index 0000000000..2b7e03192d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-005.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<title>Tests that contain-intrinsic-size: auto also works with content-visibility: hidden</title>
+<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;" id="test">
+  <div style="height: 50px;"></div> <!-- make 'test' have a 50px height -->
+</div>
+
+<script>
+function finalize() {
+  el.style.contain = "size";
+  el.style.contentVisibility = "hidden";
+  log.innerText = el.offsetHeight;
+  assert_equals(el.offsetHeight, 50);
+}
+
+var t = async_test("contain-intrinsic-size: auto");
+
+var log = document.getElementById("log");
+var el = document.getElementById("test");
+var observer = new ResizeObserver(function() {
+  requestAnimationFrame(t.step_func_done(finalize));
+  observer.unobserve(el);
+});
+
+observer.observe(el);
+el.offsetWidth;
+
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-006.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-006.html
new file mode 100644
index 0000000000..422b730c2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-006.html
@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Last remembered size</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6220">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7527">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7532">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7539">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7564">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7606">
+<meta name="assert" content="Tests that the last remembered size is properly updated or removed" />
+
+<style>
+#target {
+  width: max-content;
+  height: max-content;
+}
+.cis-auto {
+  contain-intrinsic-size: auto 1px auto 2px;
+}
+.skip-contents {
+  content-visibility: hidden;
+}
+.size-100-50 {
+  width: 100px;
+  height: 50px;
+}
+.size-75-25 {
+  width: 75px;
+  height: 25px;
+}
+.vertical {
+  writing-mode: vertical-lr;
+}
+.hidden {
+  display: none;
+}
+.flex {
+  display: flex;
+}
+.inline {
+  display: inline;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="parent">
+  <div id="target">
+    <div id="contents"></div>
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const parent = document.getElementById("parent");
+const target = document.getElementById("target");
+const contents = document.getElementById("contents");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+function cleanup() {
+  parent.className = "";
+  target.className = "";
+  contents.className = "";
+  checkSize(0, 0, "Sizing after cleanup");
+}
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.className = "cis-auto skip-contents";
+  contents.classList.add("size-100-50");
+  checkSize(1, 2, "Size containment with no last remembered size");
+
+  target.classList.remove("skip-contents");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Using last remembered size");
+
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(100, 50, "Still using last remembered size");
+
+  target.classList.remove("skip-contents");
+  checkSize(75, 25, "Sizing normally with different size");
+
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Going back to last remembered size");
+
+  target.classList.remove("skip-contents");
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(75, 25, "Using the new last remembered size");
+}, "Basic usage");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  checkSize(0, 0, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  contents.classList.add("size-100-50");
+  checkSize(0, 0, "Using last remembered size");
+}, "Last remembered size can be 0");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  parent.classList.add("hidden");
+  checkSize(0, 0, "No box");
+
+  await nextRendering();
+  parent.classList.remove("hidden");
+  contents.classList.remove("size-100-50");
+  checkSize(0, 0, "Sizing normally to 0x0");
+
+  await nextRendering();
+  contents.classList.add("size-100-50");
+  target.classList.add("skip-contents");
+  checkSize(0, 0, "Using the new last remembered size");
+}, "Last remembered size can be set to 0 after losing display:none");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  contents.classList.remove("size-100-50");
+  checkSize(100, 50, "Using last remembered size");
+
+  target.classList.add("vertical");
+  checkSize(50, 100, "Last remembered size is logical");
+}, "Last remembered size is logical");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Using last remembered size");
+
+  parent.classList.add("hidden");
+  checkSize(0, 0, "No box");
+
+  await nextRendering();
+  parent.classList.remove("hidden");
+  contents.classList.remove("size-100-50");
+  checkSize(100, 50, "Still using last remembered size");
+}, "Last remembered size survives box destruction");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  contents.classList.remove("size-100-50");
+  checkSize(100, 50, "Using last remembered size");
+
+  target.classList.add("flex");
+  checkSize(100, 50, "Still using last remembered size");
+}, "Last remembered size survives display type changes");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Using last remembered size");
+
+  target.classList.remove("cis-auto");
+  checkSize(0, 0, "Basic size containment");
+
+  await nextRendering();
+  target.classList.add("cis-auto");
+  checkSize(1, 2, "Size containment with no last remembered size");
+}, "Losing cis:auto removes last remembered size");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.remove("cis-auto");
+  checkSize(100, 50, "Sizing normally again");
+
+  await nextRendering();
+  target.classList.add("cis-auto");
+  target.classList.add("skip-contents");
+  checkSize(1, 2, "Size containment with no last remembered size");
+}, "Losing cis:auto removes last remembered size even if size doesn't change");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Using last remembered size");
+
+  target.classList.remove("cis-auto");
+  checkSize(0, 0, "Basic size containment");
+
+  target.classList.add("cis-auto");
+  checkSize(1, 2, "Size containment with no last remembered size");
+}, "Losing cis:auto removes last remembered size immediately");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(100, 50, "Using last remembered size");
+
+  parent.classList.add("hidden");
+  target.classList.remove("cis-auto");
+  target.classList.remove("skip-contents");
+  checkSize(0, 0, "No box");
+
+  await nextRendering();
+  parent.classList.remove("hidden");
+  target.classList.add("cis-auto");
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(75, 25, "Sizing normally with different size");
+
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Going back to last remembered size");
+}, "Losing cis:auto during display:none doesn't remove last remembered size");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(100, 50, "Using last remembered size");
+
+  parent.classList.add("hidden");
+  checkSize(0, 0, "No box");
+
+  await nextRendering();
+  parent.classList.remove("hidden");
+  target.classList.remove("cis-auto");
+  checkSize(0, 0, "Basic size containment");
+
+  target.classList.add("cis-auto");
+  checkSize(1, 2, "Size containment with no last remembered size");
+}, "Lack of cis:auto during box creation removes last remembered size");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(100, 50, "Using last remembered size");
+
+  parent.classList.add("hidden");
+  target.classList.remove("cis-auto");
+  checkSize(0, 0, "No box");
+
+  parent.classList.remove("hidden");
+  checkSize(0, 0, "Basic size containment");
+
+  target.classList.add("cis-auto");
+  checkSize(1, 2, "Size containment with no last remembered size");
+}, "Last remembered size can be removed synchronously");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Using last remembered size");
+
+  target.remove();
+  checkSize(0, 0, "No box");
+
+  parent.appendChild(target);
+  checkSize(100, 50, "Still using last remembered size");
+}, "Disconnected element can briefly keep last remembered size");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(100, 50, "Using last remembered size");
+
+  target.remove();
+  checkSize(0, 0, "No box");
+
+  await nextRendering();
+  parent.appendChild(target);
+  checkSize(1, 2, "Size containment with no last remembered size");
+}, "Disconnected element ends up losing last remembered size");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  checkSize(0, 0, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  target.remove();
+  checkSize(0, 0, "No box");
+
+  await nextRendering();
+  parent.appendChild(target);
+  checkSize(1, 2, "Size containment with no last remembered size");
+}, "Disconnected element ends up losing last remembered size even if size was 0x0");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("inline");
+  checkSize(0, 0, "Non-atomic inline box");
+
+  await nextRendering();
+  target.classList.remove("inline");
+  target.classList.add("skip-contents");
+  contents.classList.remove("size-100-50");
+  checkSize(100, 50, "Still using previous last remembered size");
+}, "Last remembered size survives becoming inline");
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.classList.add("cis-auto");
+  contents.classList.add("size-100-50");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("inline");
+  checkSize(0, 0, "Non-atomic inline box");
+
+  await nextRendering();
+  target.classList.remove("inline");
+  contents.classList.remove("size-100-50");
+  checkSize(0, 0, "Sizing normally to 0x0");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  contents.classList.add("size-100-50");
+  checkSize(0, 0, "Last remembered size is now 0x0");
+}, "Last remembered size can be set to 0x0 after losing display:inline");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-007.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-007.html
new file mode 100644
index 0000000000..02501264c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-007.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Last remembered size</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<meta name="assert" content="Tests that the last remembered size works well in a variety of different elements or boxes." />
+
+<style>
+.test {
+  width: max-content;
+  height: max-content;
+  border: 1px solid;
+}
+.test::before {
+  content: "";
+  display: block;
+  width: 320px;
+  height: 240px;
+}
+.contain-size {
+  contain: size;
+}
+.auto-width {
+  contain-intrinsic-width: auto 1px;
+}
+.auto-height {
+  contain-intrinsic-height: auto 2px;
+}
+.auto-both {
+  contain-intrinsic-size: auto 3px auto 4px;
+}
+.skip-contents .test {
+  content-visibility: hidden;
+}
+.scroll {
+  overflow: scroll;
+}
+.columns {
+  columns: 60px 2;
+}
+.grid {
+  display: grid;
+}
+.flex {
+  display: flex;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="tests">
+  <div></div>
+  <div class="scroll"></div>
+  <div class="columns"></div>
+  <div class="grid"></div>
+  <div class="flex"></div>
+  <fieldset></fieldset>
+  <img src="resources/dice.png">
+  <svg></svg>
+  <canvas></canvas>
+  <iframe></iframe>
+  <video></video>
+  <button></button>
+  <select><option>Lorem ipsum</option></select>
+  <select multiple><option>Lorem ipsum</option></select>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+addEventListener("load", async function() {
+  const wrapper = document.getElementById("tests");
+  const tests = new DocumentFragment();
+  for (let template of wrapper.children) {
+    template.classList.add("test");
+    const autoWidthTest = template.cloneNode(true);
+    const autoHeightTest = template.cloneNode(true);
+    const autoBothTest = template.cloneNode(true);
+    autoWidthTest.classList.add("auto-width");
+    autoHeightTest.classList.add("auto-height");
+    autoBothTest.classList.add("auto-both");
+
+    const normalWidth = template.clientWidth;
+    const normalHeight = template.clientHeight;
+    template.classList.add("contain-size");
+    const containedWidth = template.clientWidth;
+    const containedHeight = template.clientHeight;
+
+    autoWidthTest.dataset.expectedClientWidth = normalWidth;
+    autoWidthTest.dataset.expectedClientHeight = containedHeight;
+    autoHeightTest.dataset.expectedClientWidth = containedWidth;
+    autoHeightTest.dataset.expectedClientHeight = normalHeight;
+    autoBothTest.dataset.expectedClientWidth = normalWidth;
+    autoBothTest.dataset.expectedClientHeight = normalHeight;
+
+    tests.append(autoWidthTest, autoHeightTest, autoBothTest);
+  }
+  wrapper.textContent = "";
+  wrapper.appendChild(tests);
+
+  // Wait so that the last remembered size can be stored.
+  await nextRendering();
+
+  wrapper.classList.add("skip-contents");
+  checkLayout(".test");
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-008.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-008.html
new file mode 100644
index 0000000000..652710192f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-008.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Last remembered size</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">
+<link rel="help" href="https://drafts.csswg.org/resize-observer-1/#html-event-loop">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7659">
+<meta name="assert" content="Tests that the last remembered size is set immediately before invoking ResizeObserver callbacks." />
+
+<style>
+.target {
+  width: max-content;
+  height: max-content;
+  border: 1px solid;
+}
+.target::before {
+  content: "";
+  display: block;
+  width: 100px;
+  height: 50px;
+}
+.cis-auto .target {
+  contain-intrinsic-size: auto 40px auto 20px;
+}
+.skip-contents {
+  content-visibility: hidden;
+}
+</style>
+
+<div id="log"></div>
+
+<div class="target" id="target1"></div>
+<div class="target" id="target2"></div>
+<div class="target" id="target3"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+function checkSize(target, expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+let step = 0;
+
+// Animation frame callbacks are invoked before ResizeObserver callbacks,
+// so the last remembered size shouldn't have been set yet.
+const test1 = async_test("requestAnimationFrame");
+const target1 = document.getElementById("target1");
+function step1(entries, ro) {
+  assert_equals(++step, 1, "Step 1");
+  target1.classList.add("skip-contents");
+  checkSize(target1, 40, 20, "No last remembered size");
+}
+requestAnimationFrame(test1.step_func_done(step1));
+
+// The last remembered size should be set immediately before invoking
+// ResizeObserver callbacks, even if the ResizeObserver is created before
+// laying out an element that can record a last remembered size.
+const test2 = async_test("Early ResizeObserver");
+const target2 = document.getElementById("target2");
+function step2(entries, ro) {
+  assert_equals(++step, 2, "Step 2");
+  ro.disconnect();
+  target2.classList.add("skip-contents");
+  checkSize(target2, 100, 50, "Using last remembered size");
+}
+new ResizeObserver(test2.step_func_done(step2)).observe(target2);
+
+// Let elements record a last remembered size and force layout.
+document.body.classList.add("cis-auto");
+document.body.offsetLeft;
+
+// The last remembered size should also have been set in the callback of
+// a ResizeObserver creater after laying out an element that can record
+// a last remembered size.
+const test3 = async_test("Late ResizeObserver");
+const target3 = document.getElementById("target3");
+function step3(entries, ro) {
+  assert_equals(++step, 3, "Step 3");
+  ro.disconnect();
+  target3.classList.add("skip-contents");
+  checkSize(target3, 100, 50, "Using last remembered size");
+}
+new ResizeObserver(test3.step_func_done(step3)).observe(target3);
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-009.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-009.html
new file mode 100644
index 0000000000..6e17f69e98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-009.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Last remembered size</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7529">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7516">
+<meta name="assert" content="Tests that the last remembered size is tracked independently for each axis." />
+
+<style>
+#target {
+  width: max-content;
+  height: max-content;
+  border: 1px solid;
+}
+#target::before {
+  content: "";
+  display: block;
+}
+.content-100-50::before {
+  width: 100px;
+  height: 50px;
+}
+.content-skip {
+  content-visibility: hidden;
+}
+.ciw-auto-2 {
+  contain-intrinsic-width: auto 2px;
+}
+.ciw-auto-20 {
+  contain-intrinsic-width: auto 20px;
+}
+.cih-auto-1 {
+  contain-intrinsic-height: auto 1px;
+}
+.cih-auto-10 {
+  contain-intrinsic-height: auto 10px;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="target"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const target = document.getElementById("target");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+promise_test(async function() {
+  target.className = "content-100-50 ciw-auto-20";
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.className = "content-skip ciw-auto-2 cih-auto-1";
+  checkSize(100, 1, "Using last remembered inline size");
+}, "Only recording last remembered inline size");
+
+promise_test(async function() {
+  target.className = "content-100-50 cih-auto-10";
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.className = "content-skip ciw-auto-2 cih-auto-1";
+  checkSize(2, 50, "Using last remembered block size");
+}, "Only recording last remembered block size");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-010.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-010.html
new file mode 100644
index 0000000000..03a9056c43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-010.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Last remembered size</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-1/">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7598">
+<meta name="assert" content="Tests that the last remembered size takes all fragments into account." />
+
+<style>
+#wrapper {
+  column-width: 100px;
+  width: max-content;
+  height: 100px;
+}
+#target {
+  width: max-content;
+  height: max-content;
+  background: orange;
+}
+#target::before {
+  content: "";
+  display: block;
+}
+.content-50-150::before {
+  width: 50px;
+  height: 150px;
+}
+.content-50-175::before {
+  width: 50px;
+  height: 175px;
+}
+.content-skip {
+  content-visibility: hidden;
+}
+.cis-auto {
+  contain-intrinsic-size: auto 1px;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="wrapper">
+  <div id="target"></div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const target = document.getElementById("target");
+
+function checkSizes(expectedSizes, msg) {
+  const rects = target.getClientRects();
+  assert_equals(rects.length, expectedSizes.length, msg + " - fragments");
+  for (let i = 0; i < rects.length; ++i) {
+    assert_equals(rects[i].width, expectedSizes[i][0], `${msg} - fragment #${i+1} width`);
+    assert_equals(rects[i].height, expectedSizes[i][1], `${msg} - fragment #${i+1} height`);
+  }
+}
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+promise_test(async function() {
+  target.className = "cis-auto content-50-150";
+  checkSizes([[50, 100], [50, 50]], "Sizing normally");
+
+  await nextRendering();
+  target.className = "cis-auto content-skip";
+  checkSize(50, 150, "Using last remembered size");
+}, "Last remembered size supports multiple fragments");
+
+promise_test(async function() {
+  target.className = "cis-auto content-50-150";
+  checkSizes([[50, 100], [50, 50]], "Sizing normally");
+
+  await nextRendering();
+  target.className = "cis-auto content-50-175";
+  checkSizes([[50, 100], [50, 75]], "Sizing normally with new size");
+
+  await nextRendering();
+  target.className = "cis-auto content-skip";
+  checkSize(50, 175, "Using updated last remembered size");
+}, "Last remembered size is updated when 2nd fragment changes size");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-011.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-011.html
new file mode 100644
index 0000000000..cb82eedf26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-011.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Last remembered size</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7807">
+<meta name="assert" content="Tests that the last remembered size can be updated when the element has size containment but doesn't skip its contents." />
+
+<style>
+#target {
+  width: max-content;
+  height: max-content;
+  border: 1px solid;
+}
+#target::before {
+  content: "";
+  display: block;
+}
+.content-100-50::before {
+  width: 100px;
+  height: 50px;
+}
+.content-skip {
+  content-visibility: hidden;
+}
+.contain-size {
+  contain: size;
+}
+.contain-inline-size {
+  contain: inline-size;
+}
+.ciw-auto-2 {
+  contain-intrinsic-width: auto 2px;
+}
+.ciw-auto-20 {
+  contain-intrinsic-width: auto 20px;
+}
+.cih-auto-1 {
+  contain-intrinsic-height: auto 1px;
+}
+.cih-auto-10 {
+  contain-intrinsic-height: auto 10px;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="target"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const target = document.getElementById("target");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+promise_test(async function() {
+  target.className = "content-100-50";
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.className = "content-100-50 ciw-auto-20 cih-auto-10 contain-size";
+  checkSize(20, 10, "Size containment");
+
+  await nextRendering();
+  target.className = "content-skip ciw-auto-2 cih-auto-1";
+  checkSize(20, 10, "Using last remembered size");
+}, "contain:size does not prevent recording last remembered size");
+
+promise_test(async function() {
+  target.className = "content-100-50";
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.className = "content-100-50 ciw-auto-20 cih-auto-10 contain-inline-size";
+  checkSize(20, 50, "Size containment for inline axis");
+
+  await nextRendering();
+  target.className = "content-skip ciw-auto-2 cih-auto-1";
+  checkSize(20, 50, "Using last remembered block size");
+}, "contain:inline-size does not prevent recording last remembered inline size");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-012.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-012.html
new file mode 100644
index 0000000000..8fd395a224
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-012.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Last remembered size</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7807">
+<meta name="assert" content="Tests that content-visibility:auto, contain:size and contain-intrinsic-size:auto do not result in instable size." />
+
+<style>
+#target {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 100px auto 101px;
+  width: max-content;
+  height: max-content;
+  border: 1px solid;
+}
+#target::before {
+  content: "";
+  display: block;
+  width: 50px;
+  height: 51px;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="spacer"></div>
+<div id="target"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const target = document.getElementById("target");
+const spacer = document.getElementById("spacer");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  test(function() {
+    assert_equals(target.clientWidth, expectedWidth, "clientWidth");
+    assert_equals(target.clientHeight, expectedHeight, "clientHeight");
+  }, msg);
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+setup({explicit_done: true});
+
+(async function() {
+  // Size normally.
+  await nextRendering();
+  checkSize(50, 51, "Sizing normally");
+  await nextRendering();
+
+  // The last remembered size is 50x51, but the element is not skipping
+  // its contents, so the fallback size will be used instead.
+  target.style.contain = "size";
+  checkSize(100, 101, "Sizing with c-i-s fallback");
+  await nextRendering();
+
+  // The last remembered size is now 100x101, but still not using it.
+  spacer.style.height = "10000vh";
+  checkSize(100, 101, "Still sizing with c-i-s fallback");
+  await nextRendering();
+
+  // The element went off-screen, using last remembered size now.
+  // It's important that this is the same as in previous step!
+  checkSize(100, 101, "Sizing with last remembered size");
+  await nextRendering();
+
+  // Change the c-i-s fallback to prove last remembered size is used.
+  target.style.containIntrinsicSize = "auto 150px auto 151px";
+  checkSize(100, 101, "Still sizing with last remembered size");
+
+  // Move the element on-screen. Switch to using c-i-s fallback, and
+  // update the last remembered size.
+  spacer.style.height = "0px";
+  await nextRendering();
+  checkSize(150, 151, "Sizing with new c-i-s fallback");
+  await nextRendering();
+
+  // Move off-screen again. Same size as in previous step!
+  spacer.style.height = "10000vh";
+  await nextRendering();
+  target.style.containIntrinsicSize = "auto 200px auto 201px";
+  checkSize(150, 151, "Sizing with new last remembered size");
+
+  done();
+})();
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-013.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-013.html
new file mode 100644
index 0000000000..8f0144077d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-013.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Last remembered size</title>
+<link rel="author" title="Jihye Hong" href="mailto:jihye@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8407">
+<meta name="assert" content="Tests that content-visibility: auto forces contain-intrinsic-size to gain an auto value." />
+
+<style>
+  #t1 {
+    position: absolute;
+    left: 0vmax;
+    content-visibility: auto;
+    contain-intrinsic-size: 1000vmax 1000vmax;
+    background: red;
+  }
+  #t1::before {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+  }
+</style>
+<div id="t1"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+promise_test(async () => {
+  // Size normally.
+  await nextRendering();
+
+  assert_equals(t1.clientWidth, 10, "Sizing normally: clientWidth");
+  assert_equals(t1.clientHeight, 10, "Sizing normally: clientHeight");
+
+  await nextRendering();
+
+  // Move off-screen the target. Same size as in previous step!
+  t1.style.left = "-200vmax";
+
+  assert_true(window.getComputedStyle(t1).containIntrinsicSize.includes("auto"), "containIntrinsicSize should be adjusted to auto");
+
+  await nextRendering();
+
+  assert_equals(t1.clientWidth, 10, "Sizing with new last remembered size: clientWidth");
+  assert_equals(t1.clientHeight, 10, "Sizing with new last remembered size: clientHeight");
+}, 'content-visibility: auto forces contain-intrinsic-size to gain an auto value');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-014.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-014.html
new file mode 100644
index 0000000000..a3e5769cfa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-014.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>contain-intrinsic-size: auto none</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="Tests that 'contain-intrinsic-size: auto none' respects the auto keyword">
+
+<style>
+#target {
+  width: max-content;
+  height: max-content;
+}
+.cis-auto {
+  contain-intrinsic-size: auto none;
+}
+.skip-contents {
+  content-visibility: hidden;
+}
+.size-100-50 {
+  width: 100px;
+  height: 50px;
+}
+.size-75-25 {
+  width: 75px;
+  height: 25px;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="parent">
+  <div id="target">
+    <div id="contents"></div>
+  </div>
+</div>
+
+<div id="multicol" style="width: max-content; column-count: 2; column-gap: 50px">
+  <div style="width: 100px"></div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const parent = document.getElementById("parent");
+const target = document.getElementById("target");
+const contents = document.getElementById("contents");
+const multicol = document.getElementById("multicol");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+function cleanup() {
+  parent.className = "";
+  target.className = "";
+  contents.className = "";
+  checkSize(0, 0, "Sizing after cleanup");
+}
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  target.className = "cis-auto skip-contents";
+  contents.classList.add("size-100-50");
+  checkSize(0, 0, "Size containment with no last remembered size");
+
+  target.classList.remove("skip-contents");
+  checkSize(100, 50, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Using last remembered size");
+
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(100, 50, "Still using last remembered size");
+
+  target.classList.remove("skip-contents");
+  checkSize(75, 25, "Sizing normally with different size");
+
+  target.classList.add("skip-contents");
+  checkSize(100, 50, "Going back to last remembered size");
+
+  target.classList.remove("skip-contents");
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(75, 25, "Using the new last remembered size");
+}, "Basic usage");
+
+promise_test(async function() {
+  multicol.className = "cis-auto skip-contents";
+
+  assert_equals(multicol.clientWidth, 50, "initial multicolumn clientWidth");
+
+  multicol.classList.remove("skip-contents");
+
+  assert_equals(multicol.clientWidth, 250, "multicolumn clientWidth without content-visibility");
+
+  await nextRendering();
+
+  multicol.classList.add("skip-contents");
+
+  assert_equals(multicol.clientWidth, 250, "multicolumn clientWidth last remembered size");
+}, "Multicol test");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-015.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-015.html
new file mode 100644
index 0000000000..05252dfdda
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-015.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>contain-intrinsic-width: auto none in vertical writing mode</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="Tests that 'contain-intrinsic-width: auto none' respects the auto keyword in vertical writing mode">
+
+<style>
+#target {
+  width: max-content;
+  height: max-content;
+}
+.cis-auto {
+  contain-intrinsic-width: auto none;
+}
+.skip-contents {
+  content-visibility: hidden;
+}
+.size-100-50 {
+  inline-size: 100px;
+  block-size: 50px;
+}
+.size-75-25 {
+  inline-size: 75px;
+  block-size: 25px;
+}
+.vertical {
+  writing-mode: vertical-lr;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="parent">
+  <div id="target">
+    <div id="contents"></div>
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const parent = document.getElementById("parent");
+const target = document.getElementById("target");
+const contents = document.getElementById("contents");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+function cleanup() {
+  parent.className = "";
+  target.className = "";
+  contents.className = "";
+  checkSize(0, 0, "Sizing after cleanup");
+}
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  parent.classList.add("vertical");
+  target.className = "cis-auto skip-contents";
+  contents.classList.add("size-100-50");
+  checkSize(0, 0, "Size containment with no last remembered width");
+
+  target.classList.remove("skip-contents");
+  checkSize(50, 100, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(50, 0, "Using last remembered width");
+
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(50, 0, "Still using last remembered width");
+
+  target.classList.remove("skip-contents");
+  checkSize(25, 75, "Sizing normally with different size");
+
+  target.classList.add("skip-contents");
+  checkSize(50, 0, "Going back to last remembered width");
+
+  target.classList.remove("skip-contents");
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(25, 0, "Using the new last remembered width");
+}, "Basic usage");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-016.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-016.html
new file mode 100644
index 0000000000..5846101614
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-016.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>contain-intrinsic-height: auto none in vertical writing mode</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="Tests that 'contain-intrinsic-height: auto none' respects the auto keyword in vertical writing mode">
+
+<style>
+#target {
+  width: max-content;
+  height: max-content;
+}
+.cis-auto {
+  contain-intrinsic-height: auto none;
+}
+.skip-contents {
+  content-visibility: hidden;
+}
+.size-100-50 {
+  inline-size: 100px;
+  block-size: 50px;
+}
+.size-75-25 {
+  inline-size: 75px;
+  block-size: 25px;
+}
+.vertical {
+  writing-mode: vertical-lr;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="parent">
+  <div id="target">
+    <div id="contents"></div>
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const parent = document.getElementById("parent");
+const target = document.getElementById("target");
+const contents = document.getElementById("contents");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+function cleanup() {
+  parent.className = "";
+  target.className = "";
+  contents.className = "";
+  checkSize(0, 0, "Sizing after cleanup");
+}
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  parent.classList.add("vertical");
+  target.className = "cis-auto skip-contents";
+  contents.classList.add("size-100-50");
+  checkSize(0, 0, "Size containment with no last remembered heigth");
+
+  target.classList.remove("skip-contents");
+  checkSize(50, 100, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(0, 100, "Using last remembered heigth");
+
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(0, 100, "Still using last remembered heigth");
+
+  target.classList.remove("skip-contents");
+  checkSize(25, 75, "Sizing normally with different size");
+
+  target.classList.add("skip-contents");
+  checkSize(0, 100, "Going back to last remembered heigth");
+
+  target.classList.remove("skip-contents");
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(0, 75, "Using the new last remembered heigth");
+}, "Basic usage");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-017.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-017.html
new file mode 100644
index 0000000000..669f9505d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-017.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>contain-intrinsic-width: auto length in vertical writing mode</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="Tests that 'contain-intrinsic-width: auto length' respects the auto keyword in vertical writing mode">
+
+<style>
+#target {
+  width: max-content;
+  height: max-content;
+}
+.cis-auto {
+  contain-intrinsic-width: auto 2px;
+}
+.skip-contents {
+  content-visibility: hidden;
+}
+.size-100-50 {
+  inline-size: 100px;
+  block-size: 50px;
+}
+.size-75-25 {
+  inline-size: 75px;
+  block-size: 25px;
+}
+.vertical {
+  writing-mode: vertical-lr;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="parent">
+  <div id="target">
+    <div id="contents"></div>
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const parent = document.getElementById("parent");
+const target = document.getElementById("target");
+const contents = document.getElementById("contents");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+function cleanup() {
+  parent.className = "";
+  target.className = "";
+  contents.className = "";
+  checkSize(0, 0, "Sizing after cleanup");
+}
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  parent.classList.add("vertical");
+  target.className = "cis-auto skip-contents";
+  contents.classList.add("size-100-50");
+  checkSize(2, 0, "Size containment with no last remembered width");
+
+  target.classList.remove("skip-contents");
+  checkSize(50, 100, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(50, 0, "Using last remembered width");
+
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(50, 0, "Still using last remembered width");
+
+  target.classList.remove("skip-contents");
+  checkSize(25, 75, "Sizing normally with different size");
+
+  target.classList.add("skip-contents");
+  checkSize(50, 0, "Going back to last remembered width");
+
+  target.classList.remove("skip-contents");
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(25, 0, "Using the new last remembered width");
+}, "Basic usage");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-018.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-018.html
new file mode 100644
index 0000000000..b5121c67f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-018.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>contain-intrinsic-height: auto length in vertical writing mode</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="Tests that 'contain-intrinsic-height: auto length' respects the auto keyword in vertical writing mode">
+
+<style>
+#target {
+  width: max-content;
+  height: max-content;
+}
+.cis-auto {
+  contain-intrinsic-height: auto 2px;
+}
+.skip-contents {
+  content-visibility: hidden;
+}
+.size-100-50 {
+  inline-size: 100px;
+  block-size: 50px;
+}
+.size-75-25 {
+  inline-size: 75px;
+  block-size: 25px;
+}
+.vertical {
+  writing-mode: vertical-lr;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="parent">
+  <div id="target">
+    <div id="contents"></div>
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const parent = document.getElementById("parent");
+const target = document.getElementById("target");
+const contents = document.getElementById("contents");
+
+function checkSize(expectedWidth, expectedHeight, msg) {
+  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
+  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
+}
+
+function nextRendering() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+function cleanup() {
+  parent.className = "";
+  target.className = "";
+  contents.className = "";
+  checkSize(0, 0, "Sizing after cleanup");
+}
+
+promise_test(async function() {
+  this.add_cleanup(cleanup);
+  parent.classList.add("vertical");
+  target.className = "cis-auto skip-contents";
+  contents.classList.add("size-100-50");
+  checkSize(0, 2, "Size containment with no last remembered heigth");
+
+  target.classList.remove("skip-contents");
+  checkSize(50, 100, "Sizing normally");
+
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(0, 100, "Using last remembered heigth");
+
+  contents.classList.remove("size-100-50");
+  contents.classList.add("size-75-25");
+  checkSize(0, 100, "Still using last remembered heigth");
+
+  target.classList.remove("skip-contents");
+  checkSize(25, 75, "Sizing normally with different size");
+
+  target.classList.add("skip-contents");
+  checkSize(0, 100, "Going back to last remembered heigth");
+
+  target.classList.remove("skip-contents");
+  await nextRendering();
+  target.classList.add("skip-contents");
+  checkSize(0, 75, "Using the new last remembered heigth");
+}, "Basic usage");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001-ref.html
new file mode 100644
index 0000000000..299930ac35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: unsized div</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  background: lightblue;
+  height: 222px;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html
new file mode 100644
index 0000000000..86f141e087
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-001.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: unsized div</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-001-ref.html">
+<meta name="assert" content="contain-intrinsic-size is used to size the div as if it had a single child of this size">
+
+<style>
+#target {
+  background: lightblue;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002-ref.html
new file mode 100644
index 0000000000..a2fc6a0731
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: div with max-content parent</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#border {
+  width: max-content;
+  border: 1px solid black;
+}
+#target {
+  background: lightblue;
+  width: 111px;
+  height: 222px;
+}
+</style>
+
+<div id=border>
+  <div id=target></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002.html
new file mode 100644
index 0000000000..cef3ed27ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-002.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: div with max-content parent</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-002-ref.html">
+<meta name="assert" content="contain-intrinsic-size is used to size the div, with parent's max-content width respecting it">
+
+<style>
+#border {
+  width: max-content;
+  border: 1px solid black;
+}
+#target {
+  background: lightblue;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+}
+</style>
+
+<div id=border>
+  <div id=target></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003-ref.html
new file mode 100644
index 0000000000..dab2739460
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: width specified</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  background: lightblue;
+  width: 50px;
+  height: 222px;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003.html
new file mode 100644
index 0000000000..a56d02b316
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-003.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: width specified</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-003-ref.html">
+<meta name="assert" content="contain-intrinsic-size's width is ignored if width is specified">
+
+<style>
+#target {
+  background: lightblue;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+  width: 50px;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004-ref.html
new file mode 100644
index 0000000000..5f896803e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: width is min-content</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  background: lightblue;
+  width: 111px;
+  height: 222px;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004.html
new file mode 100644
index 0000000000..dd1055d768
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-004.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: width is min-content</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-004-ref.html">
+<meta name="assert" content="div is sized to intrinsic-width if width is min-content">
+
+<style>
+#target {
+  background: lightblue;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+  width: min-content;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005-ref.html
new file mode 100644
index 0000000000..0940a6f702
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: width is max-content</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  background: lightblue;
+  width: 111px;
+  height: 222px;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005.html
new file mode 100644
index 0000000000..b5f019b042
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-005.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: width is max-content</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-004-ref.html">
+<meta name="assert" content="div is sized to intrinsic-width if width is max-content">
+
+<style>
+#target {
+  background: lightblue;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+  width: max-content;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006-ref.html
new file mode 100644
index 0000000000..9d3912dafe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: unsized div, intrinsic-size is small</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  background: lightblue;
+  height: 6px;
+  contain: size;
+}
+</style>
+
+<div id=target>Lorem ipsum</div>
+
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006.html
new file mode 100644
index 0000000000..6dd0e47729
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-006.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: unsized div, intrinsic-size is small</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-006-ref.html">
+<meta name="assert" content="content dimensions are ignored if intrinsic-size is specified">
+
+<style>
+#target {
+  background: lightblue;
+  contain-intrinsic-size: 5px 6px;
+  contain: size;
+}
+</style>
+
+<div id=target>Lorem ipsum</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007-ref.html
new file mode 100644
index 0000000000..c372f2dfce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: div with border</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#border {
+  border: 1px solid blue;
+  width: max-content;
+}
+
+#target {
+  background: lightblue;
+  box-sizing: content-box;
+  width: 55px;
+  height: 66px;
+
+  border-style: solid;
+  border-color: black;
+  border-width: 2px 3px 5px 7px;
+}
+</style>
+
+<div id=border>
+  <div id=target></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007.html
new file mode 100644
index 0000000000..838836c3a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-007.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: div with border</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-007-ref.html">
+<meta name="assert" content="contain-intrinsic-size sizes the content box, not the border box">
+
+<style>
+#border {
+  border: 1px solid blue;
+  width: max-content;
+}
+
+#target {
+  background: lightblue;
+  contain-intrinsic-size: 55px 66px;
+  contain: size;
+  border-style: solid;
+  border-color: black;
+  border-width: 2px 3px 5px 7px;
+}
+</style>
+
+<div id=border>
+  <div id=target></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008-ref.html
new file mode 100644
index 0000000000..af20b26a39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008-ref.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: writing modes</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.border {
+  border: 1px solid blue;
+  width: max-content;
+  margin: 5px;
+}
+
+.box {
+  background: lightblue;
+  box-sizing: content-box;
+  width: 55px;
+  height: 66px;
+  border-style: solid;
+  border-color: black;
+  border-width: 2px 3px 5px 7px;
+  padding: 11px 13px 17px 19px;
+}
+.verticalrl {
+  writing-mode: vertical-rl;
+}
+.verticallr {
+  writing-mode: vertical-lr;
+}
+.horizontaltb {
+  writing-mode: horizontal-tb;
+}
+</style>
+
+<div class=border><div class="box verticalrl">Lorem</div></div>
+<div class=border><div class="box verticallr">Ipsum</div></div>
+<div class=border><div class="box horizontaltb">Dolor</div></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008.html
new file mode 100644
index 0000000000..ac265ad7b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-008.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: writing modes</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-008-ref.html">
+<meta name="assert" content="contain-intrinsic-size specifies physical dimensions, and respects writing modes">
+
+<style>
+.border {
+  border: 1px solid blue;
+  width: max-content;
+  margin: 5px;
+}
+
+.box {
+  background: lightblue;
+  contain-intrinsic-size: 55px 66px;
+  contain: size;
+  border-style: solid;
+  border-color: black;
+  border-width: 2px 3px 5px 7px;
+  padding: 11px 13px 17px 19px;
+}
+.verticalrl {
+  writing-mode: vertical-rl;
+}
+.verticallr {
+  writing-mode: vertical-lr;
+}
+.horizontaltb {
+  writing-mode: horizontal-tb;
+}
+</style>
+
+<div class=border><div class="box verticalrl">Lorem</div></div>
+<div class=border><div class="box verticallr">Ipsum</div></div>
+<div class=border><div class="box horizontaltb">Dolor</div></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-009.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-009.html
new file mode 100644
index 0000000000..0aa62eaaef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-009.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS contain-intrinsic-size: select multiple</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="contain-intrinsic-size sizes select multiple">
+
+<style>
+.cis-both {
+  contain-intrinsic-size: 55px 66px;
+}
+
+.cis-width {
+  contain-intrinsic-size: 55px none;
+}
+
+.cis-height {
+  contain-intrinsic-size: none 66px;
+}
+
+select {
+  padding: 0;
+}
+
+.test {
+  contain: size;
+  background: lightblue;
+  border: 1px solid blue;
+  margin: 5px;
+}
+</style>
+
+<!-- To measure the size of an empty <select> without size containment -->
+<select id="reference" multiple size="1"></select>
+
+<select multiple class="test cis-both"
+data-expected-client-width="55" data-expected-client-height="66"></select>
+<select multiple class="test cis-width"
+data-expected-client-width="55"></select>
+<select multiple class="test cis-height"
+data-expected-client-height="66"></select>
+
+<select multiple size="1" class="test cis-width"
+data-expected-client-width="55"></select>
+<select multiple size="1" class="test cis-height"
+data-expected-client-height="66"></select>
+
+<select multiple size="10" class="test cis-width"
+data-expected-client-width="55"></select>
+<select multiple size="10" class="test cis-height"
+data-expected-client-height="66"></select>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+const reference = document.getElementById("reference");
+const normalWidth = reference.clientWidth;
+for (let test of document.querySelectorAll(".test.cis-width")) {
+  reference.size = test.size || 4;
+  test.dataset.expectedClientHeight = reference.clientHeight;
+}
+for (let test of document.querySelectorAll(".test.cis-height")) {
+  test.dataset.expectedClientWidth = normalWidth;
+ }
+
+checkLayout('.test');
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010-ref.html
new file mode 100644
index 0000000000..950ddd1f89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010-ref.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: flex row</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#flex {
+  display: flex;
+  flex-direction: row;
+  width: 500px;
+  height: 100px;
+}
+.item {
+  border: 1px solid black;
+  box-sizing: content-box;
+}
+#one {
+  background: lightblue;
+  width: 55px;
+  flex-grow: 3;
+}
+#two {
+  background: lightgreen;
+  width: 66px;
+  flex-grow: 2;
+}
+#three {
+  background: lightgrey;
+  width: 77px;
+  flex-grow: 1;
+}
+</style>
+
+<div id=flex>
+  <div class=item id=one></div>
+  <div class=item id=two></div>
+  <div class=item id=three></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010.html
new file mode 100644
index 0000000000..f5df500e8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-010.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: flex row</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-010-ref.html">
+<meta name="assert" content="items are flexed correctly when they are sized by intrinsic-size in a flex row">
+
+<style>
+#flex {
+  display: flex;
+  flex-direction: row;
+  width: 500px;
+  height: 100px;
+}
+.item {
+  border: 1px solid black;
+}
+#one {
+  background: lightblue;
+  contain-intrinsic-size: 55px 11px;
+  contain: size;
+  flex-grow: 3;
+}
+#two {
+  background: lightgreen;
+  contain-intrinsic-size: 66px 22px;
+  contain: size;
+  flex-grow: 2;
+}
+#three {
+  background: lightgrey;
+  contain-intrinsic-size: 77px 33px;
+  contain: size;
+  flex-grow: 1;
+}
+</style>
+
+<div id=flex>
+  <div class=item id=one></div>
+  <div class=item id=two></div>
+  <div class=item id=three></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011-ref.html
new file mode 100644
index 0000000000..68d1fbe408
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011-ref.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: flex column</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#flex {
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+  height: 200px;
+}
+.item {
+  border: 1px solid black;
+  box-sizing: content-box;
+}
+#one {
+  background: lightblue;
+  height: 11px;
+  flex-grow: 3;
+}
+#two {
+  background: lightgreen;
+  height: 22px;
+  flex-grow: 2;
+}
+#three {
+  background: lightgrey;
+  height: 33px;
+  flex-grow: 1;
+}
+</style>
+
+<div id=flex>
+  <div class=item id=one></div>
+  <div class=item id=two></div>
+  <div class=item id=three></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011.html
new file mode 100644
index 0000000000..de35326629
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-011.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: flex column</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-011-ref.html">
+<meta name="assert" content="items are flexed correctly when they are sized by intrinsic-size in a flex column">
+
+<style>
+#flex {
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+  height: 200px;
+}
+.item {
+  border: 1px solid black;
+}
+#one {
+  background: lightblue;
+  contain-intrinsic-size: 55px 11px;
+  contain: size;
+  flex-grow: 3;
+}
+#two {
+  background: lightgreen;
+  contain-intrinsic-size: 66px 22px;
+  contain: size;
+  flex-grow: 2;
+}
+#three {
+  background: lightgrey;
+  contain-intrinsic-size: 77px 33px;
+  contain: size;
+  flex-grow: 1;
+}
+</style>
+
+<div id=flex>
+  <div class=item id=one></div>
+  <div class=item id=two></div>
+  <div class=item id=three></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012-ref.html
new file mode 100644
index 0000000000..4b0fe755b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: replaced content</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  width: 100px;
+  height: 200px;
+}
+</style>
+
+<img id=target src="resources/dice.png"></img>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012.html
new file mode 100644
index 0000000000..54a49c1856
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-012.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: replaced content</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-012-ref.html">
+<meta name="assert" content="contain-intrinsic-size overrides replaced content's intrinsic dimensions">
+
+<style>
+#target {
+  contain-intrinsic-size: 100px 200px;
+  contain: size;
+}
+</style>
+
+<img id=target src="resources/dice.png"></img>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013-ref.html
new file mode 100644
index 0000000000..7a0b5788ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: intrinsic-size changes</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#border {
+  width: max-content;
+  border: 1px solid black;
+}
+#border > div {
+  width: 77px;
+  height: 88px;
+}
+</style>
+
+<div id=border><div id=target></div></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013.html
new file mode 100644
index 0000000000..370398042f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-013.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: intrinsic-size changes.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-013-ref.html">
+<meta name="assert" content="changes in intrinsic-size cause reflow">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#border {
+  width: max-content;
+  border: 1px solid black;
+}
+#border > div {
+  contain-intrinsic-size: 55px 66px;
+  contain: size;
+}
+</style>
+
+<div id=border><div id=target></div></div>
+
+<script>
+function changeStyle() {
+  document.getElementById("target").style = "contain-intrinsic-size: 77px 88px;";
+  requestAnimationFrame(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(changeStyle));
+
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014-ref.html
new file mode 100644
index 0000000000..72a24c7a59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: fieldset</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+fieldset {
+  box-sizing: content-box;
+  width: 111px;
+  height: 222px;
+}
+</style>
+
+<fieldset>
+  <legend>This is a legend</legend>
+  This is some content.
+</fieldset>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014.html
new file mode 100644
index 0000000000..d268264d28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-014.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: fieldset</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-014-ref.html">
+<meta name="assert" content="contain-intrinsic-size sizes fieldsets">
+
+<style>
+fieldset {
+  width: max-content;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+}
+</style>
+
+<fieldset>
+  <legend>This is a legend</legend>
+  This is some content.
+</fieldset>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015-ref.html
new file mode 100644
index 0000000000..76abf0c14b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS contain-intrinsic-size: inline flex</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<style>
+div {
+  display: inline-flex;
+  border: 5px solid green;
+  width: 111px;
+  height: 222px;
+  box-sizing: content-box;
+}
+</style>
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015.html
new file mode 100644
index 0000000000..8eda4b8845
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-015.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS contain-intrinsic-size: inline flex</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="contain-intrinsic-size-015-ref.html">
+<meta name="assert" content="contain-intrinsic-size sizes an inline-flex element">
+<style>
+div {
+  display: inline-flex;
+  border: 5px solid green;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+  color: transparent;
+}
+</style>
+
+<div>test</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016-ref.html
new file mode 100644
index 0000000000..029159390a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016-ref.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: flex row, items with size containment (ref)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#flex {
+  display: flex;
+  flex-direction: row;
+  width: 500px;
+  height: 100px;
+}
+.item {
+  border: 1px solid black;
+  box-sizing: content-box;
+}
+#one {
+  background: lightblue;
+  width: 55px;
+  flex-grow: 3;
+}
+#two {
+  background: lightgreen;
+  width: 66px;
+  flex-grow: 2;
+}
+#three {
+  background: lightgrey;
+  width: 77px;
+  flex-grow: 1;
+}
+</style>
+
+<div id=flex>
+  <div class=item id=one></div>
+  <div class=item id=two></div>
+  <div class=item id=three></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016.html
new file mode 100644
index 0000000000..fabc48d4a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-016.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: flex row, items with size containment</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-016-ref.html">
+<meta name="assert" content="contain-intrinsic-size take 'priority' over size-containment in flex">
+
+<style>
+#flex {
+  display: flex;
+  flex-direction: row;
+  width: 500px;
+  height: 100px;
+}
+.item {
+  border: 1px solid black;
+  contain: size;
+}
+#one {
+  background: lightblue;
+  contain-intrinsic-size: 55px 11px;
+  contain: size;
+  flex-grow: 3;
+}
+#two {
+  background: lightgreen;
+  contain-intrinsic-size: 66px 22px;
+  contain: size;
+  flex-grow: 2;
+}
+#three {
+  background: lightgrey;
+  contain-intrinsic-size: 77px 33px;
+  contain: size;
+  flex-grow: 1;
+}
+</style>
+
+<div id=flex>
+  <div class=item id=one></div>
+  <div class=item id=two></div>
+  <div class=item id=three></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017-ref.html
new file mode 100644
index 0000000000..49f7499fe8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017-ref.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: replaced content (vertical-lr)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+body {
+  writing-mode: vertical-lr;
+}
+#target {
+  width: 100px;
+  height: 200px;
+}
+</style>
+
+<img id=target src="resources/dice.png"></img>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017.html
new file mode 100644
index 0000000000..5ce15eba59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-017.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: replaced content (vertical-lr)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-017-ref.html">
+<meta name="assert" content="contain-intrinsic-size specifies physical dimensions on replaced content">
+
+<style>
+body {
+  writing-mode: vertical-lr;
+}
+#target {
+  contain-intrinsic-size: 100px 200px;
+  contain: size;
+  inline-size: min-content;
+  block-size: auto;
+}
+</style>
+
+<img id=target src="resources/dice.png"></img>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018-ref.html
new file mode 100644
index 0000000000..537001d6d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: sized div</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  background: lightblue;
+  width: 55px;
+  height: 66px;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018.html
new file mode 100644
index 0000000000..649e83364f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-018.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: sized div</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-018-ref.html">
+<meta name="assert" content="width / height ignore intrinsic-size">
+
+<style>
+#target {
+  background: lightblue;
+  width: 55px;
+  height: 66px;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019-ref.html
new file mode 100644
index 0000000000..172c78177b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: div with fit-content width</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  background: lightblue;
+  width: 111px;
+  height: 222px;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019.html
new file mode 100644
index 0000000000..4ba1bed9de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-019.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: div with fit-content width</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-019-ref.html">
+<meta name="assert" content="div is sized to intrinsic-width when width is fit-content">
+
+<style>
+#target {
+  background: lightblue;
+  contain-intrinsic-size: 111px 222px;
+  contain: size;
+  width: fit-content;
+}
+</style>
+
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020-ref.html
new file mode 100644
index 0000000000..c4f34e84f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: replaced content (min-content)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#target {
+  width: 100px;
+  height: 200px;
+}
+</style>
+
+<img id=target src="resources/dice.png"></img>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020.html
new file mode 100644
index 0000000000..42482abf0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-020.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: replaced content (min-content)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-020-ref.html">
+<meta name="assert" content="replaced content is sized to intrinsic-width when width is min-content">
+
+<style>
+#target {
+  contain-intrinsic-size: 100px 200px;
+  contain: size;
+  inline-size: min-content;
+  block-size: auto;
+}
+</style>
+
+<img id=target src="resources/dice.png"></img>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021-ref.html
new file mode 100644
index 0000000000..6019652087
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021-ref.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: flex row, flex height based on children</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 250px;
+}
+.item {
+  border: 1px solid black;
+  box-sizing: content-box;
+}
+#one {
+  background: lightblue;
+  width: 55px;
+  height: 21px;
+}
+#two {
+  background: lightgreen;
+  width: 66px;
+  height: 42px;
+}
+#three {
+  background: lightgrey;
+  align-self: stretch;
+  width: 77px;
+  height: 63px;
+}
+</style>
+
+<div id=flex>
+  <div class=item id=one></div>
+  <div class=item id=two></div>
+  <div class=item id=three></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021.html
new file mode 100644
index 0000000000..12f9398420
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-021.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: flex row, flex height based on children</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-021-ref.html">
+<meta name="assert" content="flex container is sized by the largest intrinsic-height of content, even with align-self: stretch">
+
+<style>
+#flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 250px;
+}
+.item {
+  border: 1px solid black;
+}
+#one {
+  background: lightblue;
+  contain-intrinsic-size: 55px 21px;
+  contain: size;
+}
+#two {
+  background: lightgreen;
+  contain-intrinsic-size: 66px 42px;
+  contain: size;
+}
+#three {
+  background: lightgrey;
+  align-self: stretch;
+  contain-intrinsic-size: 77px 63px;
+  contain: size;
+}
+</style>
+
+<div id=flex>
+  <div class=item id=one></div>
+  <div class=item id=two></div>
+  <div class=item id=three></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022-ref.html
new file mode 100644
index 0000000000..81991fb17c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022-ref.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid definite size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  box-sizing: content-box;
+  width: 70px;
+  height: 80px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022.html
new file mode 100644
index 0000000000..5f58851748
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-022.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid definite size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-022-ref.html">
+<meta name="assert" content="grid container is sized by intrinsic-size, even if definite track sizes overflow">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  contain-intrinsic-size: 70px 80px;
+  contain: size;
+  width: max-content;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023-ref.html
new file mode 100644
index 0000000000..eccbecb6c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid indefinite size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 1fr 2fr / 3fr 4fr;
+  box-sizing: content-box;
+  width: 70px;
+  height: 80px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023.html
new file mode 100644
index 0000000000..f8e3a607f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-023.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid indefinite size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-023-ref.html">
+<meta name="assert" content="grid container is sized by intrinsic-size, with fr-tracks using that space">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 1fr 2fr / 3fr 4fr;
+  contain-intrinsic-size: 70px 80px;
+  contain: size;
+  width: max-content;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024-ref.html
new file mode 100644
index 0000000000..e2f53b6570
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024-ref.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid definite size, large size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  box-sizing: content-box;
+  width: 200px;
+  height: 300px;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024.html
new file mode 100644
index 0000000000..f6305d438b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-024.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid definite size, large size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-024-ref.html">
+<meta name="assert" content="contain-intrinsic-size sizes grid container, even if definite tracks are smaller">
+
+<style>
+#grid {
+  border: 3px solid black;
+  display: grid;
+  grid-template: 55px 66px / 77px 88px;
+  contain-intrinsic-size: 200px 300px;
+  contain: size;
+  width: max-content;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.item {
+  background: lightgreen;
+  opacity: 0.5;
+  height: 100%;
+}
+</style>
+
+<div id=grid>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025-ref.html
new file mode 100644
index 0000000000..fbb1ce8868
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025-ref.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid indefinite size, auto-fit</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  width: 70px;
+  height: 80px;
+  box-sizing: content-box;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  grid-template: repeat(8, 10px) / 3fr 4fr;
+}
+.two {
+  grid-template: 1fr 2fr / repeat(3, 15px);
+}
+.three {
+  grid-template: repeat(8, 10px) / repeat(3, 15px);
+}
+
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid three">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025.html
new file mode 100644
index 0000000000..5557fcc8d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid indefinite size, auto-fit</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-025-ref.html">
+<meta name="assert" content="definite size auto-fit uses intrinsic-size for the available space">
+
+<style>
+.grid {
+  border: 3px solid black;
+  display: grid;
+  contain-intrinsic-size: 70px 80px;
+  contain: size;
+  width: max-content;
+  background: lightblue;
+  grid-gap: 5px;
+}
+.one {
+  grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
+}
+.two {
+  grid-template: 1fr 2fr / repeat(auto-fit, 15px);
+}
+.three {
+  grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
+}
+
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<div class="grid one">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid two">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
+<div class="grid three">
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026-ref.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026-ref.html
new file mode 100644
index 0000000000..3bf3a288f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026-ref.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid auto-fit, min- max- size interactions</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+
+<style>
+.grid {
+  display: inline-grid;
+  border: 1px solid black;
+  grid-template-columns: repeat(auto-fit, 100px);
+  height: 40px;
+}
+.one {
+  width: 200px;
+}
+.two {
+  width: 200px;
+}
+.three {
+  width: 200px;
+}
+.four {
+  width: 150px;
+}
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<p>min-width larger than contain-intrinsic-width:
+<div class="grid one">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>min-width smaller than contain-intrinsic-width:
+<div class="grid two">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>max-width ignored since min-width is larger:
+<div class="grid three">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>min-width shrinks grid since it overrides contain-intrinsic-width:
+<div class="grid four">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026.html
new file mode 100644
index 0000000000..c9f3f1aa38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-026.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: grid auto-fit, min- max- size interactions</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="contain-intrinsic-size-026-ref.html">
+<meta name="assert" content="auto-fit columns, with intrinsic-size interacting with min- and max- width">
+
+<style>
+.grid {
+  display: inline-grid;
+  border: 1px solid black;
+  grid-template-columns: repeat(auto-fit, 100px);
+  height: 40px;
+}
+.one {
+  contain-intrinsic-size: 100px;
+  contain: size;
+  min-width: 200px;
+}
+.two {
+  contain-intrinsic-size: 200px;
+  contain: size;
+  min-width: 100px;
+}
+.three {
+  contain-intrinsic-size: 100px;
+  contain: size;
+  min-width: 200px;
+  max-width: 150px;
+}
+.four {
+  contain-intrinsic-size: 200px;
+  contain: size;
+  min-width: 100px;
+  max-width: 150px;
+}
+.item {
+  background: green;
+  height: 100%;
+}
+</style>
+
+<p>min-width larger than contain-intrinsic-width:
+<div class="grid one">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>min-width smaller than contain-intrinsic-width:
+<div class="grid two">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>max-width ignored since min-width is larger:
+<div class="grid three">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
+
+<p>min-width shrinks grid since it overrides contain-intrinsic-width:
+<div class="grid four">
+  <div class="item">one</div>
+  <div class="item">two</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-027.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-027.html
new file mode 100644
index 0000000000..61581e893f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-027.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: aspect-ratio interaction</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5241">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="contain-intrinsic-size doesn't establish an aspect-ratio">
+
+<p>Test passes if there is a filled green square.</p>
+
+<!-- Use flex because a bug in blink's layout_replaced size computation makes
+  this test pass even when blink makes c-i-s establish an aspect ratio. Flex
+  doesn't use layout_replaced sizing, so it bypasses the bug. -->
+<!-- min-width: 0 is just so we don't have to think about it. -->
+<div style="display: flex;">
+  <img src="/css/support/60x60-green.png" style="min-width: 0px; contain: size; contain-intrinsic-size: 50px 100px; width: 100px;">
+</div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-028.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-028.html
new file mode 100644
index 0000000000..15e8e0e891
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-028.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: single axis size containment</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
+<style>
+.test {
+  contain: inline-size;
+  display: inline-block;
+  background: green;
+}
+.test::before {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 20px;
+}
+.cis-none {
+  contain-intrinsic-size: none none;
+}
+.cis-height {
+  contain-intrinsic-size: none 50px;
+}
+.cis-width {
+  contain-intrinsic-size: 100px none;
+}
+.cis-both {
+  contain-intrinsic-size: 100px 50px;
+}
+.vertical {
+  writing-mode: vertical-lr;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.test')">
+  <div id="log"></div>
+
+  <div class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="20"></div>
+  <div class="test cis-height"
+       data-expected-client-width="0" data-expected-client-height="20"></div>
+  <div class="test cis-width"
+       data-expected-client-width="100" data-expected-client-height="20"></div>
+  <div class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="20"></div>
+
+  <div class="test cis-none vertical"
+       data-expected-client-width="40" data-expected-client-height="0"></div>
+  <div class="test cis-height vertical"
+       data-expected-client-width="40" data-expected-client-height="50"></div>
+  <div class="test cis-width vertical"
+       data-expected-client-width="40" data-expected-client-height="0"></div>
+  <div class="test cis-both vertical"
+       data-expected-client-width="40" data-expected-client-height="50"></div>
+
+  <hr>
+
+  <img class="test cis-none" src="/css/support/60x60-green.png"
+       data-expected-client-width="0" data-expected-client-height="60">
+  <img class="test cis-height" src="/css/support/60x60-green.png"
+       data-expected-client-width="0" data-expected-client-height="60">
+  <img class="test cis-width" src="/css/support/60x60-green.png"
+       data-expected-client-width="100" data-expected-client-height="60">
+  <img class="test cis-both" src="/css/support/60x60-green.png"
+       data-expected-client-width="100" data-expected-client-height="60">
+
+  <img class="test cis-none vertical" src="/css/support/60x60-green.png"
+       data-expected-client-width="60" data-expected-client-height="0">
+  <img class="test cis-height vertical" src="/css/support/60x60-green.png"
+       data-expected-client-width="60" data-expected-client-height="50">
+  <img class="test cis-width vertical" src="/css/support/60x60-green.png"
+       data-expected-client-width="60" data-expected-client-height="0">
+  <img class="test cis-both vertical" src="/css/support/60x60-green.png"
+       data-expected-client-width="60" data-expected-client-height="50">
+
+  <hr>
+
+  <svg class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="150"></svg>
+  <svg class="test cis-height"
+       data-expected-client-width="0" data-expected-client-height="150"></svg>
+  <svg class="test cis-width"
+       data-expected-client-width="100" data-expected-client-height="150"></svg>
+  <svg class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="150"></svg>
+
+  <svg class="test cis-none vertical"
+       data-expected-client-width="300" data-expected-client-height="0"></svg>
+  <svg class="test cis-height vertical"
+       data-expected-client-width="300" data-expected-client-height="50"></svg>
+  <svg class="test cis-width vertical"
+       data-expected-client-width="300" data-expected-client-height="0"></svg>
+  <svg class="test cis-both vertical"
+       data-expected-client-width="300" data-expected-client-height="50"></svg>
+
+  <hr>
+
+  <canvas class="test cis-none" width="40" height="20"
+       data-expected-client-width="0" data-expected-client-height="20"></canvas>
+  <canvas class="test cis-height" width="40" height="20"
+       data-expected-client-width="0" data-expected-client-height="20"></canvas>
+  <canvas class="test cis-width" width="40" height="20"
+       data-expected-client-width="100" data-expected-client-height="20"></canvas>
+  <canvas class="test cis-both" width="40" height="20"
+       data-expected-client-width="100" data-expected-client-height="20"></canvas>
+
+  <canvas class="test cis-none vertical" width="40" height="20"
+       data-expected-client-width="40" data-expected-client-height="0"></canvas>
+  <canvas class="test cis-height vertical" width="40" height="20"
+       data-expected-client-width="40" data-expected-client-height="50"></canvas>
+  <canvas class="test cis-width vertical" width="40" height="20"
+       data-expected-client-width="40" data-expected-client-height="0"></canvas>
+  <canvas class="test cis-both vertical" width="40" height="20"
+       data-expected-client-width="40" data-expected-client-height="50"></canvas>
+
+  <hr>
+
+  <iframe class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="150"></iframe>
+  <iframe class="test cis-height"
+       data-expected-client-width="0" data-expected-client-height="150"></iframe>
+  <iframe class="test cis-width"
+       data-expected-client-width="100" data-expected-client-height="150"></iframe>
+  <iframe class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="150"></iframe>
+
+  <iframe class="test cis-none vertical"
+       data-expected-client-width="300" data-expected-client-height="0"></iframe>
+  <iframe class="test cis-height vertical"
+       data-expected-client-width="300" data-expected-client-height="50"></iframe>
+  <iframe class="test cis-width vertical"
+       data-expected-client-width="300" data-expected-client-height="0"></iframe>
+  <iframe class="test cis-both vertical"
+       data-expected-client-width="300" data-expected-client-height="50"></iframe>
+
+  <hr>
+
+  <video class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="150"></video>
+  <video class="test cis-height"
+       data-expected-client-width="0" data-expected-client-height="150"></video>
+  <video class="test cis-width"
+       data-expected-client-width="100" data-expected-client-height="150"></video>
+  <video class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="150"></video>
+
+  <video class="test cis-none vertical"
+       data-expected-client-width="300" data-expected-client-height="0"></video>
+  <video class="test cis-height vertical"
+       data-expected-client-width="300" data-expected-client-height="50"></video>
+  <video class="test cis-width vertical"
+       data-expected-client-width="300" data-expected-client-height="0"></video>
+  <video class="test cis-both vertical"
+       data-expected-client-width="300" data-expected-client-height="50"></video>
+</body>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-029.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-029.html
new file mode 100644
index 0000000000..6169a1a287
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-029.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: button</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
+<style>
+.test {
+  contain: size;
+  padding: 0;
+  border: 5px solid;
+}
+.test::before {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 20px;
+}
+.cis-none {
+  contain-intrinsic-size: none none;
+}
+.cis-height {
+  contain-intrinsic-size: none 50px;
+}
+.cis-width {
+  contain-intrinsic-size: 100px none;
+}
+.cis-both {
+  contain-intrinsic-size: 100px 50px;
+}
+.min-size {
+  min-width: 30px;
+  min-height: 15px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.test')">
+  <div id="log"></div>
+
+  <button class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="0"></button>
+  <button class="test cis-height"
+       data-expected-client-width="0" data-expected-client-height="50"></button>
+  <button class="test cis-width"
+       data-expected-client-width="100" data-expected-client-height="0"></button>
+  <button class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="50"></button>
+
+  <button class="test cis-none min-size"
+       data-expected-client-width="20" data-expected-client-height="5"></button>
+  <button class="test cis-height min-size"
+       data-expected-client-width="20" data-expected-client-height="50"></button>
+  <button class="test cis-width min-size"
+       data-expected-client-width="100" data-expected-client-height="5"></button>
+  <button class="test cis-both min-size"
+       data-expected-client-width="100" data-expected-client-height="50"></button>
+</body>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-030.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-030.html
new file mode 100644
index 0000000000..8acfabbf61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-030.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: scroll containers</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scroll-container">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+.test {
+  contain: size;
+  display: inline-block;
+  padding: 0;
+  border: 5px solid;
+}
+.test::before {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 20px;
+}
+.big-contents::before {
+  width: 400px;
+  height: 200px;
+}
+.overflow-auto {
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+.overflow-scroll {
+  overflow: scroll;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.cis-none {
+  contain-intrinsic-size: none none;
+}
+.cis-height {
+  contain-intrinsic-size: none 50px;
+}
+.cis-width {
+  contain-intrinsic-size: 100px none;
+}
+.cis-both {
+  contain-intrinsic-size: 100px 50px;
+}
+</style>
+
+<div id="log"></div>
+
+<div class="test small-contents overflow-auto cis-none"
+     data-expected-client-width="0" data-expected-client-height="0"
+     data-expected-scroll-width="40" data-expected-scroll-height="20"></div>
+<div class="test small-contents overflow-auto cis-height"
+     data-expected-client-width="0" data-expected-client-height="50"
+     data-expected-scroll-width="40" data-expected-scroll-height="50"></div>
+<div class="test small-contents overflow-auto cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"
+     data-expected-scroll-width="100" data-expected-scroll-height="20"></div>
+<div class="test small-contents overflow-auto cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"
+     data-expected-scroll-width="100" data-expected-scroll-height="50"></div>
+
+<div class="test small-contents overflow-scroll cis-none"
+     data-expected-client-width="0" data-expected-client-height="0"
+     data-expected-scroll-width="40" data-expected-scroll-height="20"></div>
+<div class="test small-contents overflow-scroll cis-height"
+     data-expected-client-width="0" data-expected-client-height="50"
+     data-expected-scroll-width="40" data-expected-scroll-height="50"></div>
+<div class="test small-contents overflow-scroll cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"
+     data-expected-scroll-width="100" data-expected-scroll-height="20"></div>
+<div class="test small-contents overflow-scroll cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"
+     data-expected-scroll-width="100" data-expected-scroll-height="50"></div>
+
+<div class="test small-contents overflow-hidden cis-none"
+     data-expected-client-width="0" data-expected-client-height="0"
+     data-expected-scroll-width="40" data-expected-scroll-height="20"></div>
+<div class="test small-contents overflow-hidden cis-height"
+     data-expected-client-width="0" data-expected-client-height="50"
+     data-expected-scroll-width="40" data-expected-scroll-height="50"></div>
+<div class="test small-contents overflow-hidden cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"
+     data-expected-scroll-width="100" data-expected-scroll-height="20"></div>
+<div class="test small-contents overflow-hidden cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"
+     data-expected-scroll-width="100" data-expected-scroll-height="50"></div>
+
+
+<div class="test big-contents overflow-auto cis-none"
+     data-expected-client-width="0" data-expected-client-height="0"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-auto cis-height"
+     data-expected-client-width="0" data-expected-client-height="50"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-auto cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-auto cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+
+<div class="test big-contents overflow-scroll cis-none"
+     data-expected-client-width="0" data-expected-client-height="0"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-scroll cis-height"
+     data-expected-client-width="0" data-expected-client-height="50"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-scroll cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-scroll cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+
+<div class="test big-contents overflow-hidden cis-none"
+     data-expected-client-width="0" data-expected-client-height="0"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-hidden cis-height"
+     data-expected-client-width="0" data-expected-client-height="50"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-hidden cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+<div class="test big-contents overflow-hidden cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"
+     data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+checkLayout(".test");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-031.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-031.html
new file mode 100644
index 0000000000..981ddc693b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-031.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: multi-column containers</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#the-multi-column-model">
+<style>
+.test {
+  contain: size;
+  display: inline-block;
+  padding: 0;
+  border: 5px solid;
+  column-gap: 5px;
+}
+.columns-60px-1 {
+  columns: 60px 1;
+}
+.columns-120px-1 {
+  columns: 120px 1;
+}
+.columns-60px-2 {
+  columns: 60px 2;
+}
+.cis-none {
+  contain-intrinsic-size: none none;
+}
+.cis-height {
+  contain-intrinsic-size: none 50px;
+}
+.cis-width {
+  contain-intrinsic-size: 100px none;
+}
+.cis-both {
+  contain-intrinsic-size: 100px 50px;
+}
+</style>
+
+<div id="log"></div>
+
+<div class="test columns-60px-1 cis-none"
+     data-expected-client-width="60" data-expected-client-height="0"></div>
+<div class="test columns-60px-1 cis-height"
+     data-expected-client-width="60" data-expected-client-height="50"></div>
+<div class="test columns-60px-1 cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"></div>
+<div class="test columns-60px-1 cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"></div>
+
+<div class="test columns-120px-1 cis-none"
+     data-expected-client-width="120" data-expected-client-height="0"></div>
+<div class="test columns-120px-1 cis-height"
+     data-expected-client-width="120" data-expected-client-height="50"></div>
+<div class="test columns-120px-1 cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"></div>
+<div class="test columns-120px-1 cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"></div>
+
+<div class="test columns-60px-2 cis-none"
+     data-expected-client-width="125" data-expected-client-height="0"></div>
+<div class="test columns-60px-2 cis-height"
+     data-expected-client-width="125" data-expected-client-height="50"></div>
+<div class="test columns-60px-2 cis-width"
+     data-expected-client-width="100" data-expected-client-height="0"></div>
+<div class="test columns-60px-2 cis-both"
+     data-expected-client-width="100" data-expected-client-height="50"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+checkLayout(".test");
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-032.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-032.html
new file mode 100644
index 0000000000..6dfb73aa4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-032.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS contain-intrinsic-size: single-select list box</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#list-box">
+<style>
+.ciw-0 {
+  contain-intrinsic-width: 0px;
+}
+.ciw-100 {
+  contain-intrinsic-width: 100px;
+}
+.cih-0 {
+  contain-intrinsic-height: 0px;
+}
+.cih-100 {
+  contain-intrinsic-height: 100px;
+}
+select {
+  padding: 0;
+  border: solid;
+  margin: 5px;
+}
+.test {
+  contain: size;
+}
+</style>
+
+<!-- To measure the size of an empty <select> without size containment -->
+<select id="reference"></select>
+
+<select class="test ciw-none cih-none"
+    data-expected-client-width="default" data-expected-client-height="default"></select>
+<select class="test ciw-none cih-0"
+    data-expected-client-width="default" data-expected-client-height="0"></select>
+<select class="test ciw-none cih-100"
+    data-expected-client-width="default" data-expected-client-height="100"></select>
+
+<select class="test ciw-0 cih-none"
+    data-expected-client-width="0" data-expected-client-height="default"></select>
+<select class="test ciw-0 cih-0"
+    data-expected-client-width="0" data-expected-client-height="0"></select>
+<select class="test ciw-0 cih-100"
+    data-expected-client-width="0" data-expected-client-height="100"></select>
+
+<select class="test ciw-100 cih-none"
+    data-expected-client-width="100" data-expected-client-height="default"></select>
+<select class="test ciw-100 cih-0"
+    data-expected-client-width="100" data-expected-client-height="0"></select>
+<select class="test ciw-100 cih-100"
+    data-expected-client-width="100" data-expected-client-height="100"></select>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+const reference = document.getElementById("reference");
+const normalWidth = reference.clientWidth;
+const normalHeight = reference.clientHeight;
+for (let test of document.querySelectorAll(".ciw-none")) {
+  test.dataset.expectedClientWidth = normalWidth;
+}
+for (let test of document.querySelectorAll(".cih-none")) {
+  test.dataset.expectedClientHeight = normalHeight;
+}
+checkLayout('.test');
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-033.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-033.html
new file mode 100644
index 0000000000..f98a48a0a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-033.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CIS + content-visibility:hidden and contain:size</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#explicit-intrinsic-inner-size">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#size-containment">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#using-cv-hidden">
+<meta name="assert"
+    content="Tests that CIS + content-visibility:hidden should be same to CIS + contain:size" />
+
+<style>
+    .test {
+        width: max-content;
+        height: max-content;
+        border: 1px solid;
+    }
+
+    .test::before {
+        content: "";
+        display: block;
+        width: 320px;
+        height: 240px;
+    }
+
+    .contain-size {
+        contain: size;
+    }
+
+    .ci-width {
+        contain-intrinsic-width: 10px;
+    }
+
+    .ci-height {
+        contain-intrinsic-height: 20px;
+    }
+
+    .ci-both {
+        contain-intrinsic-size: 10px 20px;
+    }
+
+    .skip-contents .test {
+        content-visibility: hidden;
+    }
+
+</style>
+
+<div id="log"></div>
+
+<div id="tests">
+
+    <div></div>
+    <div class="scroll"></div>
+    <div class="columns"></div>
+    <div class="grid"></div>
+    <div class="flex"></div>
+    <fieldset></fieldset>
+    <img src="resources/dice.png">
+    <svg></svg>
+    <canvas></canvas>
+    <iframe></iframe>
+    <video></video>
+    <button></button>
+    <select>
+        <option>Lorem ipsum</option>
+    </select>
+    <select multiple>
+        <option>Lorem ipsum</option>
+    </select>
+
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+addEventListener("load", async function() {
+  const wrapper = document.getElementById("tests");
+  const tests = new DocumentFragment();
+  for (let template of wrapper.children) {
+    template.classList.add("test");
+
+    const containIntrinsicWidthTest = template.cloneNode(true);
+    const containIntrinsicHeightTest = template.cloneNode(true);
+    const containIntrinsicSizeTest = template.cloneNode(true);
+    containIntrinsicWidthTest.classList.add("ci-width");
+    containIntrinsicHeightTest.classList.add("ci-height");
+    containIntrinsicSizeTest.classList.add("ci-both");
+
+    template.classList.add("contain-size");
+    const containSizeWidth = template.clientWidth;
+    const containSizeHeight = template.clientHeight;
+    template.classList.add("ci-both");
+    const CISWidth = template.clientWidth;;
+    const CISHeight = template.clientHeight;
+
+    containIntrinsicWidthTest.dataset.expectedClientWidth = CISWidth;
+    containIntrinsicWidthTest.dataset.expectedClientHeight = containSizeHeight;
+    containIntrinsicHeightTest.dataset.expectedClientWidth = containSizeWidth;
+    containIntrinsicHeightTest.dataset.expectedClientHeight = CISHeight;
+    containIntrinsicSizeTest.dataset.expectedClientWidth = CISWidth;
+    containIntrinsicSizeTest.dataset.expectedClientHeight = CISHeight;
+
+    tests.append(containIntrinsicWidthTest, containIntrinsicHeightTest, containIntrinsicSizeTest);
+  }
+  wrapper.textContent = "";
+  wrapper.appendChild(tests);
+
+  wrapper.classList.add("skip-contents");
+  checkLayout(".test");
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-001.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-001.html
new file mode 100644
index 0000000000..9a84bff491
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-001.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: Logical versions</title>
+<link rel="author" title="Google LLC" href="https://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<p>Test passes if there is a filled green square.</p>
+
+<div style="contain: size; contain-intrinsic-inline-size: 100px; contain-intrinsic-block-size: 50px; background: green; display: inline-block; vertical-align: bottom"></div>
+<div style="width: 100px; height: 50px; background: green;"></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-002.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-002.html
new file mode 100644
index 0000000000..b5b9748f81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-002.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: Logical versions</title>
+<link rel="author" title="Google LLC" href="https://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<p>Test passes if there is a filled green square.</p>
+
+<div style="contain: size; contain-intrinsic-inline-size: 50px; contain-intrinsic-block-size: 100px; background: green; writing-mode: vertical-lr;"></div>
+<div style="width: 100px; height: 50px; background: green;"></div>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-003.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-003.html
new file mode 100644
index 0000000000..48fedb1148
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-logical-003.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<title>CSS contain-intrinsic-size: Logical versions</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
+<style>
+.test {
+  contain: size;
+  display: inline-block;
+  background: green;
+}
+.test::before {
+  content: '';
+  display: block;
+  width: 40px;
+  height: 20px;
+}
+.cis-none {
+  contain-intrinsic-inline-size: none;
+  contain-intrinsic-block-size: none;
+}
+.cis-block {
+  contain-intrinsic-inline-size: none;
+  contain-intrinsic-block-size: 50px;
+}
+.cis-inline {
+  contain-intrinsic-inline-size: 100px;
+  contain-intrinsic-block-size: none;
+}
+.cis-both {
+  contain-intrinsic-inline-size: 100px;
+  contain-intrinsic-block-size: 50px;
+}
+.vertical {
+  writing-mode: vertical-lr;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.test')">
+  <div id="log"></div>
+
+  <div class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="0"></div>
+  <div class="test cis-block"
+       data-expected-client-width="0" data-expected-client-height="50"></div>
+  <div class="test cis-inline"
+       data-expected-client-width="100" data-expected-client-height="0"></div>
+  <div class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="50"></div>
+
+  <div class="test cis-none vertical"
+       data-expected-client-height="0" data-expected-client-width="0"></div>
+  <div class="test cis-block vertical"
+       data-expected-client-height="0" data-expected-client-width="50"></div>
+  <div class="test cis-inline vertical"
+       data-expected-client-height="100" data-expected-client-width="0"></div>
+  <div class="test cis-both vertical"
+       data-expected-client-height="100" data-expected-client-width="50"></div>
+
+  <hr>
+
+  <img class="test cis-none" src="/css/support/60x60-green.png"
+       data-expected-client-width="0" data-expected-client-height="0">
+  <img class="test cis-block" src="/css/support/60x60-green.png"
+       data-expected-client-width="0" data-expected-client-height="50">
+  <img class="test cis-inline" src="/css/support/60x60-green.png"
+       data-expected-client-width="100" data-expected-client-height="0">
+  <img class="test cis-both" src="/css/support/60x60-green.png"
+       data-expected-client-width="100" data-expected-client-height="50">
+
+  <img class="test cis-none vertical" src="/css/support/60x60-green.png"
+       data-expected-client-height="0" data-expected-client-width="0">
+  <img class="test cis-block vertical" src="/css/support/60x60-green.png"
+       data-expected-client-height="0" data-expected-client-width="50">
+  <img class="test cis-inline vertical" src="/css/support/60x60-green.png"
+       data-expected-client-height="100" data-expected-client-width="0">
+  <img class="test cis-both vertical" src="/css/support/60x60-green.png"
+       data-expected-client-height="100" data-expected-client-width="50">
+
+  <hr>
+
+  <svg class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="0"></svg>
+  <svg class="test cis-block"
+       data-expected-client-width="0" data-expected-client-height="50"></svg>
+  <svg class="test cis-inline"
+       data-expected-client-width="100" data-expected-client-height="0"></svg>
+  <svg class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="50"></svg>
+
+  <svg class="test cis-none vertical"
+       data-expected-client-height="0" data-expected-client-width="0"></svg>
+  <svg class="test cis-block vertical"
+       data-expected-client-height="0" data-expected-client-width="50"></svg>
+  <svg class="test cis-inline vertical"
+       data-expected-client-height="100" data-expected-client-width="0"></svg>
+  <svg class="test cis-both vertical"
+       data-expected-client-height="100" data-expected-client-width="50"></svg>
+
+  <hr>
+
+  <canvas class="test cis-none" width="40" height="20"
+       data-expected-client-width="0" data-expected-client-height="0"></canvas>
+  <canvas class="test cis-block" width="40" height="20"
+       data-expected-client-width="0" data-expected-client-height="50"></canvas>
+  <canvas class="test cis-inline" width="40" height="20"
+       data-expected-client-width="100" data-expected-client-height="0"></canvas>
+  <canvas class="test cis-both" width="40" height="20"
+       data-expected-client-width="100" data-expected-client-height="50"></canvas>
+
+  <canvas class="test cis-none vertical" width="40" height="20"
+       data-expected-client-height="0" data-expected-client-width="0"></canvas>
+  <canvas class="test cis-block vertical" width="40" height="20"
+       data-expected-client-height="0" data-expected-client-width="50"></canvas>
+  <canvas class="test cis-inline vertical" width="40" height="20"
+       data-expected-client-height="100" data-expected-client-width="0"></canvas>
+  <canvas class="test cis-both vertical" width="40" height="20"
+       data-expected-client-height="100" data-expected-client-width="50"></canvas>
+
+  <hr>
+
+  <iframe class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="0"></iframe>
+  <iframe class="test cis-block"
+       data-expected-client-width="0" data-expected-client-height="50"></iframe>
+  <iframe class="test cis-inline"
+       data-expected-client-width="100" data-expected-client-height="0"></iframe>
+  <iframe class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="50"></iframe>
+
+  <iframe class="test cis-none vertical"
+       data-expected-client-height="0" data-expected-client-width="0"></iframe>
+  <iframe class="test cis-block vertical"
+       data-expected-client-height="0" data-expected-client-width="50"></iframe>
+  <iframe class="test cis-inline vertical"
+       data-expected-client-height="100" data-expected-client-width="0"></iframe>
+  <iframe class="test cis-both vertical"
+       data-expected-client-height="100" data-expected-client-width="50"></iframe>
+
+  <hr>
+
+  <video class="test cis-none"
+       data-expected-client-width="0" data-expected-client-height="0"></video>
+  <video class="test cis-block"
+       data-expected-client-width="0" data-expected-client-height="50"></video>
+  <video class="test cis-inline"
+       data-expected-client-width="100" data-expected-client-height="0"></video>
+  <video class="test cis-both"
+       data-expected-client-width="100" data-expected-client-height="50"></video>
+
+  <video class="test cis-none vertical"
+       data-expected-client-height="0" data-expected-client-width="0"></video>
+  <video class="test cis-block vertical"
+       data-expected-client-height="0" data-expected-client-width="50"></video>
+  <video class="test cis-inline vertical"
+       data-expected-client-height="100" data-expected-client-width="0"></video>
+  <video class="test cis-both vertical"
+       data-expected-client-height="100" data-expected-client-width="50"></video>
+</body>
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-computed.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-computed.html
new file mode 100644
index 0000000000..489b9e1be2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-computed.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Intrinsic Size Test: intrinsic-size with computed values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="contain-intrinsic-size supports the full grammar '[none | <length>]{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+#scratch { display: none }
+</style>
+</head>
+<body>
+<div style="contain-intrinsic-size: 5px 5px">
+  <div id=target></div>
+</div>
+<div id=scratch></div>
+<script>
+
+function length_ref(length) {
+  document.getElementById("scratch").style.width = length;
+  return getComputedStyle(document.getElementById("scratch")).getPropertyValue("width");
+}
+
+test_computed_value("contain-intrinsic-size", "none");
+test_computed_value("contain-intrinsic-size", "1px");
+test_computed_value("contain-intrinsic-size", "auto 1px");
+test_computed_value("contain-intrinsic-size", "auto 1px auto 1px", "auto 1px");
+test_computed_value("contain-intrinsic-size", "1px auto 1px");
+test_computed_value("contain-intrinsic-size", "2vw 3px", length_ref("2vw") + " 3px");
+test_computed_value("contain-intrinsic-size", "2px 3vh", "2px " + length_ref("3vh"));
+test_computed_value("contain-intrinsic-size", "2px 3.3vh", "2px " + length_ref("3.3vh"));
+test_computed_value("contain-intrinsic-size", "5px 5px", "5px");
+test_computed_value("contain-intrinsic-size", "inherit", "5px");
+
+test_computed_value("contain-intrinsic-width", "none");
+test_computed_value("contain-intrinsic-width", "1px");
+test_computed_value("contain-intrinsic-width", "auto 1px");
+test_computed_value("contain-intrinsic-width", "2vw", length_ref("2vw"));
+test_computed_value("contain-intrinsic-width", "3vh", length_ref("3vh"));
+
+test_computed_value("contain-intrinsic-height", "none");
+test_computed_value("contain-intrinsic-height", "1px");
+test_computed_value("contain-intrinsic-height", "auto 1px");
+test_computed_value("contain-intrinsic-height", "2vw", length_ref("2vw"));
+test_computed_value("contain-intrinsic-height", "3vh", length_ref("3vh"));
+test_computed_value("contain-intrinsic-height", "auto none");
+</script>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-invalid.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-invalid.html
new file mode 100644
index 0000000000..481300b0df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-invalid.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Intrinsic Size Test: intrinsic-size with invalid values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="contain-intrinsic-size supports the full grammar 'none | [auto || <length> | <length>]{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("contain-intrinsic-size", "legacy");
+test_invalid_value("contain-intrinsic-size", "auto legacy");
+test_invalid_value("contain-intrinsic-size", "auto legacy auto");
+test_invalid_value("contain-intrinsic-size", "10%");
+test_invalid_value("contain-intrinsic-size", "2em 3px 5px");
+test_invalid_value("contain-intrinsic-size", "1px 1%");
+test_invalid_value("contain-intrinsic-size", "1px auto auto");
+test_invalid_value("contain-intrinsic-size", "-1px");
+test_invalid_value("contain-intrinsic-size", "auto");
+test_invalid_value("contain-intrinsic-size", "auto 1px 1px auto");
+test_invalid_value("contain-intrinsic-size", "1px 1px auto");
+
+test_invalid_value("contain-intrinsic-width", "legacy");
+test_invalid_value("contain-intrinsic-width", "-1px");
+test_invalid_value("contain-intrinsic-width", "1px 1px");
+test_invalid_value("contain-intrinsic-width", "1px none");
+test_invalid_value("contain-intrinsic-width", "auto 1px auto");
+test_invalid_value("contain-intrinsic-width", "20%");
+test_invalid_value("contain-intrinsic-width", "1px auto");
+
+test_invalid_value("contain-intrinsic-height", "legacy");
+test_invalid_value("contain-intrinsic-height", "-1px");
+test_invalid_value("contain-intrinsic-height", "1px 1px");
+test_invalid_value("contain-intrinsic-height", "1px none");
+test_invalid_value("contain-intrinsic-height", "auto 1px auto");
+test_invalid_value("contain-intrinsic-height", "20%");
+test_invalid_value("contain-intrinsic-height", "1px auto");
+
+test_invalid_value("contain-intrinsic-inline-size", "legacy");
+test_invalid_value("contain-intrinsic-inline-size", "-1px");
+test_invalid_value("contain-intrinsic-inline-size", "1px 1px");
+test_invalid_value("contain-intrinsic-inline-size", "1px none");
+test_invalid_value("contain-intrinsic-inline-size", "auto 1px auto");
+test_invalid_value("contain-intrinsic-inline-size", "20%");
+test_invalid_value("contain-intrinsic-inline-size", "1px auto");
+
+test_invalid_value("contain-intrinsic-block-size", "legacy");
+test_invalid_value("contain-intrinsic-block-size", "-1px");
+test_invalid_value("contain-intrinsic-block-size", "1px 1px");
+test_invalid_value("contain-intrinsic-block-size", "1px none");
+test_invalid_value("contain-intrinsic-block-size", "auto 1px auto");
+test_invalid_value("contain-intrinsic-block-size", "20%");
+test_invalid_value("contain-intrinsic-block-size", "1px auto");
+
+test_invalid_value("contain-intrinsic-block-size", "none auto");
+</script>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-valid.html b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-valid.html
new file mode 100644
index 0000000000..94fc57a61c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/parsing/contain-intrinsic-size-valid.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Intrinsic Size Test: intrinsic-size with valid values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
+<meta name="assert" content="contain-intrinsic-size supports the full grammar '[none | <length>]{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("contain-intrinsic-size", "none");
+test_valid_value("contain-intrinsic-size", "1px");
+test_valid_value("contain-intrinsic-size", "2em 3px");
+test_valid_value("contain-intrinsic-size", "5px 5px", "5px");
+test_valid_value("contain-intrinsic-size", "none none", "none");
+test_valid_value("contain-intrinsic-size", "1px none");
+test_valid_value("contain-intrinsic-size", "none 1px");
+test_valid_value("contain-intrinsic-size", "auto 1px 1px");
+test_valid_value("contain-intrinsic-size", "1px auto 1px");
+test_valid_value("contain-intrinsic-size", "auto 1px auto 1px", "auto 1px");
+
+test_valid_value("contain-intrinsic-width", "none");
+test_valid_value("contain-intrinsic-width", "1px");
+test_valid_value("contain-intrinsic-width", "2em");
+test_valid_value("contain-intrinsic-width", "auto 1px");
+
+test_valid_value("contain-intrinsic-height", "none");
+test_valid_value("contain-intrinsic-height", "1px");
+test_valid_value("contain-intrinsic-height", "2em");
+test_valid_value("contain-intrinsic-height", "auto 1px");
+
+test_valid_value("contain-intrinsic-inline-size", "none");
+test_valid_value("contain-intrinsic-inline-size", "1px");
+test_valid_value("contain-intrinsic-inline-size", "2em");
+test_valid_value("contain-intrinsic-inline-size", "auto 1px");
+
+test_valid_value("contain-intrinsic-block-size", "none");
+test_valid_value("contain-intrinsic-block-size", "1px");
+test_valid_value("contain-intrinsic-block-size", "2em");
+test_valid_value("contain-intrinsic-block-size", "auto 1px");
+
+test_valid_value("contain-intrinsic-block-size", "auto none");
+</script>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/resources/dice.png b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/resources/dice.png
new file mode 100644
index 0000000000..c82d01517c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/resources/dice.png
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-sizing/contain-intrinsic-size
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip