align-content for blocks: Implement for block containers

https://drafts.csswg.org/css-align/#distribution-block We're going to implement the behavior for table-cell in another CL. Bug: 1500511 Change-Id: I77167a1216584bde6ba40748a5d4717bdca03d02 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5015733 Commit-Queue: Ian Kilpatrick <[email protected]> Reviewed-by: Ian Kilpatrick <[email protected]> Auto-Submit: Kent Tamura <[email protected]> Cr-Commit-Position: refs/heads/main@{#1227637}
web-platform-tests · Nov 21, 2023 · 096d789 · 096d789
1 parent 32309d9
commit 096d789
Showing 1 changed file with 27 additions and 0 deletions.
diff --git a/css/css-align/blocks/align-content-block-simple-height-change.html b/css/css-align/blocks/align-content-block-simple-height-change.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align/#distribution-block">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+body {
+  margin: 0;
+}
+</style>
+
+<div id="target" style="height: 200px;">
+  <div style="align-content: center; height: 100%;">
+    <div style="height: 60px;" id="content"></div>
+  </div>
+</div>
+
+<script>
+// Blink has an optimization that it skips child layout if only the container
+// height is changed. This test ensures the opmiziation is not used for
+// a non-normal align-content value.
+test(() => {
+  document.body.offsetTop;
+  assert_equals(content.offsetTop, (200 - 60) / 2);
+  target.style.height = '100px';
+  assert_equals(content.offsetTop, (100 - 60) / 2);
+}, 'Updating a container height should align the content again');
+</script>