[LayoutNG] Simplify & correct static position for OOF positioned.

This patch is primarily simplifies how we determine the static position for an OOF positioned node, within the inline context. There are many fixes, (see test cases). Additionally, fixed positioned nodes, now work when they have an inline level containing block. Bug: 636993 Change-Id: I36b573578fc85d9ba9b757f258ec7391eec73c0a Reviewed-on: https://chromium-review.googlesource.com/c/1356999 Commit-Queue: Ian Kilpatrick <[email protected]> Reviewed-by: Aleks Totic <[email protected]> Reviewed-by: Morten Stenshorne <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Cr-Commit-Position: refs/heads/master@{#614426}
web-platform-tests · Dec 6, 2018 · 047734d · 047734d
1 parent fc87d9b
commit 047734d
Show file tree

Hide file tree

Showing 15 changed files with 997 additions and 0 deletions.
diff --git a/css/css-position/static-position/htb-ltr-ltr.html b/css/css-position/static-position/htb-ltr-ltr.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="htb-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<style>
+.container {
+  position: relative;
+  background: green;
+  color: green;
+  font: 16px/1 Ahem;
+  border: solid black 3px;
+  width: 400px;
+  margin: 16px 0;
+}
+.red { color: red; }
+.cb { position: relative; }
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+.inline { display: inline; }
+.abs { position: absolute; }
+
+.indent { text-indent: 20px; }
+* { text-indent: initial; }
+</style>
+
+There should be no red.
+<div class="container ltr">
+  XXX<span class="ltr">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr indent">
+  XXX<span class="ltr">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr">
+  XXX<span class="ltr">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr indent">
+  XXX<span class="ltr">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr">
+  XXX<span class="ltr cb">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr indent">
+  XXX<span class="ltr cb">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr">
+  XXX<span class="ltr cb">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr indent">
+  XXX<span class="ltr cb">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr">
+  <span class="cb">XXX<span class="ltr">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container ltr indent">
+  <span class="cb">XXX<span class="ltr">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container ltr">
+  <span class="cb">XXX<span class="ltr">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container ltr indent">
+  <span class="cb">XXX<span class="ltr">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span></span>
+</div>
diff --git a/css/css-position/static-position/htb-ltr-rtl.tentative.html b/css/css-position/static-position/htb-ltr-rtl.tentative.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="htb-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<style>
+.container {
+  position: relative;
+  background: green;
+  color: green;
+  font: 16px/1 Ahem;
+  border: solid black 3px;
+  width: 400px;
+  margin: 16px 0;
+}
+.red { color: red; }
+.cb { position: relative; }
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+.inline { display: inline; }
+.abs { position: absolute; }
+
+.indent { text-indent: 20px; }
+* { text-indent: initial; }
+</style>
+
+There should be no red.
+<div class="container ltr">
+  XXX<span class="rtl">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr indent">
+  XXX<span class="rtl">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr">
+  XXX<span class="rtl">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr indent">
+  XXX<span class="rtl">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr">
+  XXX<span class="rtl cb">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr indent">
+  XXX<span class="rtl cb">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr">
+  XXX<span class="rtl cb">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr indent">
+  XXX<span class="rtl cb">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container ltr">
+  <span class="cb">XXX<span class="rtl">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container ltr indent">
+  <span class="cb">XXX<span class="rtl">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container ltr">
+  <span class="cb">XXX<span class="rtl">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container ltr indent">
+  <span class="cb">XXX<span class="rtl">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span></span>
+</div>
diff --git a/css/css-position/static-position/htb-ref.html b/css/css-position/static-position/htb-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<style>
+.container {
+  background: green;
+  height: 16px;
+  border: solid black 3px;
+  width: 400px;
+  margin: 16px 0;
+}
+
+.large { height: 32px; }
+</style>
+
+There should be no red.
+<div class="container"></div>
+
+<div class="container"></div>
+
+<div class="container large"></div>
+
+<div class="container large"></div>
+
+<div class="container"></div>
+
+<div class="container"></div>
+
+<div class="container large"></div>
+
+<div class="container large"></div>
+
+<div class="container"></div>
+
+<div class="container"></div>
+
+<div class="container large"></div>
+
+<div class="container large"></div>
diff --git a/css/css-position/static-position/htb-rtl-ltr.tentative.html b/css/css-position/static-position/htb-rtl-ltr.tentative.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="htb-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<style>
+.container {
+  position: relative;
+  background: green;
+  color: green;
+  font: 16px/1 Ahem;
+  border: solid black 3px;
+  width: 400px;
+  margin: 16px 0;
+}
+.red { color: red; }
+.cb { position: relative; }
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+.inline { display: inline; }
+.abs { position: absolute; }
+
+.indent { text-indent: 20px; }
+* { text-indent: initial; }
+</style>
+
+There should be no red.
+<div class="container rtl">
+  XXX<span class="ltr">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl indent">
+  XXX<span class="ltr">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl">
+  XXX<span class="ltr">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl indent">
+  XXX<span class="ltr">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl">
+  XXX<span class="ltr cb">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl indent">
+  XXX<span class="ltr cb">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl">
+  XXX<span class="ltr cb">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl indent">
+  XXX<span class="ltr cb">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl">
+  <span class="cb">XXX<span class="ltr">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container rtl indent">
+  <span class="cb">XXX<span class="ltr">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container rtl">
+  <span class="cb">XXX<span class="ltr">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container rtl indent">
+  <span class="cb">XXX<span class="ltr">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span></span>
+</div>
diff --git a/css/css-position/static-position/htb-rtl-rtl.html b/css/css-position/static-position/htb-rtl-rtl.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="htb-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<style>
+.container {
+  position: relative;
+  background: green;
+  color: green;
+  font: 16px/1 Ahem;
+  border: solid black 3px;
+  width: 400px;
+  margin: 16px 0;
+}
+.red { color: red; }
+.cb { position: relative; }
+.rtl { direction: rtl; }
+.ltr { direction: ltr; }
+.inline { display: inline; }
+.abs { position: absolute; }
+
+.indent { text-indent: 20px; }
+* { text-indent: initial; }
+</style>
+
+There should be no red.
+<div class="container rtl">
+  XXX<span class="rtl">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl indent">
+  XXX<span class="rtl">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl">
+  XXX<span class="rtl">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl indent">
+  XXX<span class="rtl">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl">
+  XXX<span class="rtl cb">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl indent">
+  XXX<span class="rtl cb">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl">
+  XXX<span class="rtl cb">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl indent">
+  XXX<span class="rtl cb">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span>
+</div>
+
+<div class="container rtl">
+  <span class="cb">XXX<span class="rtl">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container rtl indent">
+  <span class="cb">XXX<span class="rtl">XX<div class="abs inline">XXXXX</div><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container rtl">
+  <span class="cb">XXX<span class="rtl">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span></span>
+</div>
+
+<div class="container rtl indent">
+  <span class="cb">XXX<span class="rtl">XX<div class="abs block">XXXXX</div><br><span class="red">XXXXX</span></span></span>
+</div>