auto merge of #3523 : glennw/servo/wiki-equations, r=pcwalton

This commit is contained in:
bors-servo 2014-09-29 15:36:26 -06:00
commit b2ff320aec
10 changed files with 232 additions and 15 deletions

View file

@ -35,6 +35,10 @@ use style::computed_values::{text_align, vertical_align, white_space};
use style::ComputedValues;
use sync::Arc;
// From gfxFontConstants.h in Firefox
static FONT_SUBSCRIPT_OFFSET_RATIO: f64 = 0.20;
static FONT_SUPERSCRIPT_OFFSET_RATIO: f64 = 0.34;
/// `Line`s are represented as offsets into the child list, rather than
/// as an object that "owns" fragments. Choosing a different set of line
/// breaks requires a new list of offsets, and possibly some splitting and
@ -825,15 +829,13 @@ impl InlineFlow {
(-ascent, false)
},
vertical_align::sub => {
// TODO: The proper position for subscripts should be used. Lower the baseline to
// the proper position for subscripts.
let sub_offset = Au(0);
let sub_offset = (parent_text_block_start + parent_text_block_end)
.scale_by(FONT_SUBSCRIPT_OFFSET_RATIO);
(sub_offset - ascent, false)
},
vertical_align::super_ => {
// TODO: The proper position for superscripts should be used. Raise the baseline to
// the proper position for superscripts.
let super_offset = Au(0);
let super_offset = (parent_text_block_start + parent_text_block_end)
.scale_by(FONT_SUPERSCRIPT_OFFSET_RATIO);
(-super_offset - ascent, false)
},
vertical_align::text_top => {
@ -1074,13 +1076,8 @@ impl Flow for InlineFlow {
// We should calculate the distance from baseline to the top of parent's content
// area. But for now we assume it's the font size.
//
// CSS 2.1 does not state which font to use. Previous versions of the code used
// the parent's font; this code uses the current font.
let parent_text_top = fragment.style().get_font().font_size;
// We should calculate the distance from baseline to the bottom of the parent's
// content area. But for now we assume it's zero.
let parent_text_bottom = Au(0);
// CSS 2.1 does not state which font to use. This version of the code uses
// the parent's font.
// Calculate the final block-size above the baseline for this fragment.
//
@ -1091,8 +1088,8 @@ impl Flow for InlineFlow {
InlineFlow::distance_from_baseline(
fragment,
ascent,
parent_text_top,
parent_text_bottom,
self.minimum_block_size_above_baseline,
self.minimum_depth_below_baseline,
&mut block_size_above_baseline,
&mut depth_below_baseline,
&mut largest_block_size_for_top_fragments,

View file

@ -155,3 +155,7 @@ flaky_linux == acid2_noscroll.html acid2_ref_broken.html
== vertical_align_bottom_a.html vertical_align_bottom_ref.html
== vertical_align_top_span_a.html vertical_align_top_span_ref.html
== vertical_align_top_bottom_a.html vertical_align_top_bottom_ref.html
== vertical_align_sub_a.html vertical_align_sub_ref.html
== vertical_align_super_a.html vertical_align_super_ref.html
== vertical_align_text_top_a.html vertical_align_text_top_ref.html
== vertical_align_text_bottom_a.html vertical_align_text_bottom_ref.html

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style type="text/css">
body {
margin: 0;
font-size: 100px;
line-height: 1;
}
div {
color: blue;
margin-top: 100px;
}
.align {
color: red;
font-size: 0.8em;
vertical-align: sub;
}
</style>
</head>
<body>
<div><span>X</span><span class="align">X</span></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.text {
position: absolute;
background-color: blue;
top: 100px;
width: 100px;
height: 100px;
}
.aligned {
position: absolute;
background-color: red;
top: 136px;
left: 100px;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="text"></div>
<div class="aligned"></div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style type="text/css">
body {
margin: 0;
font-size: 100px;
line-height: 1;
}
div {
color: blue;
margin-top: 100px;
}
.align {
color: red;
font-size: 0.8em;
vertical-align: super;
}
</style>
</head>
<body>
<div><span>X</span><span class="align">X</span></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.text {
position: absolute;
background-color: blue;
top: 100px;
width: 100px;
height: 100px;
}
.aligned {
position: absolute;
background-color: red;
top: 82px;
left: 100px;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class="text"></div>
<div class="aligned"></div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style type="text/css">
body {
margin: 0;
font-size: 100px;
line-height: 1;
}
div {
color: blue;
margin-top: 100px;
}
.align {
font-size: 20px;
color: red;
vertical-align: text-bottom;
}
</style>
</head>
<body>
<div><span>X</span><span class="align">X</span></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.text {
position: absolute;
background-color: blue;
top: 100px;
width: 100px;
height: 100px;
}
.aligned {
position: absolute;
background-color: red;
top: 180px;
left: 100px;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="text"></div>
<div class="aligned"></div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style type="text/css">
body {
margin: 0;
font-size: 100px;
line-height: 1;
}
div {
color: blue;
margin-top: 100px;
}
.align {
font-size: 20px;
color: red;
vertical-align: text-top;
}
</style>
</head>
<body>
<div><span>X</span><span class="align">X</span></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.text {
position: absolute;
background-color: blue;
top: 100px;
width: 100px;
height: 100px;
}
.aligned {
position: absolute;
background-color: red;
top: 100px;
left: 100px;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="text"></div>
<div class="aligned"></div>
</body>
</html>