[contain-intrinsic-size] Correct "auto none" support

https://bugs.webkit.org/show_bug.cgi?id=259311 Reviewed by Tim Nguyen. r265617 incorrectly changed some places where writing mode was being taken into account, fix that by introducing containIntrinsicLogical(Width|Height)HasAuto methods and using them instead of containIntrinsic*(Width|Height)HasAuto. * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-015-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-015.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-016-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-016.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-017-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-017.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-018-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-018.html: Added. * Source/WebCore/dom/Document.cpp: (WebCore::CallbackForContainIntrinsicSize): * Source/WebCore/rendering/style/RenderStyle.h: * Source/WebCore/rendering/style/RenderStyleInlines.h: (WebCore::RenderStyle::containIntrinsicLogicalHeightHasAuto const): (WebCore::RenderStyle::containIntrinsicLogicalWidthHasAuto const): * Source/WebCore/rendering/updating/RenderTreeUpdater.cpp: (WebCore::RenderTreeUpdater::updateElementRenderer): Canonical link: https://commits.webkit.org/266136@main
WebKit · Jul 18, 2023 · c42f4ea · c42f4ea
1 parent 3dfb58b
commit c42f4ea
Show file tree

Hide file tree

Showing 12 changed files with 396 additions and 4 deletions.
diff --git a/...ported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-015-expected.txt b/...ported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-015-expected.txt
@@ -0,0 +1,3 @@
+
+PASS Basic usage
+
diff --git a/...Tests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-015.html b/...Tests/imported/w3c/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/...ported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-016-expected.txt b/...ported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-016-expected.txt
@@ -0,0 +1,3 @@
+
+PASS Basic usage
+
diff --git a/...Tests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-016.html b/...Tests/imported/w3c/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/...ported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-017-expected.txt b/...ported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-017-expected.txt
@@ -0,0 +1,3 @@
+
+PASS Basic usage
+
diff --git a/...Tests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-017.html b/...Tests/imported/w3c/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/...ported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-018-expected.txt b/...ported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-018-expected.txt
@@ -0,0 +1,3 @@
+
+PASS Basic usage
+
diff --git a/...Tests/imported/w3c/web-platform-tests/css/css-sizing/contain-intrinsic-size/auto-018.html b/...Tests/imported/w3c/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>