[css-grid] Don't override block-size for minimum contribution
During the grid track sizing, if a grid item has a relative block-axis
size, we shouldn't override the size of its containing block, which we
don't know yet.
This already happened when calculating the min-content or max-content
contributions of the item, but not for the minimum contribution.
This caused problems especially when dynamically changing the minimum
size, then percentages were resolved with respect to the old size of the
grid area.
BUG=942811
TEST=external/wpt/css/css-grid/grid-items/grid-item-dynamic-min-contribution.html
TEST=external/wpt/css/css-grid/grid-items/grid-item-percentage-sizes-003.html
Change-Id: Ic39faad51fef17ef4d2994b60387ea67bc46bef7
diff --git a/css/css-grid/grid-items/grid-item-dynamic-min-contribution.html b/css/css-grid/grid-items/grid-item-dynamic-min-contribution.html
new file mode 100644
index 0000000..c4ced6b
--- /dev/null
+++ b/css/css-grid/grid-items/grid-item-dynamic-min-contribution.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Grid Layout Test: dynamic minimum contribution</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-contribution">
+<meta name="assert" content="This test checks that grid items are sized correctly when their minimum contribution is dynamically changed with JavaScript." />
+<style>
+#grid {
+ display: grid;
+ height: 100px;
+ width: 100px;
+}
+</style>
+<div id="log"></div>
+<div id="grid">
+ <div id="item"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const tests = [
+ ["auto", "100px"],
+ ["0%", "100px"],
+ ["100%", "100px"],
+ ["200%", "200px"],
+ ["300%", "300px"],
+ ["400px", "400px"],
+ ["500px", "500px"],
+];
+const item = document.getElementById("item");
+for (let [minSize, expectedSize] of tests) {
+ test(() => {
+ item.style.minHeight = item.style.minWidth = minSize;
+ let cs = getComputedStyle(item);
+ assert_equals(cs.height, expectedSize, "height");
+ assert_equals(cs.width, expectedSize, "width");
+ }, `Minimum size: ${minSize}`);
+}
+</script>
