mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision 70fdd27f4cecb8a5cae3dafa76ba05265531c9e2
This commit is contained in:
WPT Sync Bot
parent
e5689df6b4
commit
bea56037ef
701 changed files with 13864 additions and 1909 deletions
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: anywhere introduces additional soft wrap opportunities.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
font-family: Ahem;
|
||||
line-height: 1em;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 5ch;
|
||||
|
||||
word-break: keep-all;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXXX<br>XXX</div>
|
||||
<div class="test">XXXXXXXX</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap - anywhere (basic)</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="overflow-wrap-001-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="The 'overflow-wrap' property set 'anywhere' breaks the word at an arbitrary point">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
#test {
|
||||
border: 5px solid orange;
|
||||
font: 20px/1 Ahem;
|
||||
overflow-wrap: anywhere;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if the black box is within the orange box.</p>
|
||||
<p id="test">FillerTextFillerTextFillerTextFillerText</p>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap - anywhere and white-space - nowrap</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
|
||||
<link rel="help" title="3 White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-nowrap">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="overflow-wrap-002-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="Test checks that the 'overflow-wrap' property has effect if and only if the 'white-space' allows wrapping">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
#ref {
|
||||
border: 5px solid orange;
|
||||
font: 20px/1 Ahem;
|
||||
overflow-wrap: anywhere;
|
||||
width: 200px;
|
||||
}
|
||||
#test {
|
||||
border: 5px solid blue;
|
||||
font: 20px/1 Ahem;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p>
|
||||
<p id="ref">FillerTextFillerTextFillerTextFillerText</p>
|
||||
<p id="test">FillerTextFillerTextFillerTextFillerText</p>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="The text is wrapped into two lines, since there is no need to break the second line using the space in the middle.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="ref">XXX<br>X X</div>
|
||||
<div class="test">XXXX<span> </span>X</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'overflow-wrap: anywhere' applies correctly when there is styled text using 'span' elements.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: transparent;
|
||||
width: 4ch;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"><span style="color: green">XX</span>XX<br>XX</div>
|
||||
<div class="test">XX<span style="color: green">XXXX</span>XX</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>overlfow-wrap: anywhere on inline element</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<meta name="flags" content="Ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="'overflow-wrap: anywhwre' allows breaking before punctuation characters">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 1em;
|
||||
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="fail">X<br>X</div>
|
||||
<div class="test"><span>X</span><span>.</span></div>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>overlfow-wrap: anywhere on inline element</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<meta name="flags" content="Ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="'overflow-wrap: anywhere' works when specified on inline element">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div, span {
|
||||
font: 10px / 1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.testdiv {
|
||||
width: 5ch;
|
||||
}
|
||||
.test {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="fail">XXXXXXXXXX<br>XXXXX<br>XXXX<br>XXX</div>
|
||||
<div class="testdiv">XXXXXXXXXX<span class="test">XXXXXXXXX</span>XXX</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>overlfow-wrap: anywhere on inline element</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<meta name="flags" content="Ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="'overflow-wrap: anywhere' allows to break after the first character of the inline-block it applies to">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div, span {
|
||||
font: 50px / 1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.testdiv {
|
||||
width: 2ch;
|
||||
}
|
||||
.test {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="fail">XX<br>XX</div>
|
||||
<div class="testdiv">XX<span class="test">XX</span></div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>overlfow-wrap: anywhere on inline element</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<meta name="flags" content="Ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="'overflow-wrap: anywhere' should break after the last character of the inline-block it applies to">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div, span {
|
||||
font: 25px / 1 Ahem;
|
||||
color: green;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.testdiv {
|
||||
width: 2ch;
|
||||
}
|
||||
.test {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="fail">XX<br>X<br>XX<br></div>
|
||||
<div class="testdiv">X<span class="test">XX</span>XX</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: break-word</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="The text is wrapped into two lines, since there is no need to break the second line using the space in the middle.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="ref">XXX<br>X X</div>
|
||||
<div class="test">XXXX<span> </span>X</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: break-word</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'overflow-wrap: break-word' applies correctly when there is styled text using 'span' elements.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.ref {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: transparent;
|
||||
width: 4ch;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="ref"><span style="color: green">XX</span>XX<br>XX</div>
|
||||
<div class="test">XX<span style="color: green">XXXX</span>XX</div>
|
||||
</body>
|
||||
|
|
@ -6,8 +6,10 @@
|
|||
<meta name="flags" content="">
|
||||
<link rel="match" href="reference/overflow-wrap-min-content-size-001-ref.html">
|
||||
<meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:anywhere **are** considered when calculating min-content intrinsic sizes.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
table {
|
||||
font: 20px/1 Ahem;
|
||||
overflow-wrap: anywhere;
|
||||
max-width: 0;
|
||||
border: 0;
|
||||
|
|
@ -19,6 +21,7 @@ td {
|
|||
color: transparent;
|
||||
}
|
||||
#red {
|
||||
font: 20px/1 Ahem;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: red;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@
|
|||
<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<meta name="flags" content="">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-min-content-size-004-ref.html">
|
||||
<meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:break-word **are not** considered when calculating min-content intrinsic sizes.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
table {
|
||||
font: 20px/1 Ahem;
|
||||
overflow-wrap: break-word;
|
||||
max-width: 0;
|
||||
border: 0;
|
||||
|
|
@ -19,6 +21,7 @@ td {
|
|||
color: transparent;
|
||||
}
|
||||
#red {
|
||||
font: 20px/1 Ahem;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: red;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-min-content-size-001-ref.html">
|
||||
<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: anywhere' introduce additional soft wrap opportunities, which **are** considered when calculating min-content intrinsic sizes.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#red {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: red;
|
||||
color: transparent;
|
||||
}
|
||||
.test {
|
||||
background: green;
|
||||
color: transparent;
|
||||
width: min-content;
|
||||
|
||||
word-break: keep-all;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a green box below and no red.
|
||||
<div id=red>X<br>X<br>X<br>X</div>
|
||||
<div class="test">XXXX</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-min-content-size-004-ref.html">
|
||||
<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: break-word' introduce additional soft wrap opportunities, which **are not** considered when calculating min-content intrinsic sizes.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
#red {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: red;
|
||||
color: transparent;
|
||||
}
|
||||
.test {
|
||||
background: green;
|
||||
color: transparent;
|
||||
width: min-content;
|
||||
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a green box below and no red.
|
||||
<div id=red>XXXX</div>
|
||||
<div class="test">XXXX</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="'overflow-wrap: anywhere' allows breaking before punctuation characters and it should be considered when computing the min-content size.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: min-content;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="fail">X<br>X</div>
|
||||
<div class="test"><span>X</span><span>.</span></div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="'overflow-wrap: break-words allows breaking before punctuation characters, but these breaking opportunnites shouldn't be considered when computing the min-content size.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
background: green;
|
||||
position: absolute;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: min-content;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="fail">XX</div>
|
||||
<div class="test"><span>X</span><span>.</span></div>
|
||||
|
|
@ -2,8 +2,10 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Text Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: transparent;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
<meta charset="utf-8">
|
||||
<title>CSS Text Test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: transparent;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue