Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 06:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Implement text-align: justify and text-justify per

Browse source 
CSS-TEXT-3 § 7.3.

`text-justify: distribute` is not supported.

The behavior of `text-justify: none` does not seem to match what Firefox
and Chrome do, but it seems to match the spec.

Closes #213.
This commit is contained in:
Patrick Walton 2015-01-09 11:45:38 -08:00
parent f58a129251
commit 5fdaba05a6
17 changed files with 528 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

4
tests/ref/basic.list
View file

@ -241,3 +241,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
== mix_blend_mode_a.html mix_blend_mode_ref.html
!= text_overflow_a.html text_overflow_ref.html
== floated_list_item_a.html floated_list_item_ref.html
== text_align_justify_a.html text_align_justify_ref.html
== text_justify_none_a.html text_justify_none_ref.html
== text_overflow_basic_a.html text_overflow_basic_ref.html
== text_align_complex_a.html text_align_complex_ref.html

2
tests/ref/outlines_wrap_ref.html
View file

@ -13,7 +13,7 @@ span {
}
</style>
<body>
<section><span>I like </span><span>truffles</span></section>
<section><span>I like</span> <span>truffles</span></section>
</body>
</html>

39
tests/ref/text_align_complex_a.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
* { margin: 0px !important; padding: 0px !important; }
div {
width: 100px;
font-size: 10px;
font-family: Ahem, monospace;
padding: 10px !important;
}
</style>
</head>
<body>
<section style="text-align: right; color: #f00;">
<div style="background: #fdd;"> xx xx xx xxxx</div>
<div style="background: #fdd;"> xx xx xx xxxxxxxxxxxxx</div>
<div style="background: #fdd;">xxxxxxxxxxxxx xx xx xx xxxx</div>
</section>
<section style="text-align: center; color: #0f0;">
<div style="background: #dfd;"> xx xx xx xxxx </div>
<div style="background: #dfd;"> xx xx xx xxxxxxxxxxxxx</div>
<div style="background: #dfd;">xxxxxxxxxxxxx xx xx xx xxxx </div>
</section>
<section style="text-align: justify; color: #00f;">
<div style="background: #ddf;">xx xx xx xxxx</div>
<div style="background: #ddf;">xx xx xx xxxxxxxxxxxxx</div>
<div style="background: #ddf;">xxxxxxxxxxxxx xx xx xx xxxx </div>
</section>
</body>
</html>

42
tests/ref/text_align_complex_ref.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
* { margin: 0px !important; padding: 0px !important; }
div {
width: 100px;
font-size: 10px;
font-family: Ahem, monospace;
padding: 10px !important;
}
section.reference { text-align: left !important; }
section.reference > div { white-space: pre; }
</style>
</head>
<body>
<section class="reference" style="text-align: right; color: #f00;">
<div style="background: #fdd;"> xx xx xx<br /> xxxx</div>
<div style="background: #fdd;"> xx xx xx<br />xxxxxxxxxxxxx</div>
<div style="background: #fdd;">xxxxxxxxxxxxx<br /> xx xx xx<br /> xxxx</div>
</section>
<section class="reference" style="text-align: center; color: #0f0;">
<div style="background: #dfd;"> xx xx xx <br /> xxxx </div>
<div style="background: #dfd;"> xx xx xx <br />xxxxxxxxxxxxx</div>
<div style="background: #dfd;">xxxxxxxxxxxxx<br /> xx xx xx <br /> xxxx </div>
</section>
<section class="reference" style="text-align: justify; color: #00f;">
<div style="background: #ddf;">xx xx xx<br />xxxx</div>
<div style="background: #ddf;">xx xx xx<br />xxxxxxxxxxxxx</div>
<div style="background: #ddf;">xxxxxxxxxxxxx<br />xx xx xx<br />xxxx </div>
</section>
</body>
</html>

22
tests/ref/text_align_justify_a.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
p {
text-align: justify;
width: 135px;
font-size: 25px;
color: blue;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
</style>
</head>
<body>
<p>X X X X X</p>
</body>
</html>

41
tests/ref/text_align_justify_ref.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that basic `text-align: justify` works. -->
<style>
section {
background: blue;
position: absolute;
width: 25px;
height: 25px;
}
#a, #d {
left: 0;
}
#a, #b, #c {
top: 0;
}
#d, #e {
top: 25px;
}
#b {
left: 55px;
}
#c {
left: 110px;
}
#e {
left: 50px;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
<section id=c></section>
<section id=d></section>
<section id=e></section>
</body>
</html>

15
tests/ref/text_justify_none_a.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `text-justify: none` disables justification. -->
<style>
p {
text-align: justify;
text-justify: none;
}
</style>
</head>
<body>
<p>MANY YEARS AGO PRINCE DARKNESS "GANNON" STOLE ONE OF THE TRIFORCE WITH POWER. PRINCESS ZELDA HAD ONE OF THE TRIFORCE WITH WISDOM. SHE DIVIDED IT INTO 8 UNITS TO HIDE IT FROM "GANNON" BEFORE SHE WAS CAPTURED. GO FIND THE "8" UNITS "LINK" TO SAVE HER.</p>
</body>
</html>

14
tests/ref/text_justify_none_ref.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `text-justify: none` disables justification. -->
<style>
p {
text-align: left;
}
</style>
</head>
<body>
<p>MANY YEARS AGO PRINCE DARKNESS "GANNON" STOLE ONE OF THE TRIFORCE WITH POWER. PRINCESS ZELDA HAD ONE OF THE TRIFORCE WITH WISDOM. SHE DIVIDED IT INTO 8 UNITS TO HIDE IT FROM "GANNON" BEFORE SHE WAS CAPTURED. GO FIND THE "8" UNITS "LINK" TO SAVE HER.</p>
</body>
</html>

15
tests/ref/text_overflow_basic_a.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<style>
section {
border: solid black 1px;
width: 10em;
}
</style>
</head>
<body>
<section>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>asdf asdf asdf</section>
</body>
</html>

15
tests/ref/text_overflow_basic_ref.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<style>
section {
border: solid black 1px;
width: 10em;
}
</style>
</head>
<body>
<section>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx asdf asdf asdf</section>
</body>
</html>