mirror of
https://github.com/servo/servo.git
synced 2025-08-28 08:38:20 +01:00
Update web-platform-tests to revision 70fdd27f4cecb8a5cae3dafa76ba05265531c9e2
This commit is contained in:
parent
e5689df6b4
commit
bea56037ef
701 changed files with 13864 additions and 1909 deletions
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.3. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-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;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXX<br>X X</div>
|
||||
<div class="test">XXXX<span> </span>X</div>
|
||||
</body>
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-pre">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'line-break: anywhere' can't prevent overflow under 'white-space: pre', because it line wrapping is not allowed. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 10px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
line-break: anywhere;
|
||||
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX<span style="color: green">XXXX</span>XX</div>
|
||||
<div class="test">XXXX XX</div>
|
||||
</body>
|
|
@ -0,0 +1,40 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'line-break: anywhere' can't prevent overflow under 'white-space: nowrap', because it line wrapping is not allowed. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 10px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 5ch;
|
||||
line-break: anywhere;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX XX</div>
|
||||
<div class="test">XXXX XX</div>
|
||||
</body>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-pre">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'line-break: anywhere' can't prevent overflow under 'white-space: pre', because it line wrapping is not allowed. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
line-break: anywhere;
|
||||
|
||||
white-space: pre;
|
||||
}
|
||||
</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">X</span>XXX</div>
|
||||
<div class="test"> XXX</div>
|
||||
</body>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-normal">
|
||||
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="The line is wrapped ignoring the white space, which will be removed honoring 'white-space: normal'">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
line-break: anywhere;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXX<br>XX</div>
|
||||
<div class="test">XXX<span style="background: red"> </span>XX</div>
|
||||
</body>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-normal">
|
||||
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="The line is wrapped ignoring the white space, which will be removed honoring 'white-space: normal'">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
line-break: anywhere;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX<br>X</div>
|
||||
<div class="test"><span style="background: red"> </span>XXXXX</div>
|
||||
</body>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-pre-wrap">
|
||||
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'line-break: anywhere' can't break a preserved sequence of spaces under 'white-spate: pre-wrap', which should hang instead.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
|
||||
line-break: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX<br>XX</div>
|
||||
<div class="test">X<span style="background: green"> </span>XX</div>
|
||||
</body>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-pre-wrap">
|
||||
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'line-break: anywhere' can't break before the first white-space affter a word under 'white-spate: pre-wrap', which should hang instead.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
|
||||
line-break: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX<br>XX</div>
|
||||
<div class="test">XXX<span style="background: green"> </span>XX</div>
|
||||
</body>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-break-spaces">
|
||||
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'line-break: anywhere' allows preserved white spaces at the end of the line, honoring 'white-space: break-spaces'.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
line-break: anywhere;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XX<span style="color: green">XX<br>XX</span>XX<br>XXX</div>
|
||||
<div class="test">XX XXXXX</div>
|
||||
</body>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere and the white-space property</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-break-spaces">
|
||||
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="'line-break: anywhere' allows breaking before the first character of a preserved white space sequence, honoring 'white-space: break-spaces'.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
line-break: anywhere;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX<br><span style="color: green">XXX</span>X<br>XXXX<br><span style="color: green">X</span>X</div>
|
||||
<div class="test">XXXX XXXXX X</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the WJ classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"></div>
|
||||
<div class="test">XX⁠XX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the WJ classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"></div>
|
||||
<div class="test">XXXX</div>
|
||||
</body>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the ZW classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
color: red;
|
||||
background: green;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX<br>XX</div>
|
||||
<div class="test">..​...X</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"></div>
|
||||
<div class="test">XX XX</div>
|
||||
</body>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XX<br><span style="color: green">X</span>X</div>
|
||||
<div class="test">XX X</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"></div>
|
||||
<div class="test">XX XX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 20px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
height: 100px;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 5ch;
|
||||
line-break: 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>XX</div>
|
||||
<div class="test">XXX<span style="background: green"> X</span>XX</div>
|
||||
</body>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XX<br>X</div>
|
||||
<div class="test">XX X</div>
|
||||
</body>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XX<br>X</div>
|
||||
<div class="test">XX᠎X</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"></div>
|
||||
<div class="test">XX ᠎XX</div>
|
||||
</body>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XX<br>X</div>
|
||||
<div class="test">XX͏X</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"></div>
|
||||
<div class="test">XX ͏XX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"></div>
|
||||
<div class="test">XX‑X</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XX X<br>XX</div>
|
||||
<div class="test">XX ‑XX</div>
|
||||
</body>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the ZWJ classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 50px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red"></div>
|
||||
<div class="test">XX‍XX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="match" href="reference/line-break-anywhere-004-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the ZWJ classes in [UAX14] must be honored. ">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px / 1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XX X<br>X</div>
|
||||
<div class="test">XX ‍XX</div>
|
||||
</body>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Text Test: Check atomic inline+NBSP quirk does not apply if nowrap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-details">
|
||||
<link rel="help" href="https://crbug.com/1002442">
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
width: 5ch;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
width: 3ch;
|
||||
height: 1em;
|
||||
}
|
||||
img {
|
||||
width: 3ch;
|
||||
height: 1em;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>000<span class="inline-block"></span> 111</div>
|
||||
<div>000<img> 111</div>
|
||||
<div>000 <span class="inline-block"></span>111</div>
|
||||
<div>000 <img>111</div>
|
||||
<script>
|
||||
(function () {
|
||||
for (let e of document.getElementsByTagName('div')) {
|
||||
test(() => {
|
||||
let height = e.offsetHeight;
|
||||
assert_equals(Math.round(height / 10), 1);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
|
@ -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;
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
|
||||
<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-overflow-wrap-break-word">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space - break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.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" 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-white-space-break-spaces">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the overflow-wrap property, except when there are previous breaking opportunities.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
|
||||
<div class="test">X XX X</div>
|
||||
</body>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space - break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.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" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
|
||||
<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-white-space-break-spaces">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="A breaking opportunity exists only after a preserved white space character, but it's possible to avoid the overflow honoring the 'word-break' property, hence the 'overflow-wrap' property is not applied.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
|
||||
<div class="test">X XX X</div>
|
||||
</body>
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space - break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.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" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
|
||||
<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-white-space-break-spaces">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
line-break: anywhere;
|
||||
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="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
|
||||
<div class="test">X XX X</div>
|
||||
</body>
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space - break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.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" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
|
||||
<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
|
||||
<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-white-space-break-spaces">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
line-break: anywhere;
|
||||
word-break: break-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="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
|
||||
<div class="test">X XX X</div>
|
||||
</body>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space - break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.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" 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-white-space-break-spaces">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the overflow-wrap property.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail">XXXX<br><span>X</span>XX<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
|
||||
<div class="test">XXXX XX</div>
|
||||
</body>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-break-spaces">
|
||||
<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/white-space-break-spaces-005-ref.html">
|
||||
<meta name="assert" content="break-word + break-spaces do not allow a break
|
||||
between the last character of a word and the first space of a sequence of preserved spaces
|
||||
if there are other wrapping opportunities earlier in the line.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail">XX<span>XX</span><br>X<span>X</span>X<span>X<br>XXXX<br>XXXX</span></div>
|
||||
<div class="test">XX X X</div>
|
||||
</body>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-break-spaces">
|
||||
<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/white-space-break-spaces-005-ref.html">
|
||||
<meta name="assert" content="anywhere + break-spaces do not allow a break
|
||||
between the last character of a word and the first space of a sequence of preserved spaces
|
||||
if there are other wrapping opportunities earlier in the line.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail">XX<span>XX</span><br>X<span>X</span>X<span>X<br>XXXX<br>XXXX</span></div>
|
||||
<div class="test">XX X X</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-break-spaces">
|
||||
<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/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the 'white-space: break-spaces' value.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail"><span>XX</span><br>XX</div>
|
||||
<div class="test"> XX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.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-break-spaces">
|
||||
<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/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the 'white-space: break-spaces' value.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 20px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail"><span>XX</span><br>XX</div>
|
||||
<div class="test"> XX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<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-word-break">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', and the words aren't broken honring the 'overflow-wrap: break-word'.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail"><span>XXXX</span><br>XXXX<br><span>X</span>XXX<br><span>XXXX</span></div>
|
||||
<div class="test"> XXXX XXX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<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-word-break">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', and the words aren't broken honring the 'overflow-wrap: break-word'.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail"><span>XXXX</span><br>XXXX<br><span>X</span>XXX<br><span>XXXX</span></div>
|
||||
<div class="test"> XXXX XXX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<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-word-break">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', but we can break before the first space after a word honoring 'overflow-wrap: break-word'.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail">XXXX<br><span>X</span>XX<span>X</span><br><span>XXXX</span><br><span>XXXX</span></div>
|
||||
<div class="test">XXXX XX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space - break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<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/white-space-break-spaces-005-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', but we can break before the first space after a word honoring 'overflow-wrap: anywhere'.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="fail">XXXX<br><span>X</span>XX<span>X</span><br><span>XXXX</span><br><span>XXXX</span></div>
|
||||
<div class="test">XXXX XX</div>
|
||||
</body>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break:break-word + white-space:break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<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/white-space-break-spaces-005-ref.html">
|
||||
<meta name="assert" content="break-word + break-spaces do allow a break
|
||||
between the last character of a word and the first space of a sequence of preserved spaces
|
||||
if there are no other wrapping opportunities earlier in the line">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.expected {
|
||||
position: absolute;
|
||||
color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
white-space: pre;
|
||||
}
|
||||
.test {
|
||||
background: green;
|
||||
color: red;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
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="expected">XXXX<br> <br>XXXX<br></div>
|
||||
<div class="test">XXXX XXXX </div>
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break:break-word + white-space:break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<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/white-space-break-spaces-005-ref.html">
|
||||
<meta name="assert" content="anywhere + break-spaces do allow a break
|
||||
between the last character of a word and the first space of a sequence of preserved spaces
|
||||
if there are no other wrapping opportunities earlier in the line">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.expected {
|
||||
position: absolute;
|
||||
color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
white-space: pre;
|
||||
}
|
||||
.test {
|
||||
background: green;
|
||||
color: red;
|
||||
width: 4ch;
|
||||
|
||||
white-space: break-spaces;
|
||||
overflow-wrap: anywhere;
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="expected">XXXX<br> <br>XXXX<br></div>
|
||||
<div class="test">XXXX XXXX </div>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: pre-wrap</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
|
||||
<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/white-space-break-spaces-005-ref.html">
|
||||
<meta name="assert" content="The word is not broken despite the 'word-break: break-word' if there are previous breaking opportunities, honoring the white-space: pre-wrap value.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font-size: 20px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
white-space: pre;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
line-height: 1em;
|
||||
width: 5ch;
|
||||
|
||||
white-space: pre-wrap;
|
||||
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"> XX <br>XXX</div>
|
||||
<div class="test"> XX XXX </div>
|
||||
</body>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: white-space: pre-wrap</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
|
||||
<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/pre-wrap-001-ref.html">
|
||||
<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the white-space: pre-wrap value.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
font-size: 20px;
|
||||
font-family: Ahem;
|
||||
line-height: 1em;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
white-space: pre;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 2ch;
|
||||
|
||||
white-space: pre-wrap;
|
||||
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"><br>XX</div>
|
||||
<div class="test"> XX</div>
|
||||
</body>
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break: break-all</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
|
||||
<link rel="match" href="reference/word-break-break-all-010-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;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
background: green;
|
||||
color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.test {
|
||||
color: green;
|
||||
width: 3ch;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">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: word-break: break-all</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
|
||||
<link rel="match" href="reference/word-break-break-all-010-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<meta name="assert" content="word-break: break-all applies correctly when there is styled text using 'span' elemetns.">
|
||||
<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;
|
||||
word-break: break-all;
|
||||
}
|
||||
</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>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all on inline element</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
|
||||
<meta name="flags" content="Ahem">
|
||||
<link rel="match" href="reference/word-break-break-all-010-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 {
|
||||
word-break: break-all;
|
||||
}
|
||||
</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,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<meta charset="utf-8">
|
||||
<title>word-break: break-all on inline element</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<meta name="flags" content="Ahem">
|
||||
<link rel="match" href="reference/word-break-break-all-010-ref.html">
|
||||
<meta name="assert" content="'word-break: break-all' 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 {
|
||||
word-break: break-all;
|
||||
}
|
||||
</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>
|
|
@ -7,8 +7,11 @@
|
|||
<meta name="flags" content="">
|
||||
<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html">
|
||||
<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaking opportunities **are** considered when calculating min-content intrinsic sizes.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
div { font: 20px/1 Ahem; }
|
||||
table {
|
||||
font: 20px/1 Ahem;
|
||||
word-break: break-word;
|
||||
max-width: 0;
|
||||
border: 0;
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/word-break-break-all-010-ref.html">
|
||||
<meta name="assert" content="word-break: break-word allows breaking before punctuation characters and it should be considered when computing the min-content size.">
|
||||
<meta name="assert" content="'word-break: break-word' 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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue