[LayoutNG] Provide both inline resolution sizes to legacy.

When entering legacy layout from NG, we need to provide both percentage resolution inline size and available inline size. Available size is used when using the fill-available measure, i.e. what typically takes place when inline-size is auto. Percentage resolution size is used otherwise (to resolve percentages). We used to provide percentage size if inline-size was percentage based, and available size otherwise. But there are cases where we need both. Any of inline-size, inline-min-size and inline-max-size may or may not be percentage based, and letting the unit type of inline-size decide therefore won't do. Change-Id: I225372584a88471dad35deddbc2d3a7de732583a Reviewed-on: https://chromium-review.googlesource.com/c/1443992 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#627885}
web-platform-tests · Jan 31, 2019 · 6b32df2 · 6b32df2
1 parent 5cf7f41
commit 6b32df2
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/css/css-sizing/table-percentage-max-width-beside-float.html b/css/css-sizing/table-percentage-max-width-beside-float.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing/#available">
+<link rel="help" href="https://drafts.csswg.org/css-sizing/#percentage-sizing">
+<p>There should be a green square below, and no red.</p>
+<div id="container" style="width:100px; background:red;">
+  <div style="float:right; width:50px; height:100px; background:green;"></div>
+  <div style="display:table; max-width:50%; height:100px; background:green;" data-expected-width="50">
+    <div style="float:left; width:20px; height:10px;"></div>
+    <div style="float:left; width:20px; height:10px;"></div>
+    <div style="float:left; width:20px; height:10px;"></div>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  checkLayout("#container");
+</script>
diff --git a/css/css-sizing/table-percentage-min-width-below-float.html b/css/css-sizing/table-percentage-min-width-below-float.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing/#available">
+<link rel="help" href="https://drafts.csswg.org/css-sizing/#percentage-sizing">
+<p>There should be a blue square below.</p>
+<div id="container" style="width:100px;">
+  <div style="float:right; width:50px; height:10px;"></div>
+  <div style="display:table; width:10px; min-width:100%; height:100px; background:blue;" data-expected-width="100"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  checkLayout("#container");
+</script>
diff --git a/css/css-sizing/table-percentage-min-width-beside-float.html b/css/css-sizing/table-percentage-min-width-beside-float.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-sizing/#available">
+<link rel="help" href="https://drafts.csswg.org/css-sizing/#percentage-sizing">
+<p>There should be a green square below, and no red.</p>
+<div id="container" style="width:100px; background:red;">
+  <div style="float:right; width:50px; height:100px; background:green;"></div>
+  <div style="display:table; width:10px; min-width:50%; height:100px; background:green;" data-expected-width="50"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  checkLayout("#container");
+</script>