Bug 1530850 [wpt PR 15490] - [LayoutNG] Fix inline-level OOFs inside a block-level context., a=testonly
authorIan Kilpatrick <ikilpatrick@chromium.org>
Wed, 06 Mar 2019 12:36:16 +0000
changeset 464668 55dcd4b52946
parent 464667 21ae0e9fd907
child 464669 80f87e0a5ed3
push id35717
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:45:26 +0000
treeherdermozilla-central@e0861be8d6c0 [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>