Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-text] Consider breaking opportunities of inline siblings #19651

Merged
merged 1 commit into from Oct 29, 2019
Merged

[css-text] Consider breaking opportunities of inline siblings #19651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 33 additions & 0 deletions css/css-text/word-break/word-break-break-all-inline-008.html
View file
Open in desktop
@@ -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">
<meta name="flags" content="Ahem">
<link rel="match" href="reference/word-break-break-all-010-ref.html">
<meta name="assert" content="break-all doesn't allow breaking around punctuation characters">
<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: 1em;

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</div>
<div class="test"><span>X</span><span>.</span></div>
42 changes: 42 additions & 0 deletions css/css-text/word-break/word-break-min-content-001.html
View file
Open in desktop
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: word-break: break-word 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/#word-break-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
<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.">
<style>
table {
word-break: break-word;
max-width: 0;
border: 0;
border-collapse: collapse;
}
td {
padding: 0;
background: green;
color: transparent;
}
#red {
position: absolute;
z-index: -1;
background: red;
color: transparent;
}
</style>

<p>Test passes if there is a green box below and no red.
<div id=red>X<br>X<br>X<br>X</div>
<table><tr><td>XXXX</table>

<!--
width:min-content on the div directly without using a table
would achieve the goal of this test, and be a lot simpler.

However, width:min-content is not yet widely supported.

Using a table, and forcing it to be as small as possible
will achieve min-content sizing of the div in all browsers.
-->
34 changes: 34 additions & 0 deletions css/css-text/word-break/word-break-min-content-002.html
View file
Open in desktop
@@ -0,0 +1,34 @@
<!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" 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-word">
<meta name="flags" content="ahem">
<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html">
<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaks at edge of inline elements.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#wrapper {
width: 0px;
font: 16px / 1 Ahem;
word-break: break-word;
color: green;
}
#test {
float: left;
}
#reference {
position: absolute;
width: 16px;
height: 128px;
background: red;
z-index: -1;
}
</style>

<p>Test passes if there is a vertical green bar below.
<div id="wrapper">
<div id="reference"></div>
<div id="test"><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div>
</div>
30 changes: 30 additions & 0 deletions css/css-text/word-break/word-break-min-content-003.html
View file
Open in desktop
@@ -0,0 +1,30 @@
<!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" 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-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-all shouldn't allow breaking before punctuation characters.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
font: 50px / 1 Ahem;
}
.fail {
background: red;
position: absolute;
color: green;
z-index: -1;
}
.test {
color: green;
width: min-content;
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"><br>XX</div>
<div class="test"><span>X</span><span>.</span></div>
31 changes: 31 additions & 0 deletions css/css-text/word-break/word-break-min-content-004.html
View file
Open in desktop
@@ -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" 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-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.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
font: 50px / 1 Ahem;
}
.fail {
background: green;
position: absolute;
color: red;
width: 100px;
z-index: -1;
}
.test {
color: green;
width: min-content;
word-break: break-word;
}
</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>
34 changes: 34 additions & 0 deletions css/css-text/word-break/word-break-min-content-005.html
View file
Open in desktop
@@ -0,0 +1,34 @@
<!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" 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-word">
<meta name="flags" content="ahem">
<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html">
<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaks at edge of inline elements.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#wrapper {
width: 0px;
font: 16px / 1 Ahem;
word-break: break-word;
color: green;
}
#test {
float: left;
}
#reference {
position: absolute;
width: 16px;
height: 128px;
background: red;
z-index: -1;
}
</style>

<p>Test passes if there is a vertical green bar below.
<div id="wrapper">
<div id="reference"></div>
<div id="test"><span>XX</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div>
</div>