[FlexNG] Add support for OOF-positioned static-positions within FlexNG.
This builds on previous changes to (finally!) add the correct
static-positions within the NGFlexLayoutAlgorithm.
This takes into account the main-axis, and cross-axis
alignment/justification - and converts it to the correct
inline/block axis.
As we may not know the final block-size when we encounter an
OOF-positioned node, we "adjust" this within the fragment builder once
known.
This is important for block-end/block-center aligned OOF-positioned
nodes.
Bug: 845235
Change-Id: I45c89ae1f676ec06d742b86e4b744cfc3dbe6f75
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1841245
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#723411}
diff --git a/css/css-position/position-absolute-center-001.tentative.html b/css/css-position/position-absolute-center-001.tentative.html
new file mode 100644
index 0000000..1baf1d7
--- /dev/null
+++ b/css/css-position/position-absolute-center-001.tentative.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1432">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<style>
+#containing-block {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: red;
+ display: flex;
+}
+
+#containing-block > div {
+ flex-grow: 1;
+}
+
+#inner-flex {
+ display: flex;
+ justify-content: center;
+}
+
+span {
+ display: inline-block;
+ inline-size: 50px;
+ block-size: 10px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="containing-block" style="flex-direction: row;">
+ <div id="inner-flex" style="margin: 10px; height: 100px;">
+ <div style="position: absolute; top: 0; height: 100px; background: green;">
+ <span></span>
+ <span></span>
+ </div>
+ </div>
+ <div style="height: 100px; background: green;"></div>
+</div>
diff --git a/css/css-position/position-absolute-center-002.tentative.html b/css/css-position/position-absolute-center-002.tentative.html
new file mode 100644
index 0000000..2de625f
--- /dev/null
+++ b/css/css-position/position-absolute-center-002.tentative.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1432">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<style>
+#containing-block {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ background: red;
+ display: flex;
+}
+
+#containing-block > div {
+ flex-grow: 1;
+}
+
+#inner-flex {
+ display: flex;
+ align-items: center;
+}
+
+span {
+ display: inline-block;
+ inline-size: 50px;
+ block-size: 10px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="containing-block" style="flex-direction: column;">
+ <div id="inner-flex" style="margin: 10px; width: 100px;">
+ <div style="position: absolute; left: 0; width: 100px; background: green; writing-mode: vertical-rl;">
+ <span></span>
+ <span></span>
+ </div>
+ </div>
+ <div style="width: 100px; background: green;"></div>
+</div>
