Auto merge of #5891 - mbrubeck:text-align-rtl, r=SimonSapin

r? @SimonSapin

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/5891)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-04-29 09:07:17 -05:00
commit 7ee605db11
7 changed files with 126 additions and 7 deletions

View file

@ -895,10 +895,17 @@ impl InlineFlow {
let slack_inline_size = max(Au(0), line.green_zone.inline - line.bounds.size.inline);
// Compute the value we're going to use for `text-justify`.
let text_justify = if fragments.fragments.is_empty() {
if fragments.fragments.is_empty() {
return
} else {
fragments.fragments[0].style().get_inheritedtext().text_justify
}
let text_justify = fragments.fragments[0].style().get_inheritedtext().text_justify;
// Translate `left` and `right` to logical directions.
let is_ltr = fragments.fragments[0].style().writing_mode.is_bidi_ltr();
let line_align = match (line_align, is_ltr) {
(text_align::T::left, true) | (text_align::T::right, false) => text_align::T::start,
(text_align::T::left, false) | (text_align::T::right, true) => text_align::T::end,
_ => line_align
};
// Set the fragment inline positions based on that alignment, and justify the text if
@ -908,15 +915,16 @@ impl InlineFlow {
text_align::T::justify if !is_last_line && text_justify != text_justify::T::none => {
InlineFlow::justify_inline_fragments(fragments, line, slack_inline_size)
}
text_align::T::left | text_align::T::justify => {}
text_align::T::justify | text_align::T::start => {}
text_align::T::center => {
inline_start_position_for_fragment = inline_start_position_for_fragment +
slack_inline_size.scale_by(0.5)
}
text_align::T::right => {
text_align::T::end => {
inline_start_position_for_fragment = inline_start_position_for_fragment +
slack_inline_size
}
text_align::T::left | text_align::T::right => unreachable!()
}
for fragment_index in line.range.begin()..line.range.end() {

View file

@ -1730,8 +1730,7 @@ pub mod longhands {
${new_style_struct("InheritedText", is_inherited=True)}
// TODO: initial value should be 'start' (CSS Text Level 3, direction-dependent.)
${single_keyword("text-align", "left right center justify")}
${single_keyword("text-align", "start end left right center justify")}
<%self:longhand name="letter-spacing">
use values::computed::{ToComputedValue, Context};

View file

@ -304,6 +304,8 @@ experimental == rtl_simple.html rtl_simple_ref.html
== table_percentage_width_a.html table_percentage_width_ref.html
== text_align_complex_a.html text_align_complex_ref.html
== text_align_justify_a.html text_align_justify_ref.html
experimental == text_align_rtl.html text_align_rtl_ref.html
experimental == text_align_start_end.html text_align_start_end_ref.html
== text_decoration_cached.html text_decoration_cached_ref.html
# text_decoration_propagation_a.html text_decoration_propagation_b.html
!= text_decoration_smoke_a.html text_decoration_smoke_ref.html

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
body {
margin: 0;
font-size: 25px;
}
#a, #b {
text-align: left;
}
#c, #d {
text-align: right;
}
#b, #d {
direction: rtl;
}
</style>
</head>
<body>
<div id="a">X</div>
<div id="b">X</div>
<div id="c">X</div>
<div id="d">X</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
body {
margin: 0;
font-size: 25px;
}
#a, #b {
text-align: left;
}
#c, #d {
text-align: right;
}
</style>
</head>
<body>
<div id="a">X</div>
<div id="b">X</div>
<div id="c">X</div>
<div id="d">X</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
body {
margin: 0;
font-size: 25px;
}
#a, #b {
text-align: start;
}
#c, #d {
text-align: end;
}
#b, #d {
direction: rtl;
}
</style>
</head>
<body>
<div id="a">X</div>
<div id="b">X</div>
<div id="c">X</div>
<div id="d">X</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
body {
margin: 0;
font-size: 25px;
}
#a, #d {
text-align: left;
}
#b, #c {
text-align: right;
}
</style>
</head>
<body>
<div id="a">X</div>
<div id="b">X</div>
<div id="c">X</div>
<div id="d">X</div>
</body>
</html>