Commit d8685f3c authored by Chromium WPT Sync's avatar Chromium WPT Sync Committed by Commit Bot

Import wpt@3463f6944e0bda93d51d80e22731fb2b4fe61407

Using wpt-import in Chromium 5c9431a8.
With Chromium commits locally applied on WPT:
9f32e9c0 "S13nServiceWorker: Add tests for network fallback for navigations with request bodies"


Build: https://ci.chromium.org/buildbot/chromium.infra.cron/wpt-importer/11181

Note to sheriffs: This CL imports external tests and adds
expectations for those tests; if this CL is large and causes
a few new failures, please fix the failures by adding new
lines to TestExpectations rather than reverting. See:
https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md

Directory owners for changes in this CL:
kojii@chromium.org:
  external/wpt/css/css-writing-modes

TBR=leon.han@intel.com

No-Export: true
Change-Id: Idd9c9173ee2f1dd245f09e4205c7fabe3ae29cb0
Reviewed-on: https://chromium-review.googlesource.com/890068
Commit-Queue: Blink WPT Bot <blink-w3c-test-autoroller@chromium.org>
Reviewed-by: default avatarBlink WPT Bot <blink-w3c-test-autoroller@chromium.org>
Cr-Commit-Position: refs/heads/master@{#532277}
parent c3bd64cf
...@@ -1752,6 +1752,14 @@ crbug.com/805061 external/wpt/custom-elements/upgrading/Node-cloneNode.html [ Cr ...@@ -1752,6 +1752,14 @@ crbug.com/805061 external/wpt/custom-elements/upgrading/Node-cloneNode.html [ Cr
crbug.com/805463 external/wpt/acid/acid3/numbered-tests.html [ Skip ] crbug.com/805463 external/wpt/acid/acid3/numbered-tests.html [ Skip ]
# ====== New tests from wpt-importer added here ====== # ====== New tests from wpt-importer added here ======
crbug.com/626703 external/wpt/css/css-writing-modes/available-size-002.html [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/available-size-006.html [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/available-size-007.html [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/available-size-008.html [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/available-size-010.html [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/available-size-005.html [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/available-size-003.html [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/available-size-009.html [ Failure ]
crbug.com/626703 [ Linux Mac ] external/wpt/css/css-writing-modes/mongolian-orientation-002.html [ Failure ] crbug.com/626703 [ Linux Mac ] external/wpt/css/css-writing-modes/mongolian-orientation-002.html [ Failure ]
crbug.com/626703 external/wpt/css/css-writing-modes/mongolian-orientation-001.html [ Failure ] crbug.com/626703 external/wpt/css/css-writing-modes/mongolian-orientation-001.html [ Failure ]
crbug.com/626703 [ Android ] virtual/media-gpu-accelerated/external/wpt/media-source/mediasource-config-change-mp4-v-framerate.html [ Crash ] crbug.com/626703 [ Android ] virtual/media-gpu-accelerated/external/wpt/media-source/mediasource-config-change-mp4-v-framerate.html [ Crash ]
......
...@@ -70709,6 +70709,126 @@ ...@@ -70709,6 +70709,126 @@
{} {}
] ]
], ],
"css/css-writing-modes/available-size-001.html": [
[
"/css/css-writing-modes/available-size-001.html",
[
[
"/css/css-writing-modes/reference/available-size-001-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-002.html": [
[
"/css/css-writing-modes/available-size-002.html",
[
[
"/css/css-writing-modes/reference/available-size-002-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-003.html": [
[
"/css/css-writing-modes/available-size-003.html",
[
[
"/css/css-writing-modes/reference/available-size-001-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-004.html": [
[
"/css/css-writing-modes/available-size-004.html",
[
[
"/css/css-writing-modes/reference/available-size-002-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-005.html": [
[
"/css/css-writing-modes/available-size-005.html",
[
[
"/css/css-writing-modes/reference/available-size-001-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-006.html": [
[
"/css/css-writing-modes/available-size-006.html",
[
[
"/css/css-writing-modes/reference/available-size-002-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-007.html": [
[
"/css/css-writing-modes/available-size-007.html",
[
[
"/css/css-writing-modes/reference/available-size-002-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-008.html": [
[
"/css/css-writing-modes/available-size-008.html",
[
[
"/css/css-writing-modes/reference/available-size-002-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-009.html": [
[
"/css/css-writing-modes/available-size-009.html",
[
[
"/css/css-writing-modes/reference/available-size-002-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/available-size-010.html": [
[
"/css/css-writing-modes/available-size-010.html",
[
[
"/css/css-writing-modes/reference/available-size-002-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/background-position-vrl-018.xht": [ "css/css-writing-modes/background-position-vrl-018.xht": [
[ [
"/css/css-writing-modes/background-position-vrl-018.xht", "/css/css-writing-modes/background-position-vrl-018.xht",
...@@ -74561,6 +74681,18 @@ ...@@ -74561,6 +74681,18 @@
{} {}
] ]
], ],
"css/css-writing-modes/nested-orthogonal-001.html": [
[
"/css/css-writing-modes/nested-orthogonal-001.html",
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht": [ "css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht": [
[ [
"/css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht", "/css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht",
...@@ -118815,6 +118947,16 @@ ...@@ -118815,6 +118947,16 @@
{} {}
] ]
], ],
"css/css-writing-modes/reference/available-size-001-ref.html": [
[
{}
]
],
"css/css-writing-modes/reference/available-size-002-ref.html": [
[
{}
]
],
"css/css-writing-modes/reference/bidi-embed-001.html": [ "css/css-writing-modes/reference/bidi-embed-001.html": [
[ [
{} {}
...@@ -290679,6 +290821,46 @@ ...@@ -290679,6 +290821,46 @@
"ee3dc6c4200c4d2127114a515b486b13f04e9bac", "ee3dc6c4200c4d2127114a515b486b13f04e9bac",
"reftest" "reftest"
], ],
"css/css-writing-modes/available-size-001.html": [
"7e04081c2b399a7647577b71da829ba71564a51f",
"reftest"
],
"css/css-writing-modes/available-size-002.html": [
"4df2fa9b43c546d6fcfbcc18c2004577b6ca7f88",
"reftest"
],
"css/css-writing-modes/available-size-003.html": [
"36b2113547c59e8653cbe596844105064733d981",
"reftest"
],
"css/css-writing-modes/available-size-004.html": [
"dc1c04d088049ad6bf277165eb8a48df261cd9cf",
"reftest"
],
"css/css-writing-modes/available-size-005.html": [
"a4ccf0846a049bf9ca582b0e4619f5ed1b8e90e7",
"reftest"
],
"css/css-writing-modes/available-size-006.html": [
"b02ac2c44c61fd7e5c746265eb95f0a6234ee9fd",
"reftest"
],
"css/css-writing-modes/available-size-007.html": [
"4f78ec7de367c78ebbad1a71745a7c92baa29131",
"reftest"
],
"css/css-writing-modes/available-size-008.html": [
"b422cebb5c5839abfa11a049395702cda52a1459",
"reftest"
],
"css/css-writing-modes/available-size-009.html": [
"0d10d0e6ef2133fee22f1cf3e0d46d3df87cdadd",
"reftest"
],
"css/css-writing-modes/available-size-010.html": [
"d0143fe32c956ab0be6e9573cae23f5c718161a1",
"reftest"
],
"css/css-writing-modes/background-position-vlr-003.xht": [ "css/css-writing-modes/background-position-vlr-003.xht": [
"c56c42d17b140be6868cc6f413f545dd6a5180e8", "c56c42d17b140be6868cc6f413f545dd6a5180e8",
"manual" "manual"
...@@ -292347,6 +292529,10 @@ ...@@ -292347,6 +292529,10 @@
"0620ecf2073ce457f139200193b6c5b789de69a6", "0620ecf2073ce457f139200193b6c5b789de69a6",
"reftest" "reftest"
], ],
"css/css-writing-modes/nested-orthogonal-001.html": [
"6af28d8c40bbdf1bf37e02e7a053bfbdf27c14ff",
"reftest"
],
"css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht": [ "css/css-writing-modes/normal-flow-overconstrained-vlr-003.xht": [
"a3143d84b7fe81aebe58aed32ab0706a7e838b21", "a3143d84b7fe81aebe58aed32ab0706a7e838b21",
"reftest" "reftest"
...@@ -292667,6 +292853,14 @@ ...@@ -292667,6 +292853,14 @@
"98709c56c04f6ca8a006c09d3e25e2e46fd9aeb3", "98709c56c04f6ca8a006c09d3e25e2e46fd9aeb3",
"reftest" "reftest"
], ],
"css/css-writing-modes/reference/available-size-001-ref.html": [
"0f6b3e3907f1898bae7b58b11bc4ee0b04a7e94d",
"support"
],
"css/css-writing-modes/reference/available-size-002-ref.html": [
"db010e663d44ba9cdd1dbf4036003cb88b460fe9",
"support"
],
"css/css-writing-modes/reference/bidi-embed-001.html": [ "css/css-writing-modes/reference/bidi-embed-001.html": [
"6000e9bf08042d5e79b805132a64038875973008", "6000e9bf08042d5e79b805132a64038875973008",
"support" "support"
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / max-height / content height</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-001-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does not have a fixed height but does have a fixed max-height, use that, making sure you stick with the content height.">
<meta name="flags" content="">
<style>
body > div {
font-family: monospace; /* to be able to reliably measure things in ch*/
font-size: 20px;
max-height: 8ch; /* **max**-height does not give the element a definite block size */
overflow: hidden;
color: transparent;
position: relative; /* to act as a container of #red */
padding: 1ch 0;
}
div > div { writing-mode: vertical-rl; }
span {
background: green;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
}
#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: red;
left: 0; top: 1ch;
writing-mode: vertical-rl;
z-index: -1;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div>
<aside id="red">0</aside>
<div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div take its height from
the max-height of its parent, it should wrap just right for the green 0 to
overlap with the red one. -->
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / max-height / no scroller</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-002-ref.html">
<meta name="assert" content="When an orthogonal flow's ancestor doesn't have a definite block size but does have a fixed max-height, but isn't a scroller, do not use that size.">
<meta name="flags" content="">
<style>
body > div {
font-family: monospace; /* to be able to reliably measure things in ch*/
font-size: 20px;
max-height: 8ch; /* **max**-height does not give the element a definite block size */
color: transparent;
position: relative; /* to act as a container of #green */
}
div > div > div { writing-mode: vertical-rl; }
span {
background: white;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
}
#green {
position: absolute;
background: green;
left: 0;
writing-mode: vertical-rl;
z-index: -1;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div>
<div>
<aside id="green">0</aside>
<div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div takes its height from
the max-height of its parent (which it shouldn't, since it's not a scroller),
it should wrap just right for the white 0 to
overlap with the green one. -->
</div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / height / content height</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-001-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does have a fixed height, use that, making sure you stick with the content height.">
<meta name="flags" content="">
<style>
body > div {
font-family: monospace; /* to be able to reliably measure things in ch*/
font-size: 20px;
height: 8ch;
width: 300px; /* Shrinkwrapping this div is not what we're interested in testing here, so give it a width. See nested-orthogonal-001.html for that. */
overflow: hidden;
color: transparent;
position: relative; /* to act as a container of #red */
writing-mode: vertical-lr;
padding: 1ch 0;
}
div > div { padding-bottom: 2ch; } /* so that the content height of the parent and of the fixed size scrolling ancestor are different */
div > div > div { writing-mode: vertical-rl; }
span {
background: green;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
}
#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: red;
left: 0; top: 1ch;
writing-mode: vertical-rl;
z-index: -1;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div>
<aside id="red">0</aside>
<div><div>0 0 0 0 <span>0</span> 0 0 0</div></div> <!-- If this div take its height from
the height of its scrollable ancestor, it should wrap just right for the green 0 to
overlap with the red one. -->
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / height / no scroller</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-002-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size but an ancestor that is **not** a scroller does have a fixed height, do not use that.">
<meta name="flags" content="">
<style>
body > div {
font-family: monospace; /* to be able to reliably measure things in ch*/
font-size: 20px;
height: 8ch;
width: 300px; /* Shrinkwrapping this div is not what we're interested in testing here, so give it a width. See nested-orthogonal-001.html for that. */
color: transparent;
position: relative; /* to act as a container of #green */
}
div > div { padding-bottom: 2ch; } /* so that the content height of the parent and of the fixed size ancestor are different */
div > div > div { writing-mode: vertical-rl; }
span {
background: white;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
}
#green { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: green;
left: 0;
writing-mode: vertical-rl;
z-index: -1;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div>
<aside id="green">0</aside>
<div><div>0 0 0 0 <span>0</span> 0 0 0</div></div> <!-- If this div take its height from
the height of its fixed height non scrollable ancestor (which is should not),
it should wrap just right for the white 0 to overlap with the green one. -->
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / height / not remaining size</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-001-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size and the nearest ancestor scroller does a have fixed height, use that whole height, even if some other content already consumes some of it.">
<meta name="flags" content="">
<style>
body > div {
font-family: monospace; /* to be able to reliably measure things in ch*/
font-size: 20px;
height: 8ch;
width: 300px; /* Shrinkwrapping this div is not what we're interested in testing here, so give it a width. See nested-orthogonal-001.html for that. */
overflow: hidden;
color: transparent;
position: relative; /* to act as a container of #red */
}
div > div { padding-bottom: 2ch; } /* so that the content height of the parent and of the fixed size scrolling ancestor are different */
div > div > div { writing-mode: vertical-rl; }
span {
background: green;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
}
#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: red;
left: 0;
writing-mode: vertical-rl;
z-index: -1;
top: 1ch;
}
#spacer { /* shrinks the remaining space of the parent div. */
height: 1ch;
width: 100%;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div>
<aside id="red">0</aside>
<div><aside id="spacer"></aside><div>0 0 0 0 <span>0</span> 0 0 0</div></div>
<!-- If the inner div take its height from the height of its scrollable
ancestor, it should wrap just right for the green 0 to overlap with the red
one. If instead it takes it size from the remaining height after having
removed #spacer, or does some other calculation that takes #spacer into
account, it won't line up with #red.-->
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / ICB</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-002-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's no scroller among ancestors, use the ICB instead.">
<meta name="flags" content="">
<style>
body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
div {
writing-mode: vertical-rl;
font-family: monospace;
font-size: 20px;
position: relative; /* to be a container for #red*/
}
.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
that the line would wrap between spacers if it ends up being
shorter thatn 100vh*/
display: inline-block;
height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
}
span {
background: green;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
color: transparent;
}
#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: red;
writing-mode: vertical-rl;
z-index: -1;
font-family: monospace;
font-size: 20px;
left: 0; top: 0;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / ICB</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-002-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's no scroller among ancestors, use the ICB instead (not the content height of the body element, which is the ICB reduced by body's margins).">
<meta name="flags" content="">
<style>
div {
writing-mode: vertical-rl;
font-family: monospace;
font-size: 20px;
position: relative; /* to be a container for #red*/
}
.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
that the line would wrap between spacers if it ends up being
shorter thatn 100vh*/
display: inline-block;
height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20 taller than 100vh in some browsers*/
}
span {
background: green;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
color: transparent;
}
#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: red;
writing-mode: vertical-rl;
z-index: -1;
font-family: monospace;
font-size: 20px;
left: 0; top: 0;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / ICB / tall max-height scroller</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-002-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's a scroller with max-height, but that scroller has a taller max-height than the ICB, use the ICB instead.">
<meta name="flags" content="">
<style>
body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
div {
writing-mode: vertical-rl;
font-family: monospace;
font-size: 20px;
position: relative; /* to be a container for #red*/
}
.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
that the line would wrap between spacers if it ends up being
shorter thatn 100vh*/
display: inline-block;
height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
}
span {
background: green;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
color: transparent;
}
#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: red;
writing-mode: vertical-rl;
z-index: -1;
font-family: monospace;
font-size: 20px;
left: 0; top: 0;
}
section {
overflow: hidden;
max-height: 120vh;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<section>
<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
</section>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / ICB / tall height scroller</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-002-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and there's a scroller with height, but that scroller is taller than the ICB, use the ICB instead.">
<meta name="flags" content="">
<style>
body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
div {
writing-mode: vertical-rl;
font-family: monospace;
font-size: 20px;
position: relative; /* to be a container for #red*/
}
.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
that the line would wrap between spacers if it ends up being
shorter thatn 100vh*/
display: inline-block;
height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
}
span {
background: green;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
color: transparent;
}
#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: red;
writing-mode: vertical-rl;
z-index: -1;
font-family: monospace;
font-size: 20px;
left: 0; top: 0;
}
section {
overflow: hidden;
writing-mode: vertical-rl;
height: 120vh;
}
section > section {
writing-mode: horizontal-tb;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<section>
<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
</section>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Testing Available Space in Orthogonal Flows / ICB / tall max-height scroller</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="reference/available-size-002-ref.html">
<meta name="assert" content="When an orthogonal flow's parent doesn't have a definite block size, and the nearest scroller goes not have a fixed height or max-height, use the ICB, even if there is another scroller ancestor up the chain that does have fixed dimensions.">
<meta name="flags" content="">
<style>
body { margin-top: 0; margin-bottom: 0; } /* Shouldn't matter, but in some browsers does. -007 tests this aspect specifically. */
div {
writing-mode: vertical-rl;
font-family: monospace;
font-size: 20px;
position: relative; /* to be a container for #red*/
}
.spacer { /* using 5 spacers of 20vh each instead of a single large one, so
that the line would wrap between spacers if it ends up being
shorter thatn 100vh*/
display: inline-block;
height: calc(20vh - 0.1px); /*Using this instead of 20vh, to account for accumulation of rounding errors, that might make 5*20vh taller than 100vh in some browsers*/
}
span {
background: green;
display: inline-block; /* This should not change it's size or position, but makes the size of the background predictable*/
color: transparent;
}
#red { /* Not necessary when when comparing to the reference, but makes human judgement easier */
position: absolute;
background: red;
writing-mode: vertical-rl;
z-index: -1;
font-family: monospace;
font-size: 20px;
left: 0; top: 0;
}
section { overflow: hidden; }
body > section { height: 20ch; }
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<section>
<section>
<section>
<div><aside id="red">0</aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside><aside class="spacer"></aside> <span>0</span></div>
</section>
</section>
</section>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Writing mode</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="In the face of multiple levels of orthogonal flow nesting, children's sizes propagate up to parents.">
<meta name="flags" content="">
<style>
body > div {
background: green;
writing-mode: vertical-lr;
}
div > div { writing-mode: horizontal-tb; }
div > div > div {
writing-mode: vertical-rl;
height: 100px;
font-size: 100px;
line-height: 1;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<div><div>&nbsp;</div></div>
</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test reference</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<style>
body > div {
font-family: monospace; /* to be able to reliably measure things in ch*/
font-size: 20px;
color: transparent;
writing-mode: vertical-rl;
background: green;
border-top: 1ch solid white;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div>0</div>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test reference</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<style>
body > div {
font-family: monospace; /* to be able to reliably measure things in ch*/
font-size: 20px;
color: transparent;
writing-mode: vertical-rl;
background: green;
}
</style>
<p>Test passes if there is a <strong>green rectangle</strong> below and <strong>no red</strong>.
<div>0</div>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment