Bug 1530850 [wpt PR 15490] - [LayoutNG] Fix inline-level OOFs inside a block-level context., a=testonly
☠☠ backed out by 66b1aba3fb43 ☠ ☠
authorIan Kilpatrick <ikilpatrick@chromium.org>
Wed, 06 Mar 2019 12:36:16 +0000
changeset 464334 bd463e2be0119ca0ab60847f0a30e0aab9cfb332
parent 464333 83c0823bb8e1d0090feb779f075a2dc8402a31cb
child 464335 fe1a2cb779e0e27eeaccc778b945b047ad87244c
push id35713
push usercbrindusan@mozilla.com
push dateFri, 15 Mar 2019 21:55:43 +0000
treeherdermozilla-central@66b1aba3fb43 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1530850, 15490, 933996, 1480071, 634522
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1530850 [wpt PR 15490] - [LayoutNG] Fix inline-level OOFs inside a block-level context., a=testonly Automatic update from web-platform-tests [LayoutNG] Fix inline-level OOFs inside a block-level context. Previously we considered text-align for inline-level OOFs inside a block-level context. But we also needed to avoid floats. This is surprisingly consistent across browsers! However no tests. :( So fixed and added tests! Most of the complexity in this patch is making sure the logical->line->logical coordinate transforms are done correctly. Bug: 933996 Change-Id: I78207f8b7cba62e9d6f48f087fd5202178b42910 Reviewed-on: https://chromium-review.googlesource.com/c/1480071 Reviewed-by: Aleks Totic <atotic@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#634522} -- wpt-commits: 812dd46343fe233b65429abdf871f5658e81f732 wpt-pr: 15490
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-001.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-002.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-003.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-004.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-005.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-006.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-007.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-008.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-009.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-010.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-011.html
testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-012.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: ltr; text-align: left;">
+  <div id=inflow></div>
+  <div id=float style="float: left;"></div>
+  <div id=abs style="transform: translateX(0%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: ltr; text-align: center;">
+  <div id=inflow></div>
+  <div id=float style="float: left;"></div>
+  <div id=abs style="transform: translateX(-50%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-003.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: ltr; text-align: right;">
+  <div id=inflow></div>
+  <div id=float style="float: left;"></div>
+  <div id=abs style="transform: translateX(-100%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-004.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: ltr; text-align: left;">
+  <div id=inflow></div>
+  <div id=float style="float: right;"></div>
+  <div id=abs style="transform: translateX(0%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-005.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: ltr; text-align: center;">
+  <div id=inflow></div>
+  <div id=float style="float: right;"></div>
+  <div id=abs style="transform: translateX(-50%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-006.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: ltr; text-align: right;">
+  <div id=inflow></div>
+  <div id=float style="float: right;"></div>
+  <div id=abs style="transform: translateX(-100%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-007.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: rtl; text-align: right;">
+  <div id=inflow></div>
+  <div id=float style="float: left;"></div>
+  <div id=abs style="transform: translateX(0%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-008.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: rtl; text-align: center;">
+  <div id=inflow></div>
+  <div id=float style="float: left;"></div>
+  <div id=abs style="transform: translateX(50%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-009.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: rtl; text-align: left;">
+  <div id=inflow></div>
+  <div id=float style="float: left;"></div>
+  <div id=abs style="transform: translateX(100%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-010.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: rtl; text-align: right;">
+  <div id=inflow></div>
+  <div id=float style="float: right;"></div>
+  <div id=abs style="transform: translateX(0%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-011.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: rtl; text-align: center;">
+  <div id=inflow></div>
+  <div id=float style="float: right;"></div>
+  <div id=abs style="transform: translateX(50%);"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-012.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Tests the static position of inline-level absolute-positioned elements, with combinations of float, direction, and text-align." />
+<style>
+#container { position: relative; background: red; width: 100px; height: 100px; }
+#container > div { background: green; }
+#inflow { height: 50px; }
+#float { float: left; width: 50px; height: 50px; }
+#abs { display: inline; position: absolute; width: 50px; height: 50px; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id=container style="direction: rtl; text-align: left;">
+  <div id=inflow></div>
+  <div id=float style="float: right;"></div>
+  <div id=abs style="transform: translateX(100%);"></div>
+</div>