diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
| commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
| tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/css-position/static-position | |
| parent | Initial commit. (diff) | |
| download | thunderbird-upstream.tar.xz thunderbird-upstream.zip | |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-position/static-position')
29 files changed, 1278 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-position/static-position/htb-ltr-ltr.html b/testing/web-platform/tests/css/css-position/static-position/htb-ltr-ltr.html new file mode 100644 index 0000000000..5a19c0e9cc --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/htb-ltr-ltr.html @@ -0,0 +1,74 @@ +<!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." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<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/testing/web-platform/tests/css/css-position/static-position/htb-ltr-rtl.tentative.html b/testing/web-platform/tests/css/css-position/static-position/htb-ltr-rtl.tentative.html new file mode 100644 index 0000000000..de6ef1c6c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/htb-ltr-rtl.tentative.html @@ -0,0 +1,74 @@ +<!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." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<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/testing/web-platform/tests/css/css-position/static-position/htb-ref.html b/testing/web-platform/tests/css/css-position/static-position/htb-ref.html new file mode 100644 index 0000000000..bd534b0772 --- /dev/null +++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-position/static-position/htb-rtl-ltr.tentative.html b/testing/web-platform/tests/css/css-position/static-position/htb-rtl-ltr.tentative.html new file mode 100644 index 0000000000..c3a3155a10 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/htb-rtl-ltr.tentative.html @@ -0,0 +1,74 @@ +<!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." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<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/testing/web-platform/tests/css/css-position/static-position/htb-rtl-rtl.html b/testing/web-platform/tests/css/css-position/static-position/htb-rtl-rtl.html new file mode 100644 index 0000000000..03ea18770a --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/htb-rtl-rtl.html @@ -0,0 +1,74 @@ +<!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." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-001.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-001.html new file mode 100644 index 0000000000..d6f8ed4e39 --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-002.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-002.html new file mode 100644 index 0000000000..9b0f5c2bea --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-003.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-003.html new file mode 100644 index 0000000000..90db2d4f80 --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-004.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-004.html new file mode 100644 index 0000000000..a6b13b26c8 --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-005.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-005.html new file mode 100644 index 0000000000..481c83a757 --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-006.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-006.html new file mode 100644 index 0000000000..de5322f819 --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-007.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-007.html new file mode 100644 index 0000000000..1168b1d228 --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-008.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-008.html new file mode 100644 index 0000000000..e10a7e191d --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-009.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-009.html new file mode 100644 index 0000000000..86102fa1d9 --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-010.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-010.html new file mode 100644 index 0000000000..95d43b9cfb --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-011.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-011.html new file mode 100644 index 0000000000..375566388e --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-012.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-012.html new file mode 100644 index 0000000000..1972317822 --- /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> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-013.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-013.html new file mode 100644 index 0000000000..59541dd679 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-013.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/982403" /> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Tests the static position of an inline-level absolute-positioned element." /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="overflow: hidden;"> + <div style="float: left; width: 100px; height: 50px; background: green;"></div> + <div style="clear: both; width: 100px; height: 50px; background: red;"> + <div style="position: absolute; display: inline; width: 100px; height: 50px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-014.html b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-014.html new file mode 100644 index 0000000000..69416c1cd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/inline-level-absolute-in-block-level-context-014.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/982403" /> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Tests the static position of an inline-level absolute-positioned element." /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="overflow: hidden;"> + <div style="float: left; width: 100px; height: 50px; background: green;"></div> + <div style="clear: both; width: 100px; height: 50px; background: red;"> + <div></div> + <div style="position: absolute; display: inline; width: 100px; height: 50px; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-position/static-position/vlr-ltr-ltr.html b/testing/web-platform/tests/css/css-position/static-position/vlr-ltr-ltr.html new file mode 100644 index 0000000000..992bb720f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vlr-ltr-ltr.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> +<link rel="match" href="vlr-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; + color: green; + font: 16px/1 Ahem; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} +.red { color: red; } +.cb { + position: relative; + inset-block-start: 2px; + inset-inline-start: 2px; +} +.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/testing/web-platform/tests/css/css-position/static-position/vlr-ltr-rtl.tentative.html b/testing/web-platform/tests/css/css-position/static-position/vlr-ltr-rtl.tentative.html new file mode 100644 index 0000000000..9491fb89a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vlr-ltr-rtl.tentative.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> +<link rel="match" href="vlr-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; + color: green; + font: 16px/1 Ahem; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} +.red { color: red; } +.cb { + position: relative; + inset-block-start: 2px; + inset-inline-start: 2px; +} +.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/testing/web-platform/tests/css/css-position/static-position/vlr-ref.html b/testing/web-platform/tests/css/css-position/static-position/vlr-ref.html new file mode 100644 index 0000000000..2ab92decd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vlr-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<style> +body { writing-mode: vertical-lr; } +.container { + background: green; + width: 16px; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} + +.large { width: 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/testing/web-platform/tests/css/css-position/static-position/vlr-rtl-ltr.tentative.html b/testing/web-platform/tests/css/css-position/static-position/vlr-rtl-ltr.tentative.html new file mode 100644 index 0000000000..e334ff74b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vlr-rtl-ltr.tentative.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> +<link rel="match" href="vlr-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; + color: green; + font: 16px/1 Ahem; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} +.red { color: red; } +.cb { + position: relative; + inset-block-start: 2px; + inset-inline-start: 2px; +} +.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/testing/web-platform/tests/css/css-position/static-position/vlr-rtl-rtl.html b/testing/web-platform/tests/css/css-position/static-position/vlr-rtl-rtl.html new file mode 100644 index 0000000000..45c8aa3c26 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vlr-rtl-rtl.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> +<link rel="match" href="vlr-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; + color: green; + font: 16px/1 Ahem; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} +.red { color: red; } +.cb { + position: relative; + inset-block-start: 2px; + inset-inline-start: 2px; +} +.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> diff --git a/testing/web-platform/tests/css/css-position/static-position/vrl-ltr-ltr.html b/testing/web-platform/tests/css/css-position/static-position/vrl-ltr-ltr.html new file mode 100644 index 0000000000..9e3c1306ab --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vrl-ltr-ltr.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> +<link rel="match" href="vrl-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; + color: green; + font: 16px/1 Ahem; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} +.red { color: red; } +.cb { + position: relative; + inset-block-start: 2px; + inset-inline-start: 2px; +} +.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/testing/web-platform/tests/css/css-position/static-position/vrl-ltr-rtl.tentative.html b/testing/web-platform/tests/css/css-position/static-position/vrl-ltr-rtl.tentative.html new file mode 100644 index 0000000000..a0923f3b48 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vrl-ltr-rtl.tentative.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> +<link rel="match" href="vrl-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; + color: green; + font: 16px/1 Ahem; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} +.red { color: red; } +.cb { + position: relative; + inset-block-start: 2px; + inset-inline-start: 2px; +} +.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/testing/web-platform/tests/css/css-position/static-position/vrl-ref.html b/testing/web-platform/tests/css/css-position/static-position/vrl-ref.html new file mode 100644 index 0000000000..5e607dbb86 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vrl-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<style> +body { writing-mode: vertical-rl; } +.container { + background: green; + width: 16px; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} + +.large { width: 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/testing/web-platform/tests/css/css-position/static-position/vrl-rtl-ltr.tentative.html b/testing/web-platform/tests/css/css-position/static-position/vrl-rtl-ltr.tentative.html new file mode 100644 index 0000000000..29ae6a5f98 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vrl-rtl-ltr.tentative.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> +<link rel="match" href="vrl-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; + color: green; + font: 16px/1 Ahem; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} +.red { color: red; } +.cb { + position: relative; + inset-block-start: 2px; + inset-inline-start: 2px; +} +.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/testing/web-platform/tests/css/css-position/static-position/vrl-rtl-rtl.html b/testing/web-platform/tests/css/css-position/static-position/vrl-rtl-rtl.html new file mode 100644 index 0000000000..cfb4118718 --- /dev/null +++ b/testing/web-platform/tests/css/css-position/static-position/vrl-rtl-rtl.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" /> +<link rel="match" href="vrl-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; + color: green; + font: 16px/1 Ahem; + border: solid black 3px; + height: 400px; + margin: 0 16px; + padding: 2px; +} +.red { color: red; } +.cb { + position: relative; + inset-block-start: 2px; + inset-inline-start: 2px; +} +.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> |