diff options
| -rw-r--r-- | components/layout/inline.rs | 18 | ||||
| -rw-r--r-- | components/style/properties.mako.rs | 3 | ||||
| -rw-r--r-- | tests/ref/basic.list | 2 | ||||
| -rw-r--r-- | tests/ref/text_align_rtl.html | 29 | ||||
| -rw-r--r-- | tests/ref/text_align_rtl_ref.html | 26 | ||||
| -rw-r--r-- | tests/ref/text_align_start_end.html | 29 | ||||
| -rw-r--r-- | tests/ref/text_align_start_end_ref.html | 26 |
7 files changed, 126 insertions, 7 deletions
diff --git a/components/layout/inline.rs b/components/layout/inline.rs index e4f35b2f69a..d2e48630ee8 100644 --- a/components/layout/inline.rs +++ b/components/layout/inline.rs @@ -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() { diff --git a/components/style/properties.mako.rs b/components/style/properties.mako.rs index 8012bfc9683..9100f8221cd 100644 --- a/components/style/properties.mako.rs +++ b/components/style/properties.mako.rs @@ -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}; diff --git a/tests/ref/basic.list b/tests/ref/basic.list index 5e77d0b9f4c..aa20b7fb70e 100644 --- a/tests/ref/basic.list +++ b/tests/ref/basic.list @@ -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 diff --git a/tests/ref/text_align_rtl.html b/tests/ref/text_align_rtl.html new file mode 100644 index 00000000000..050b900fbce --- /dev/null +++ b/tests/ref/text_align_rtl.html @@ -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> + diff --git a/tests/ref/text_align_rtl_ref.html b/tests/ref/text_align_rtl_ref.html new file mode 100644 index 00000000000..9aa2852c45a --- /dev/null +++ b/tests/ref/text_align_rtl_ref.html @@ -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> + diff --git a/tests/ref/text_align_start_end.html b/tests/ref/text_align_start_end.html new file mode 100644 index 00000000000..7c63d14e290 --- /dev/null +++ b/tests/ref/text_align_start_end.html @@ -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> + diff --git a/tests/ref/text_align_start_end_ref.html b/tests/ref/text_align_start_end_ref.html new file mode 100644 index 00000000000..cc8d6c4dec4 --- /dev/null +++ b/tests/ref/text_align_start_end_ref.html @@ -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> + |