Address review comments

components/layout/block.rs

@@ -330,13 +330,15 @@ impl CandidateBSizeIterator {
             (LengthOrPercentageOrAuto::Calc(calc), Some(block_container_block_size)) => {
                 MaybeAuto::Specified(calc.length() + block_container_block_size.scale_by(calc.percentage()))
             }
-            (LengthOrPercentageOrAuto::Percentage(_), None) | (LengthOrPercentageOrAuto::Auto, _) => MaybeAuto::Auto,
+            (LengthOrPercentageOrAuto::Percentage(_), None) |
+            (LengthOrPercentageOrAuto::Auto, _) |
+            (LengthOrPercentageOrAuto::Calc(_), _) => MaybeAuto::Auto,
             (LengthOrPercentageOrAuto::Length(length), _) => MaybeAuto::Specified(length),
-            (LengthOrPercentageOrAuto::Calc(calc), _) => MaybeAuto::Specified(calc.length()),
         };
         let max_block_size = match (fragment.style.max_block_size(), block_container_block_size) {
-            (LengthOrPercentageOrNone::Percentage(percent), Some(block_container_block_size)) =>
-                Some(block_container_block_size.scale_by(percent)),
+            (LengthOrPercentageOrNone::Percentage(percent), Some(block_container_block_size)) => {
+                Some(block_container_block_size.scale_by(percent))
+            }
             (LengthOrPercentageOrNone::Percentage(_), None) |
             (LengthOrPercentageOrNone::None, _) => None,
             (LengthOrPercentageOrNone::Length(length), _) => Some(length),
@@ -1138,16 +1140,12 @@ impl BlockFlow {
             (LengthOrPercentageOrAuto::Calc(calc), Some(container_size)) => {
                 Some(container_size.scale_by(calc.percentage()) + calc.length())
             }
-            (LengthOrPercentageOrAuto::Calc(calc), _) => {
-                Some(calc.length())
-            },
             (LengthOrPercentageOrAuto::Length(length), _) => Some(length),
             (LengthOrPercentageOrAuto::Percentage(percent), Some(container_size)) => {
                 Some(container_size.scale_by(percent))
             }
-            (LengthOrPercentageOrAuto::Percentage(_), None) => {
-                None
-            }
+            (LengthOrPercentageOrAuto::Percentage(_), None) |
+            (LengthOrPercentageOrAuto::Calc(_), None) |
             (LengthOrPercentageOrAuto::Auto, None) => {
                 None
             }

components/layout/flex.rs

@@ -167,6 +167,7 @@ impl FlexFlow {
             }
             (LengthOrPercentageOrAuto::Percentage(_), None) |
             (LengthOrPercentageOrAuto::Auto, _) => None,
+            (LengthOrPercentageOrAuto::Calc(_), _) => None,
             (LengthOrPercentageOrAuto::Length(length), _) => Some(length),
         };
 

components/layout/fragment.rs

@@ -466,9 +466,7 @@ impl ReplacedImageFragmentInfo {
             (LengthOrPercentageOrAuto::Calc(calc), _, Some(container_size)) => {
                 MaybeAuto::Specified(calc.length() + container_size.scale_by(calc.percentage()))
             }
-            (LengthOrPercentageOrAuto::Calc(calc), _, None) => {
-                MaybeAuto::Specified(calc.length())
-            }
+            (LengthOrPercentageOrAuto::Calc(_), _, None) => MaybeAuto::Auto,
             (LengthOrPercentageOrAuto::Auto, Some(dom_length), _) => MaybeAuto::Specified(dom_length),
             (LengthOrPercentageOrAuto::Auto, None, _) => MaybeAuto::Auto,
         }

components/style/properties.mako.rs

@@ -1912,15 +1912,14 @@ pub mod longhands {
         }
         /// <length> | <percentage> | <absolute-size> | <relative-size>
         pub fn parse(_context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue, ()> {
-            input.try(specified::LengthOrPercentage::parse_non_negative)
-            .map(|value| match value {
-                specified::LengthOrPercentage::Length(value) => value,
+            let value = try!(input.try(specified::LengthOrPercentage::parse_non_negative));
+            match value {
+                specified::LengthOrPercentage::Length(value) => Ok(value),
                 specified::LengthOrPercentage::Percentage(value) =>
-                    specified::Length::FontRelative(specified::FontRelativeLength::Em(value.0)),
+                    Ok(specified::Length::FontRelative(specified::FontRelativeLength::Em(value.0))),
                 // FIXME(dzbarsky) handle calc for font-size
-                specified::LengthOrPercentage::Calc(_) =>
-                    specified::Length::FontRelative(specified::FontRelativeLength::Em(1.)),
-            })
+                specified::LengthOrPercentage::Calc(_) => return Err(())
+            }
             .or_else(|()| {
                 match_ignore_ascii_case! { try!(input.expect_ident()),
                     "xx-small" => Ok(specified::Length::Absolute(Au::from_px(MEDIUM_PX) * 3 / 5)),

components/style/values.rs

@@ -1305,7 +1305,7 @@ pub mod computed {
     impl ::cssparser::ToCss for Calc {
         fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
             match (self.length, self.percentage) {
-                (None, Some(p)) => write!(dest, "{}%", p),
+                (None, Some(p)) => write!(dest, "{}%", p * 100.),
                 (Some(l), None) => write!(dest, "{}px", Au::to_px(l)),
                 (Some(l), Some(p)) => write!(dest, "calc({}px + {}%)", Au::to_px(l), p * 100.),
                 _ => unreachable!()
@@ -1323,14 +1323,14 @@ pub mod computed {
                 length = Some(length.unwrap_or(Au(0)) + absolute);
             }
 
-            for val in vec!(self.vw, self.vh, self.vmin, self.vmax) {
-                if let Some(val) = val {
+            for val in &[self.vw, self.vh, self.vmin, self.vmax] {
+                if let Some(val) = *val {
                     length = Some(length.unwrap_or(Au(0)) +
                         val.to_computed_value(context.viewport_size));
                 }
             }
-            for val in vec!(self.em, self.ex, self.rem) {
-                if let Some(val) = val {
+            for val in &[self.em, self.ex, self.rem] {
+                if let Some(val) = *val {
                     length = Some(length.unwrap_or(Au(0)) +
                         val.to_computed_value(context.font_size, context.root_font_size));
                 }

tests/wpt/mozilla/meta/MANIFEST.json

@@ -299,6 +299,12 @@
             "url": "/_mozilla/mozilla/body_listener.html"
           }
         ],
+        "mozilla/calc.html": [
+          {
+            "path": "mozilla/calc.html",
+            "url": "/_mozilla/mozilla/calc.html"
+          }
+        ],
         "mozilla/caption.html": [
           {
             "path": "mozilla/caption.html",

tests/wpt/mozilla/meta/mozilla/calc.html.ini

@@ -0,0 +1,8 @@
+[calc.html]
+  type: testharness
+  [calc(1px + 1pt + 1pc + 1in + 1cm + 1mm)]
+    expected: FAIL
+
+  [calc(0px + 0pt + 0pc + 0in + 0cm + 0mm + 0rem + 0em + 0ex + 0% + 0vw + 0vh + 0vmin + 0vmax)]
+    expected: FAIL
+

tests/wpt/mozilla/tests/mozilla/calc.html

@@ -0,0 +1,62 @@
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#outer {
+    width: 1000px;
+}
+</style>
+</head>
+<body>
+<div id="outer">FOO<div id="inner"></div></div>
+<script>
+
+var div = document.getElementById('inner');
+
+var widthTests = [
+    ['calc(10px)', '10px', '10px'],
+
+    // Basic Arithmetic
+    ['calc(10px + 10px)', '20px', '20px'],
+    ['calc(10px - 5px)', '5px', '5px'],
+    ['calc(2 * 10px)', '20px', '20px'],
+    ['calc(10px / 2)', '5px', '5px'],
+
+    // Parse ok
+    ['calc(20px/2)', '10px', '10px'],
+    ['calc(10px*2)', '20px', '20px'],
+
+    // Parse errors - value left over from previous test
+    ['calc(10px-10px)', '20px', '20px'],
+    ['calc(5px+5px)', '20px', '20px'],
+
+    // Combining units
+    ['calc(10px + 10em)', 'calc(10em + 10px)', '170px'],
+    ['calc(10px + 10em - 10px)', 'calc(10em + 0px)', '160px'],
+
+    // Fold absolute units
+    ['calc(1px + 1pt + 1pc + 1in + 1cm + 1mm)', '155.88333333333333px', '155.88333333333333px'],
+
+    // Alphabetical order
+    ['calc(0px + 0pt + 0pc + 0in + 0cm + 0mm + 0rem + 0em + 0ex + 0% + 0vw + 0vh + 0vmin + 0vmax)',
+     'calc(0em + 0ex + 0px + 0rem + 0vh + 0vmax + 0vmin + 0vw + 0%)',
+     '0px'],
+
+    // Simplification
+    ['calc((2 - 1) * 10px)', '10px', '10px'],
+    ['calc(((3 - 1) * (8 + 4)) * 10px)', '240px', '240px'],
+    ['calc(5 * (20px / 2 + 7 * (3em + 12px/4 + (8 - 2) * 2rem)))', 'calc(105em + 155px + 420rem)', '8555px'],
+
+];
+
+widthTests.forEach(function(item) {
+    test(function() {
+        div.style.setProperty('width', item[0]);
+        assert_equals(div.style.getPropertyValue('width'), item[1]);
+        assert_equals(window.getComputedStyle(div).getPropertyValue('width'), item[2]);
+    }, item[0]);
+});
+</script>
+</head>
+</html>