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

10 files changed, 232 insertions, 15 deletions

diff --git a/components/layout/inline.rs b/components/layout/inline.rs
index f3d34d45f40..a683c8574c9 100644
--- a/components/layout/inline.rs
+++ b/components/layout/inline.rs
@@ -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,
diff --git a/tests/ref/basic.list b/tests/ref/basic.list
index efa58cae29f..d116a17e5dc 100644
--- a/tests/ref/basic.list
+++ b/tests/ref/basic.list
@@ -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
diff --git a/tests/ref/vertical_align_sub_a.html b/tests/ref/vertical_align_sub_a.html
new file mode 100644
index 00000000000..73e6844ed71
--- /dev/null
+++ b/tests/ref/vertical_align_sub_a.html
@@ -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>
diff --git a/tests/ref/vertical_align_sub_ref.html b/tests/ref/vertical_align_sub_ref.html
new file mode 100644
index 00000000000..59e8c3dba91
--- /dev/null
+++ b/tests/ref/vertical_align_sub_ref.html
@@ -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>
diff --git a/tests/ref/vertical_align_super_a.html b/tests/ref/vertical_align_super_a.html
new file mode 100644
index 00000000000..e64fed1aefe
--- /dev/null
+++ b/tests/ref/vertical_align_super_a.html
@@ -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>
diff --git a/tests/ref/vertical_align_super_ref.html b/tests/ref/vertical_align_super_ref.html
new file mode 100644
index 00000000000..d12753c3afd
--- /dev/null
+++ b/tests/ref/vertical_align_super_ref.html
@@ -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>
diff --git a/tests/ref/vertical_align_text_bottom_a.html b/tests/ref/vertical_align_text_bottom_a.html
new file mode 100644
index 00000000000..2e9547742bf
--- /dev/null
+++ b/tests/ref/vertical_align_text_bottom_a.html
@@ -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>
diff --git a/tests/ref/vertical_align_text_bottom_ref.html b/tests/ref/vertical_align_text_bottom_ref.html
new file mode 100644
index 00000000000..fff385a6f77
--- /dev/null
+++ b/tests/ref/vertical_align_text_bottom_ref.html
@@ -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>
diff --git a/tests/ref/vertical_align_text_top_a.html b/tests/ref/vertical_align_text_top_a.html
new file mode 100644
index 00000000000..39439e27f35
--- /dev/null
+++ b/tests/ref/vertical_align_text_top_a.html
@@ -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>
diff --git a/tests/ref/vertical_align_text_top_ref.html b/tests/ref/vertical_align_text_top_ref.html
new file mode 100644
index 00000000000..f6a6bfb0ca4
--- /dev/null
+++ b/tests/ref/vertical_align_text_top_ref.html
@@ -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>