[LayoutNG] OOF static position with conflicting direction
We were always using the containing block's writing mode when
converting the static position because we want the offset to be
relative to the CB. However, this resulted in an incorrect offset
when the multicol had a different direction. Instead of always
using the CB's writing mode when converting the static position, use
the current fragment's writing mode.
The added tests are based on their non-multicol counterparts. Some
of the tests passed previously if there was no writing mode mismatch.
Bug: 1228746
Change-Id: I2027ccd7c384a75f54d8dc5833de775f3ab7e58c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3025848
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#901570}
diff --git a/css/css-position/static-position/multicol/vlr-in-multicol-ref.html b/css/css-position/static-position/multicol/vlr-in-multicol-ref.html
new file mode 100644
index 0000000..908f43a
--- /dev/null
+++ b/css/css-position/static-position/multicol/vlr-in-multicol-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+ body { writing-mode: vertical-lr; }
+ .container {
+ background: green;
+ inline-size: 80px;
+ block-size: 600px;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container"></div>
+</div>
diff --git a/css/css-position/static-position/multicol/vlr-ltr-ltr-in-multicol.html b/css/css-position/static-position/multicol/vlr-ltr-ltr-in-multicol.html
new file mode 100644
index 0000000..5b597a6
--- /dev/null
+++ b/css/css-position/static-position/multicol/vlr-ltr-ltr-in-multicol.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="vlr-in-multicol-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+ body { writing-mode: vertical-lr; }
+ .container {
+ position: relative;
+ background: green;
+ font: 16px/1 Ahem;
+ inline-size: 80px;
+ block-size: 100px;
+ color: green;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+ .red { color: red; }
+ .cb { position: relative; }
+ .rtl { direction: rtl; }
+ .ltr { direction: ltr; }
+ .inline { display: inline; }
+ .abs { position: absolute; }
+ .zero-inline { inset-inline-start: 0;}
+ .zero-block { inset-block-start: 0;}
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container ltr">
+ X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="ltr cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="ltr cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ <span class="cb">X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
+ </div>
+
+ <div class="container ltr">
+ <span class="cb">X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
+ </div>
+</div>
diff --git a/css/css-position/static-position/multicol/vlr-ltr-rtl-in-multicol.tentative.html b/css/css-position/static-position/multicol/vlr-ltr-rtl-in-multicol.tentative.html
new file mode 100644
index 0000000..bef4c85
--- /dev/null
+++ b/css/css-position/static-position/multicol/vlr-ltr-rtl-in-multicol.tentative.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="vlr-in-multicol-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+ body { writing-mode: vertical-lr; }
+ .container {
+ position: relative;
+ background: green;
+ font: 16px/1 Ahem;
+ inline-size: 80px;
+ block-size: 100px;
+ color: green;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+ .red { color: red; }
+ .cb { position: relative; }
+ .rtl { direction: rtl; }
+ .ltr { direction: ltr; }
+ .inline { display: inline; }
+ .abs { position: absolute; }
+ .zero-inline { inset-inline-start: 0;}
+ .zero-block { inset-block-start: 0;}
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container ltr">
+ X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ <span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
+ </div>
+
+ <div class="container ltr">
+ <span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
+ </div>
+</div>
diff --git a/css/css-position/static-position/multicol/vlr-rtl-ltr-in-multicol.tentative.html b/css/css-position/static-position/multicol/vlr-rtl-ltr-in-multicol.tentative.html
new file mode 100644
index 0000000..ef2e5b7
--- /dev/null
+++ b/css/css-position/static-position/multicol/vlr-rtl-ltr-in-multicol.tentative.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="vlr-in-multicol-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+ body { writing-mode: vertical-lr; }
+ .container {
+ position: relative;
+ background: green;
+ font: 16px/1 Ahem;
+ inline-size: 80px;
+ block-size: 100px;
+ color: green;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+ .red { color: red; }
+ .cb { position: relative; }
+ .rtl { direction: rtl; }
+ .ltr { direction: ltr; }
+ .inline { display: inline; }
+ .abs { position: absolute; }
+ .zero-inline { inset-inline-start: 0;}
+ .zero-block { inset-block-start: 0;}
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container rtl">
+ X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="ltr cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="ltr cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ <span class="cb">X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
+ </div>
+
+ <div class="container rtl">
+ <span class="cb">X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
+ </div>
+</div>
diff --git a/css/css-position/static-position/multicol/vlr-rtl-rtl-in-multicol.html b/css/css-position/static-position/multicol/vlr-rtl-rtl-in-multicol.html
new file mode 100644
index 0000000..1bfcf21
--- /dev/null
+++ b/css/css-position/static-position/multicol/vlr-rtl-rtl-in-multicol.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="vlr-in-multicol-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+ body { writing-mode: vertical-lr; }
+ .container {
+ position: relative;
+ background: green;
+ font: 16px/1 Ahem;
+ inline-size: 80px;
+ block-size: 100px;
+ color: green;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+ .red { color: red; }
+ .cb { position: relative; }
+ .rtl { direction: rtl; }
+ .ltr { direction: ltr; }
+ .inline { display: inline; }
+ .abs { position: absolute; }
+ .zero-inline { inset-inline-start: 0;}
+ .zero-block { inset-block-start: 0;}
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container rtl">
+ X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ <span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
+ </div>
+
+ <div class="container rtl">
+ <span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
+ </div>
+</div>
diff --git a/css/css-position/static-position/multicol/vrl-in-multicol-ref.html b/css/css-position/static-position/multicol/vrl-in-multicol-ref.html
new file mode 100644
index 0000000..0e22219
--- /dev/null
+++ b/css/css-position/static-position/multicol/vrl-in-multicol-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+ body { writing-mode: vertical-rl; }
+ .container {
+ background: green;
+ inline-size: 80px;
+ block-size: 600px;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container"></div>
+</div>
diff --git a/css/css-position/static-position/multicol/vrl-ltr-ltr-in-multicol.html b/css/css-position/static-position/multicol/vrl-ltr-ltr-in-multicol.html
new file mode 100644
index 0000000..1d6c584
--- /dev/null
+++ b/css/css-position/static-position/multicol/vrl-ltr-ltr-in-multicol.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="vrl-in-multicol-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+ body { writing-mode: vertical-rl; }
+ .container {
+ position: relative;
+ background: green;
+ font: 16px/1 Ahem;
+ inline-size: 80px;
+ block-size: 100px;
+ color: green;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+ .red { color: red; }
+ .cb { position: relative; }
+ .rtl { direction: rtl; }
+ .ltr { direction: ltr; }
+ .inline { display: inline; }
+ .abs { position: absolute; }
+ .zero-inline { inset-inline-start: 0;}
+ .zero-block { inset-block-start: 0;}
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container ltr">
+ X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="ltr cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="ltr cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ <span class="cb">X<span class="ltr">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
+ </div>
+
+ <div class="container ltr">
+ <span class="cb">X<span class="ltr">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
+ </div>
+</div>
diff --git a/css/css-position/static-position/multicol/vrl-ltr-rtl-in-multicol.tentative.html b/css/css-position/static-position/multicol/vrl-ltr-rtl-in-multicol.tentative.html
new file mode 100644
index 0000000..900a649
--- /dev/null
+++ b/css/css-position/static-position/multicol/vrl-ltr-rtl-in-multicol.tentative.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="vrl-in-multicol-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+ body { writing-mode: vertical-rl; }
+ .container {
+ position: relative;
+ background: green;
+ font: 16px/1 Ahem;
+ inline-size: 80px;
+ block-size: 100px;
+ color: green;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+ .red { color: red; }
+ .cb { position: relative; }
+ .rtl { direction: rtl; }
+ .ltr { direction: ltr; }
+ .inline { display: inline; }
+ .abs { position: absolute; }
+ .zero-inline { inset-inline-start: 0;}
+ .zero-block { inset-block-start: 0;}
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container ltr">
+ X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container ltr">
+ <span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
+ </div>
+
+ <div class="container ltr">
+ <span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
+ </div>
+</div>
diff --git a/css/css-position/static-position/multicol/vrl-rtl-ltr-in-multicol.tentative.html b/css/css-position/static-position/multicol/vrl-rtl-ltr-in-multicol.tentative.html
new file mode 100644
index 0000000..4195143
--- /dev/null
+++ b/css/css-position/static-position/multicol/vrl-rtl-ltr-in-multicol.tentative.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="vrl-in-multicol-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+ body { writing-mode: vertical-rl; }
+ .container {
+ position: relative;
+ background: green;
+ font: 16px/1 Ahem;
+ inline-size: 80px;
+ block-size: 100px;
+ color: green;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+ .red { color: red; }
+ .cb { position: relative; }
+ .rtl { direction: rtl; }
+ .ltr { direction: ltr; }
+ .inline { display: inline; }
+ .abs { position: absolute; }
+ .zero-inline { inset-inline-start: 0;}
+ .zero-block { inset-block-start: 0;}
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container rtl">
+ X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ <span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
+ </div>
+
+ <div class="container rtl">
+ <span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
+ </div>
+</div>
diff --git a/css/css-position/static-position/multicol/vrl-rtl-rtl-in-multicol.html b/css/css-position/static-position/multicol/vrl-rtl-rtl-in-multicol.html
new file mode 100644
index 0000000..bb59d4f
--- /dev/null
+++ b/css/css-position/static-position/multicol/vrl-rtl-rtl-in-multicol.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
+<link rel="match" href="vrl-in-multicol-ref.html">
+<meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+ body { writing-mode: vertical-rl; }
+ .container {
+ position: relative;
+ background: green;
+ font: 16px/1 Ahem;
+ inline-size: 80px;
+ block-size: 100px;
+ color: green;
+ }
+ .multicol {
+ column-count: 2;
+ column-fill: auto;
+ column-gap: 0;
+ block-size: 100px;
+ inline-size: 160px;
+ }
+ .red { color: red; }
+ .cb { position: relative; }
+ .rtl { direction: rtl; }
+ .ltr { direction: ltr; }
+ .inline { display: inline; }
+ .abs { position: absolute; }
+ .zero-inline { inset-inline-start: 0;}
+ .zero-block { inset-block-start: 0;}
+</style>
+
+There should be no red.
+<div class="multicol">
+ <div class="container rtl">
+ X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
+ </div>
+ <div class="container rtl">
+ X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
+ </div>
+
+ <div class="container rtl">
+ <span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
+ </div>
+
+ <div class="container rtl">
+ <span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
+ </div>
+</div>
