mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-27 20:25:44 +00:00
Bug 1456739 [wpt PR 10627] - [css-text] white-space and intrinsic sizing, a=testonly
Automatic update from web-platform-tests [css-text] overflow-wrap and intrinsic sizing Goes together with the spec changes for https://github.com/w3c/csswg-drafts/issues/2465 -- [css-text] break-spaces has moved from overflow-wrap to white-space -- Merge pull request #10627 from frivoal/text-2465 [css-text] white-space and intrinsic sizing -- wpt-commits: b439b5793f217eeb5ec1dd941161f6206ab2938d, ae2ef2d8cf5cab2db0a477411ea7f9cc79f6f737, 67b751ef3b96755111d9f845efd3b21c014d68bc wpt-pr: 10627
This commit is contained in:
Florian Rivoal
James Graham
parent
6c77d91b60
commit
067169fc9a
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
color: transparent;
|
||||
font-size: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle below and no red.
|
||||
<div>XS<br>S<br>XS<br>S</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
color: transparent;
|
||||
background: blue;
|
||||
font-family: monospace;
|
||||
font-size: 50px;
|
||||
width: 3ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a single blue rectangle below.
|
||||
<div>
|
||||
XXX<br>
|
||||
XXX
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
color: transparent;
|
||||
font-size: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle below and no red.
|
||||
<div>X<br>X</div>
|
||||
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
aside {
|
||||
float: left;
|
||||
background: blue;
|
||||
}
|
||||
div {
|
||||
color: transparent;
|
||||
font-family: monospace;
|
||||
font-size: 50px;
|
||||
width: 5ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a single blue rectangle below.
|
||||
<div>
|
||||
<aside class=own>X</aside>
|
||||
<aside class=owbw>X</aside>
|
||||
</div>
|
||||
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: min-content sizing and white-space: break-spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/white-space-intrinsic-size-001-ref.html">
|
||||
<meta name="assert" content="When white-space is break-spaces, preserved spaces at the end of the line do affect the intrinsic min-content size. Overflow-wrap makes no difference.">
|
||||
<style>
|
||||
aside {
|
||||
float: left;
|
||||
white-space: break-spaces;
|
||||
background: green;
|
||||
}
|
||||
aside:last-of-type { overflow-wrap: break-word; }
|
||||
div {
|
||||
font-family: monospace;
|
||||
color: transparent;
|
||||
font-size: 50px;
|
||||
width: 0ch;
|
||||
}
|
||||
|
||||
#red {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: auto;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle below and no red.
|
||||
<div id=red>XS<br>S<br>XS<br>S</div>
|
||||
<div>
|
||||
<aside>X </aside>
|
||||
<aside>X </aside>
|
||||
</div>
|
||||
<!-- Note: the space immediately following the X does not get wrapped,
|
||||
even under break-spaces+break-word:
|
||||
The parent of the flow is 0-width,
|
||||
so the float is min-content sized,
|
||||
which should leave enough room for both the X and one space.
|
||||
break-space+break-word would allow for an emergency wrap before the space
|
||||
if the float itself was sized too small,
|
||||
but it isn't.
|
||||
-->
|
||||
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: max-content sizing and white-space:break-spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/white-space-intrinsic-size-002-ref.html">
|
||||
<meta name="assert" content="If white-space is break-spaces, preserved spaces at the end of the line do affect the intrinsic max-content size. The value of overflow-wrap makes no difference.">
|
||||
<style>
|
||||
aside {
|
||||
float: left;
|
||||
white-space: break-spaces;
|
||||
background: blue;
|
||||
}
|
||||
aside:last-of-type {
|
||||
float:right;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
div {
|
||||
color: transparent;
|
||||
font-family: monospace;
|
||||
font-size: 50px;
|
||||
width: 3ch;
|
||||
/* both floats should take the full 3ch,
|
||||
one on each line
|
||||
and therefore line up to look like a single large box.
|
||||
|
||||
If the spaces are not taken into account for min-content sizing,
|
||||
the floats will leave a gap between them */
|
||||
}
|
||||
.owbw { overflow-wrap: break-word; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a single blue rectangle below.
|
||||
<div>
|
||||
<aside>X </aside>
|
||||
<aside>X </aside>
|
||||
</div>
|
||||
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: min-content sizing and white-space:pre-wrap</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/white-space-intrinsic-size-003-ref.html">
|
||||
<meta name="assert" content="Preserved spaces at the end of the line do not affect the intrinsic min-content size when white-space is pre-wrap. The value of overflow-wrap makes no difference.">
|
||||
<style>
|
||||
aside {
|
||||
float: left;
|
||||
white-space: pre-wrap;
|
||||
background: red;
|
||||
}
|
||||
div {
|
||||
color: transparent;
|
||||
font-size: 50px;
|
||||
width: 0ch;
|
||||
}
|
||||
.own { overflow-wrap: normal; }
|
||||
.owbw{ overflow-wrap: break-word; }
|
||||
|
||||
#green {
|
||||
position: absolute;
|
||||
background: green;
|
||||
z-index: 1;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green rectangle below and no red.
|
||||
<div id=green>X<br>X</div>
|
||||
<div>
|
||||
<aside class=own>X </aside>
|
||||
<aside class=owbw>X </aside>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: max-content sizing and white-space: pre-wrap</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/white-space-intrinsic-size-004-ref.html">
|
||||
<meta name="assert" content="Preserved spaces at the end of the line do not affect the intrinsic max-content size when white-space is pre-wrap. The value of overflow-wrap makes no difference.">
|
||||
<style>
|
||||
aside {
|
||||
float: left;
|
||||
white-space: pre-wrap;
|
||||
background: blue;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
aside:last-of-type { overflow-wrap: break-word; }
|
||||
div {
|
||||
color: transparent;
|
||||
font-family: monospace;
|
||||
font-size: 50px;
|
||||
width: 3ch; /* enough room for both floats if their max-content size does not include the preserved spaces,
|
||||
but not enough if they do, causing a line break in that case. */
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a single blue rectangle below.
|
||||
<div>
|
||||
<aside>X </aside>
|
||||
<aside>X </aside>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user