[layout] Stretch semi-replaced elements when OOF in inline direction.

As per: w3c/csswg-drafts#6789 Removes the tests which were previously testing the shrink-to-fit behaviour, and adds new tests for the stretch behaviour (on more elements). Bug: 1274898 Change-Id: I5c40a4b88fe06d7ef79113a66ef3976375d026eb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3272378 Commit-Queue: Ian Kilpatrick <[email protected]> Reviewed-by: Morten Stenshorne <[email protected]> Cr-Commit-Position: refs/heads/main@{#946530} NOKEYCHECK=True GitOrigin-RevId: da65a23485a8a1abedd0fff0f390238fdd56258b
mjfroman · Nov 30, 2021 · 3f6e59a · 3f6e59a
1 parent b56b313
commit 3f6e59a
Show file tree

Hide file tree

Showing 14 changed files with 203 additions and 315 deletions.
diff --git a/blink/renderer/core/layout/ng/ng_absolute_utils.cc b/blink/renderer/core/layout/ng/ng_absolute_utils.cc
@@ -346,7 +346,7 @@ bool ComputeOutOfFlowInlineDimensions(
   const bool is_table = node.IsTable();
   const bool can_compute_block_size_without_layout =
       CanComputeBlockSizeWithoutLayout(node);
-  bool is_shrink_to_fit = is_table || node.ShouldBeConsideredAsReplaced();
+  bool is_shrink_to_fit = is_table;
 
   auto MinMaxSizesFunc = [&](MinMaxSizesType type) -> MinMaxSizesResult {
     DCHECK(!node.IsReplaced());
@@ -458,7 +458,6 @@ scoped_refptr<const NGLayoutResult> ComputeOutOfFlowBlockDimensions(
 
   scoped_refptr<const NGLayoutResult> result;
 
-  // NOTE: |is_shrink_to_fit| isn't symmetrical with the inline calculations.
   const auto& style = node.Style();
   const bool is_table = node.IsTable();
   bool is_shrink_to_fit = is_table;

diff --git a/blink/web_tests/FlagExpectations/disable-layout-ng b/blink/web_tests/FlagExpectations/disable-layout-ng
@@ -256,6 +256,9 @@ crbug.com/591099 external/wpt/css/css-position/position-absolute-in-inline-003.h
 crbug.com/591099 external/wpt/css/css-position/position-absolute-in-inline-004.html [ Failure ]
 crbug.com/591099 external/wpt/css/css-position/position-absolute-replaced-intrinsic-size.tentative.html [ Failure ]
 crbug.com/591099 external/wpt/css/css-position/position-absolute-replaced-no-intrinsic-size.tentative.html [ Failure ]
+crbug.com/591099 external/wpt/css/css-position/position-absolute-semi-replaced-stretch-button.html [ Failure ]
+crbug.com/591099 external/wpt/css/css-position/position-absolute-semi-replaced-stretch-input.html [ Failure ]
+crbug.com/591099 external/wpt/css/css-position/position-absolute-semi-replaced-stretch-other.html [ Failure ]
 crbug.com/591099 external/wpt/css/css-position/position-relative-001.html [ Failure ]
 crbug.com/591099 external/wpt/css/css-position/position-relative-002.html [ Failure ]
 crbug.com/591099 external/wpt/css/css-position/position-relative-004.html [ Failure ]

diff --git a/blink/web_tests/external/wpt/css/css-position/position-absolute-center-005.html b/blink/web_tests/external/wpt/css/css-position/position-absolute-center-005.html
diff --git a/...sts/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-button-ref.html b/...sts/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-button-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+.cb {
+  position: relative;
+  border: 3px solid black;
+  height: 100px;
+  width: 150px;
+  display: inline-block;
+  vertical-align: top;
+  margin: 5px;
+}
+.abs {
+  margin: 0;
+  position: absolute;
+  box-sizing: border-box;
+  top: 3px;
+  left: 3px;
+  outline: 2px solid lime;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+}
+</style>
+<div class="cb"><button class="abs">button</button></div>
diff --git a/...b_tests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-button.html b/...b_tests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-button.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6789">
+<link rel="match" href="position-absolute-semi-replaced-stretch-button-ref.html">
+<title>Semi-replaced elements should stretch with an auto main size, and explicit insets in that direction.</title>
+<style>
+.cb {
+  position: relative;
+  border: 3px solid black;
+  height: 100px;
+  width: 150px;
+  display: inline-block;
+  vertical-align: top;
+  margin: 5px;
+}
+.abs {
+  margin: 0;
+  position: absolute;
+  box-sizing: border-box;
+  top: 3px;
+  right: 3px;
+  bottom: 3px;
+  left: 3px;
+  outline: 2px solid lime;
+  width: auto;
+  height: auto;
+}
+</style>
+<div class="cb"><button class="abs">button</button></div>
diff --git a/...ests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-input-ref.html b/...ests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-input-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<style>
+.cb {
+  position: relative;
+  border: 3px solid black;
+  height: 100px;
+  width: 150px;
+  display: inline-block;
+  vertical-align: top;
+  margin: 5px;
+}
+.wide {
+  width: 350px;
+}
+.abs {
+  margin: 0;
+  position: absolute;
+  box-sizing: border-box;
+  top: 3px;
+  left: 3px;
+  outline: 2px solid lime;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+}
+</style>
+<div class="cb"><input type="button" class="abs" value="input-btn"></div>
+<div class="cb"><input type="submit" class="abs"></div>
+<div class="cb"><input type="reset" class="abs"></div>
+<div class="cb"><input type="color" class="abs"></div>
+<div class="cb wide"><input type="text" class="abs" value="text"></div>
+<div class="cb wide"><input type="password" class="abs" value="pass"></div>
+<div class="cb wide"><input type="date" class="abs" value="text"></div>
+<div class="cb wide"><input type="file" class="abs"></div>
+<div class="cb wide"><input type="range" class="abs"></div>
diff --git a/...eb_tests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-input.html b/...eb_tests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-input.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6789">
+<link rel="match" href="position-absolute-semi-replaced-stretch-input-ref.html">
+<title>Semi-replaced elements should stretch with an auto main size, and explicit insets in that direction.</title>
+<style>
+.cb {
+  position: relative;
+  border: 3px solid black;
+  height: 100px;
+  width: 150px;
+  display: inline-block;
+  vertical-align: top;
+  margin: 5px;
+}
+.wide {
+  /* Some of the form controls are wider than others
+     and need a wider CB in order to see if they're
+     stretching or shrinking. */
+  width: 350px;
+}
+.abs {
+  margin: 0;
+  position: absolute;
+  box-sizing: border-box;
+  top: 3px;
+  right: 3px;
+  bottom: 3px;
+  left: 3px;
+  outline: 2px solid lime;
+  width: auto;
+  height: auto;
+}
+</style>
+<div class="cb"><input type="button" class="abs" value="input-btn"></div>
+<div class="cb"><input type="submit" class="abs"></div>
+<div class="cb"><input type="reset" class="abs"></div>
+<div class="cb"><input type="color" class="abs"></div>
+<div class="cb wide"><input type="text" class="abs" value="text"></div>
+<div class="cb wide"><input type="password" class="abs" value="pass"></div>
+<div class="cb wide"><input type="date" class="abs" value="text"></div>
+<div class="cb wide"><input type="file" class="abs"></div>
+<div class="cb wide"><input type="range" class="abs"></div>
diff --git a/...ests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-other-ref.html b/...ests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-other-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<style>
+.cb {
+  position: relative;
+  border: 3px solid black;
+  height: 100px;
+  width: 150px;
+  display: inline-block;
+  vertical-align: top;
+  margin: 5px;
+}
+.wide {
+  width: 350px;
+}
+.abs {
+  margin: 0;
+  position: absolute;
+  box-sizing: border-box;
+  top: 3px;
+  left: 3px;
+  outline: 2px solid lime;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+}
+</style>
+<div class="cb"><select class="abs"><option>select</option></select></div>
+<div class="cb"><output class="abs">output</output></div>
+<div class="cb"><label class="abs">label</output></div>
+<div class="cb"><fieldset class="abs">fieldset</fieldset></div>
+<div class="cb wide"><textarea class="abs">textarea</textarea></div>
+<div class="cb wide"><progress value="0.4" class="abs"></div>
+<div class="cb wide"><meter value="0.4" class="abs"></div>
diff --git a/...eb_tests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-other.html b/...eb_tests/external/wpt/css/css-position/position-absolute-semi-replaced-stretch-other.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6789">
+<link rel="match" href="position-absolute-semi-replaced-stretch-other-ref.html">
+<title>Semi-replaced elements should stretch with an auto main size, and explicit insets in that direction.</title>
+<style>
+.cb {
+  position: relative;
+  border: 3px solid black;
+  height: 100px;
+  width: 150px;
+  display: inline-block;
+  vertical-align: top;
+  margin: 5px;
+}
+.wide {
+  /* Some of the form controls are wider than others
+     and need a wider CB in order to see if they're
+     stretching or shrinking. */
+  width: 350px;
+}
+.abs {
+  margin: 0;
+  position: absolute;
+  box-sizing: border-box;
+  top: 3px;
+  right: 3px;
+  bottom: 3px;
+  left: 3px;
+  outline: 2px solid lime;
+  width: auto;
+  height: auto;
+}
+</style>
+<div class="cb"><select class="abs"><option>select</option></select></div>
+<div class="cb"><output class="abs">output</output></div>
+<div class="cb"><label class="abs">label</output></div>
+<div class="cb"><fieldset class="abs">fieldset</fieldset></div>
+<div class="cb wide"><textarea class="abs">textarea</textarea></div>
+<div class="cb wide"><progress value="0.4" class="abs"></div>
+<div class="cb wide"><meter value="0.4" class="abs"></div>
diff --git a/blink/web_tests/external/wpt/html/rendering/widgets/button-layout/abspos.html b/blink/web_tests/external/wpt/html/rendering/widgets/button-layout/abspos.html
diff --git a/...eplaced/absolute-position-auto-width-and-left-and-right-and-intrinsic-width-expected.html b/...eplaced/absolute-position-auto-width-and-left-and-right-and-intrinsic-width-expected.html