[LayoutNG] Remove NGLayoutResult::PositionedFloats.
This patch does a few (related) things:
1) Makes floats children of their appropriate inline-level container.
Previously we weren't doing this, which was making OOF positioned
children skip their correct containing block. Now they'll correctly
get captured, during NGContainerFragmentBuilder::AddChild.
2) Now that float children are in the "correct" position within the
fragment tree, we can now paint them. This changes the
ng_box_fragment_painter.cc to paint inline-level floats and makes
sure we set the NGPaintFragment correctly.
3) Lots of subtle painting layer changes. As floats are now in the
"correct" fragment tree position, self-painting layers of
inline-level elements (spans, etc) need to know that they are able
to paint floats, determine position correctly, etc.
The major behaviour changes are:
<div>
text <span style="position: relative;">abc
<div style="float: left;">
<div style="position: absolute;"></div>
</div>
def</span>
</div>
The OOF positioned child will be contained within the <span>
<div>
<span style="position: relative; top: 100px;">
<div style="float: left;"></div></span>
</div>
The float will also shift by 100px, which previously wasn't the case.
Additionally filter: blur(2px); etc, will be applied to the float.
Change-Id: I61a2638cb1472f1a22f5994688d69fb6fffb8b88
Reviewed-on: https://chromium-review.googlesource.com/c/1365984
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619070}
diff --git a/css/CSS2/positioning/abspos-float-with-inline-container-ref.html b/css/CSS2/positioning/abspos-float-with-inline-container-ref.html
new file mode 100644
index 0000000..3bf67ed
--- /dev/null
+++ b/css/CSS2/positioning/abspos-float-with-inline-container-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+div {
+ width: 100px;
+ height: 100px;
+ background: green;
+}
+</style>
+<p>Test passes if there is green square.</p>
+<div></div>
diff --git a/css/CSS2/positioning/abspos-float-with-inline-container.html b/css/CSS2/positioning/abspos-float-with-inline-container.html
new file mode 100644
index 0000000..9918bcc
--- /dev/null
+++ b/css/CSS2/positioning/abspos-float-with-inline-container.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html" />
+<link rel="match" href="abspos-float-with-inline-container-ref.html" />
+<meta name="assert" content="A inline-level element can contain a absolute-positioned child within a float." />
+<style>
+#abs {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 100px;
+ background: green;
+}
+#float { float: left; }
+span {
+ position: relative;
+ padding-left: 100px;
+}
+</style>
+<p>Test passes if there is green square.</p>
+<div>
+ <span>
+ <div id="float">
+ <div id="abs"></div>
+ </div>
+ </span>
+</div>
diff --git a/css/filter-effects/filtered-inline-applies-to-float-ref.html b/css/filter-effects/filtered-inline-applies-to-float-ref.html
new file mode 100644
index 0000000..439d7c4
--- /dev/null
+++ b/css/filter-effects/filtered-inline-applies-to-float-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+#float {
+ float: left;
+ width: 100px;
+ height: 100px;
+ background: green;
+ filter: blur(2px);
+}
+</style>
+<p>There should be a blurred green square.</p>
+<div id="float"></div>
diff --git a/css/filter-effects/filtered-inline-applies-to-float.html b/css/filter-effects/filtered-inline-applies-to-float.html
new file mode 100644
index 0000000..2d368de
--- /dev/null
+++ b/css/filter-effects/filtered-inline-applies-to-float.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty" />
+<link rel="match" href="filtered-inline-applies-to-float-ref.html" />
+<meta name="assert" content="A filter on an inline element applies to floats." />
+<style>
+span { filter: blur(2px); }
+#float {
+ float: left;
+ width: 100px;
+ height: 100px;
+ background: green;
+}
+</style>
+<p>There should be a blurred green square.</p>
+<div>
+ <span><div id="float"></div></span>
+</div>
