Skip to content

/ servo

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

Fully implement the "align descendants" rule for div. #7825

Merged
merged 2 commits into from Oct 8, 2015
+194 −40
Merged

Fully implement the "align descendants" rule for div. #7825

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69ca066
Fully implement the "align descendants" rule for div.
eefriedman Oct 2, 2015
a31461b
Make "align descendants" rule use parent's text-align.
eefriedman Oct 2, 2015
File filter...
Filter file types
Jump to…
Jump to file
Failed to load files.

Always

Just for now

Next

Fully implement the "align descendants" rule for div. 

This adds -servo-left and -servo-right to complement -servo-center.

This intentionally doesn't try to address issue #7301.
  • Loading branch information
@eefriedman
eefriedman committed Oct 2, 2015
commit 69ca066802155b55f0b3e064393edc1b474f5d9a
30 components/layout/block.rs
View file
Open in desktop
@@ -2470,20 +2470,26 @@ pub trait ISizeAndMarginsComputer {
(MaybeAuto::Specified(margin_start),
MaybeAuto::Specified(inline_size),
MaybeAuto::Specified(margin_end)) => {
match (input.text_align, parent_has_same_direction) {
(text_align::T::servo_center, _) => {
// This is used for `<center>` and friends per HTML5 § 14.3.3. Make the
// inline-start and inline-end margins equal per HTML5 § 14.2.
let margin = (available_inline_size - inline_size).scale_by(0.5);
(margin, inline_size, margin)
}
(_, true) => {
// Ignore the end margin.
// servo_left, servo_right, and servo_center are used to implement
// the "align descendants" rule in HTML5 § 14.2.
// FIXME(#7301): block_align is supposed to be the text-align of the
// parent, not the current node.
let block_align = input.text_align;
if block_align == text_align::T::servo_center {
// Ignore any existing margins, and make the inline-start and
// inline-end margins equal.
let margin = (available_inline_size - inline_size).scale_by(0.5);
(margin, inline_size, margin)
} else {
let ignore_end_margin = match block_align {
text_align::T::servo_left => block_mode.is_bidi_ltr(),
text_align::T::servo_right => !block_mode.is_bidi_ltr(),
_ => parent_has_same_direction,
};
if ignore_end_margin {
(margin_start, inline_size, available_inline_size -
(margin_start + inline_size))
}
(_, false) => {
// Ignore the start margin.
} else {
(available_inline_size - (margin_end + inline_size),
inline_size,
margin_end)
15 components/layout/inline.rs
View file
Open in desktop
@@ -1018,8 +1018,14 @@ impl InlineFlow {
// 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,
(text_align::T::left, true) |
(text_align::T::servo_left, true) |
(text_align::T::right, false) |
(text_align::T::servo_right, false) => text_align::T::start,
(text_align::T::left, false) |
(text_align::T::servo_left, false) |
(text_align::T::right, true) |
(text_align::T::servo_right, true) => text_align::T::end,
_ => line_align
};

@@ -1039,7 +1045,10 @@ impl InlineFlow {
inline_start_position_for_fragment = inline_start_position_for_fragment +
slack_inline_size
}
text_align::T::left | text_align::T::right => unreachable!()
text_align::T::left |
text_align::T::servo_left |
text_align::T::right |
text_align::T::servo_right => unreachable!()
}

// Lay out the fragments in visual order.
2 components/style/properties.mako.rs
View file
Open in desktop
@@ -2020,6 +2020,8 @@ pub mod longhands {
center("center") => 4,
justify("justify") => 5,
servo_center("-servo-center") => 6,
servo_left("-servo-left") => 7,
servo_right("-servo-right") => 8,
}
}
#[inline] pub fn get_initial_value() -> computed_value::T {
9 resources/presentational-hints.css
View file
Open in desktop
@@ -7,12 +7,9 @@ https://html.spec.whatwg.org/multipage/#presentational-hints

pre[wrap] { white-space: pre-wrap; }

/*
FIXME: also "align descendants"
https://html.spec.whatwg.org/multipage/#align-descendants
*/
div[align=left i] { text-align: left; }
div[align=right i] { text-align: right; }
div[align=left i] { text-align: -servo-left; }
div[align=right i] { text-align: -servo-right; }
div[align=center i], div[align=middle i] { text-align: -servo-center; }
div[align=justify i] { text-align: justify; }


2 resources/servo.css
View file
Open in desktop
@@ -24,5 +24,5 @@ td[align="left"] { text-align: left; }
td[align="center"] { text-align: center; }
td[align="right"] { text-align: right; }

center, div[align=center i], div[align=middle i] { text-align: -servo-center; }
center { text-align: -servo-center; }

10 tests/wpt/metadata/MANIFEST.json
View file
Open in desktop
@@ -4253,6 +4253,16 @@
],
"url": "/html/rendering/non-replaced-elements/flow-content-0/figure.html"
},
{
"path": "html/rendering/non-replaced-elements/flow-content-0/div-align.html",
"references": [
[
"/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html",
"=="
]
],
"url": "/html/rendering/non-replaced-elements/flow-content-0/div-align.html"
},
{
"path": "html/rendering/non-replaced-elements/phrasing-content-0/font-element-text-decoration-color/001-a.html",
"references": [
77 ...web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/div-align-ref.html
View file
Open in desktop
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="match" href="div-align-ref.html">
<style>
.test { width: 50px; background-color: yellow; }
.center { text-align: center; }
.center .test { margin: 0 auto; }
.left { text-align: left; }
.left .test { margin-right: auto; }
.right { text-align: right; }
.right .test { margin-left: auto; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
.left .margin { margin-left: 1em; }
.right .margin { margin-right: 1em; }
</style>
</head>
<body>
<!-- Centered tests -->
<div class=center>
<div class=test>t א</div>
<div class="test rtl">t א</div>
<div class="test margin">t א</div>
</div>

<div class=center>
<div class="test left">t א</div>
<div class="test right">t א</div>
</div>

<div class=left>
<div class=center>
<div class=test>t א</div>
</div>
</div>

<!-- Left-aligned tests -->
<div class=left>
<div class=test>t א</div>
<div class="test rtl">t א</div>
<div class="test margin">t א</div>
</div>

<div class="left rtl">
<div class=test>t א</div>
<div class="test ltr">t א</div>
<div class="test margin">t א</div>
</div>

<div class=left>
<div class="test center">t א</div>
<div class="test right">t א</div>
</div>

<!-- Right-aligned tests -->
<div class=right>
<div class=test>t א</div>
<div class="test rtl">t א</div>
<div class="test margin">t א</div>
</div>

<div class="right rtl">
<div class=test>t א</div>
<div class="test ltr">t א</div>
<div class="test margin">t א</div>
</div>

<div class=right>
<div class="test left">t א</div>
<div class="test center">t א</div>
</div>

</body>
</html>

70 ...wpt/web-platform-tests/html/rendering/non-replaced-elements/flow-content-0/div-align.html
View file
Open in desktop
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style>
.test { width: 50px; background-color: yellow; }
.rtl { direction: rtl; }
.ltr { direction: ltr; }
[align=left] .margin { margin-left: 1em }
[align=right] .margin { margin-right: 1em }
</style>
</head>
<body>
<!-- Centered tests -->
<div align=center>
<div class=test>t א</div>
<div class="test rtl">t א</div>
<div class="test margin">t א</div>
</div>

<div align=center>
<div class=test align=left>t א</div>
<div class=test align=right>t א</div>
</div>

<div align=left>
<div align=center>
<div class=test>t א</div>
</div>
</div>

<!-- Left-aligned tests -->
<div align=left>
<div class=test>t א</div>
<div class="test rtl">t א</div>
<div class="test margin">t א</div>
</div>

<div align=left class=rtl>
<div class=test>t א</div>
<div class="test ltr">t א</div>
<div class="test margin">t א</div>
</div>

<div align=left>
<div class=test align=center>t א</div>
<div class=test align=right>t א</div>
</div>

<!-- Right-aligned tests -->
<div align=right>
<div class=test>t א</div>
<div class="test rtl">t א</div>
<div class="test margin">t א</div>
</div>

<div align=right class=rtl>
<div class=test>t א</div>
<div class="test ltr">t א</div>
<div class="test margin">t א</div>
</div>

<div align=right>
<div class=test align=left>t א</div>
<div class=test align=center>t א</div>
</div>

</body>
</html>

ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.