mirror of
https://github.com/servo/servo.git
synced 2025-08-27 16:18:21 +01:00
Update web-platform-tests to revision d6d3f7267e817925131675bfc203c62bda96febe
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
a0e4ea9f56
commit
e0fb3fc586
113 changed files with 1321 additions and 334 deletions
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<title>orthogonal flow parent with max-height</title>
|
||||
<meta charset=utf-8>
|
||||
<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">
|
||||
<meta name="assert" content="If an orthogonal flow's parent doesn't have a definite block size but does have a max block size, use that as the available size">
|
||||
<link rel="match" href="reference/available-size-011-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<style>
|
||||
main {
|
||||
max-height: 1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
div {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the word “ＰＡＳＳ” (without the quotation marks) appears below, written horizontally from left to right.
|
||||
<main><div>Ｓ Ｓ Ａ Ｐ</div></main>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing Available Space in Orthogonal Flows / max-height + min-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, increased by min-height if it exists and is larger. (same as -001, with min-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: 4ch; /* **max**-height does not give the element a definite block size */
|
||||
min-height: 8ch;
|
||||
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 min-height of its parent, it should wrap just right for the green 0 to
|
||||
overlap with the red one. -->
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing Available Space in Orthogonal Flows / height + min-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, increased by the min-height if it is set and is larger (same as -003, with min-height).">
|
||||
<meta name="flags" content="">
|
||||
<style>
|
||||
body > div {
|
||||
font-family: monospace; /* to be able to reliably measure things in ch*/
|
||||
font-size: 20px;
|
||||
height: 4ch;
|
||||
min-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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing Available Space in Orthogonal Flows / height + min-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 increased by min-height if that's larger, even if some other content already consumes some of it (same as -005, with min-height).">
|
||||
<meta name="flags" content="">
|
||||
<style>
|
||||
body > div {
|
||||
font-family: monospace; /* to be able to reliably measure things in ch*/
|
||||
font-size: 20px;
|
||||
height: 4ch;
|
||||
min-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>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing Available Space in Orthogonal Flows / ICB / tall max-height + min-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 and min-height, and max-height is smaller than the ICB but min-height is larger than the ICB, use the ICB as the available space (same as -008, with min-height).">
|
||||
<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: 40vh;
|
||||
min-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>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing Available Space in Orthogonal Flows / ICB / tall height + min-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 and min-height, and height is smaller than the ICB but min-height is larger than the ICB, use the ICB as the available space (same as -009, with min-height).">
|
||||
<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: 40vh;
|
||||
min-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>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing Available Space in Orthogonal Flows / height + min-height parent</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 has a height and a min-height larger than the height, use min-height as the available size.">
|
||||
<meta name="flags" content="">
|
||||
<style>
|
||||
body > div {
|
||||
font-family: monospace; /* to be able to reliably measure things in ch*/
|
||||
font-size: 20px;
|
||||
height: 4ch;
|
||||
min-height: 8ch;
|
||||
color: transparent;
|
||||
position: relative; /* to act as a container of #green */
|
||||
}
|
||||
|
||||
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 {
|
||||
position: absolute;
|
||||
background: red;
|
||||
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="red">0</aside>
|
||||
<div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div takes its height from
|
||||
the min-height of its parent (which it should)
|
||||
it should wrap just right for the green 0 to
|
||||
overlap with the red one. -->
|
||||
</div>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing Available Space in Orthogonal Flows / max-height + min-height parent</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 has a max-height and a min-height larger than the height, use min-height as the available 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: 4ch;
|
||||
min-height: 8ch;
|
||||
color: transparent;
|
||||
position: relative; /* to act as a container of #green */
|
||||
}
|
||||
|
||||
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 {
|
||||
position: absolute;
|
||||
background: red;
|
||||
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="red">0</aside>
|
||||
<div>0 0 0 0 <span>0</span> 0 0 0</div> <!-- If this div takes its height from
|
||||
the min-height of its parent (which it should)
|
||||
it should wrap just right for the green 0 to
|
||||
overlap with the red one. -->
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<title>CSS writing mode test reference</title>
|
||||
<meta charset=utf-8>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
line-height: 1em;
|
||||
height: 1em;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the word “ＰＡＳＳ” (without the quotation marks) appears below, written horizontally from left to right.
|
||||
<div>Ｓ Ｓ Ａ Ｐ</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue