diff --git a/Cargo.lock b/Cargo.lock index 4248c5ef2e8..879af6c98a2 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -57,7 +57,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" [[package]] name = "app_units" -version = "0.5.2" +version = "0.5.3" source = "registry+https://github.com/rust-lang/crates.io-index" dependencies = [ "heapsize 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)", @@ -1052,7 +1052,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" name = "gfx" version = "0.0.1" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "bitflags 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)", "byteorder 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)", "core-foundation 0.3.0 (registry+https://github.com/rust-lang/crates.io-index)", @@ -1451,7 +1451,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" name = "layout" version = "0.0.1" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "atomic_refcell 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)", "bitflags 0.8.2 (registry+https://github.com/rust-lang/crates.io-index)", "canvas_traits 0.0.1", @@ -1501,7 +1501,7 @@ dependencies = [ name = "layout_thread" version = "0.0.1" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "atomic_refcell 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)", "euclid 0.15.1 (registry+https://github.com/rust-lang/crates.io-index)", "fnv 1.0.5 (registry+https://github.com/rust-lang/crates.io-index)", @@ -2461,7 +2461,7 @@ name = "script" version = "0.0.1" dependencies = [ "angle 0.5.0 (git+https://github.com/servo/angle?branch=servo)", - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "audio-video-metadata 0.1.3 (registry+https://github.com/rust-lang/crates.io-index)", "base64 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", "bitflags 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)", @@ -2541,7 +2541,7 @@ dependencies = [ name = "script_layout_interface" version = "0.0.1" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "atomic_refcell 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)", "canvas_traits 0.0.1", "cssparser 0.19.1 (registry+https://github.com/rust-lang/crates.io-index)", @@ -2851,7 +2851,7 @@ dependencies = [ name = "servo_geometry" version = "0.0.1" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "euclid 0.15.1 (registry+https://github.com/rust-lang/crates.io-index)", "heapsize 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)", ] @@ -3007,7 +3007,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index" name = "style" version = "0.0.1" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "arraydeque 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)", "arrayvec 0.3.23 (registry+https://github.com/rust-lang/crates.io-index)", "atomic_refcell 0.1.0 (registry+https://github.com/rust-lang/crates.io-index)", @@ -3069,7 +3069,7 @@ dependencies = [ name = "style_tests" version = "0.0.1" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "byteorder 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)", "cssparser 0.19.1 (registry+https://github.com/rust-lang/crates.io-index)", "euclid 0.15.1 (registry+https://github.com/rust-lang/crates.io-index)", @@ -3091,7 +3091,7 @@ dependencies = [ name = "style_traits" version = "0.0.1" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "bitflags 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)", "cssparser 0.19.1 (registry+https://github.com/rust-lang/crates.io-index)", "euclid 0.15.1 (registry+https://github.com/rust-lang/crates.io-index)", @@ -3483,7 +3483,7 @@ name = "webrender" version = "0.48.1" source = "git+https://github.com/servo/webrender#48808d144c83bbcc06524cb32c945144b44b51a5" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "bincode 0.8.0 (registry+https://github.com/rust-lang/crates.io-index)", "bit-set 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)", "bitflags 0.9.1 (registry+https://github.com/rust-lang/crates.io-index)", @@ -3512,7 +3512,7 @@ name = "webrender_api" version = "0.48.1" source = "git+https://github.com/servo/webrender#48808d144c83bbcc06524cb32c945144b44b51a5" dependencies = [ - "app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)", + "app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)", "bincode 0.8.0 (registry+https://github.com/rust-lang/crates.io-index)", "byteorder 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)", "core-foundation 0.3.0 (registry+https://github.com/rust-lang/crates.io-index)", @@ -3651,7 +3651,7 @@ dependencies = [ "checksum angle 0.5.0 (git+https://github.com/servo/angle?branch=servo)" = "" "checksum ansi_term 0.9.0 (registry+https://github.com/rust-lang/crates.io-index)" = "23ac7c30002a5accbf7e8987d0632fa6de155b7c3d39d0067317a391e00a2ef6" "checksum antidote 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)" = "34fde25430d87a9388dadbe6e34d7f72a462c8b43ac8d309b42b0a8505d7e2a5" -"checksum app_units 0.5.2 (registry+https://github.com/rust-lang/crates.io-index)" = "813ec2cdca52df57e839c4f4083b47cd7b2c2ae5409cee26f50a020144a8e631" +"checksum app_units 0.5.3 (registry+https://github.com/rust-lang/crates.io-index)" = "7ff4f3fe57393a150b39b026b6f6f4b9a6c4f49b52d0a4e2d61d08d926358438" "checksum arraydeque 0.2.3 (registry+https://github.com/rust-lang/crates.io-index)" = "96e774cadb24c2245225280c6799793f9802b918a58a79615e9490607489a717" "checksum arrayvec 0.3.23 (registry+https://github.com/rust-lang/crates.io-index)" = "699e63a93b79d717e8c3b5eb1b28b7780d0d6d9e59a72eb769291c83b0c8dc67" "checksum aster 0.41.0 (registry+https://github.com/rust-lang/crates.io-index)" = "4ccfdf7355d9db158df68f976ed030ab0f6578af811f5a7bb6dcf221ec24e0e0" diff --git a/components/style/Cargo.toml b/components/style/Cargo.toml index 5b05a42299c..e382a623ce5 100644 --- a/components/style/Cargo.toml +++ b/components/style/Cargo.toml @@ -29,7 +29,7 @@ servo = ["serde", "heapsize", "heapsize_derive", gecko_debug = ["nsstring_vendor/gecko_debug"] [dependencies] -app_units = "0.5.2" +app_units = "0.5.3" arrayvec = "0.3.20" arraydeque = "0.2.3" atomic_refcell = "0.1" diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs index f39fca4e9b4..2f897f95174 100644 --- a/components/style/values/computed/length.rs +++ b/components/style/values/computed/length.rs @@ -195,11 +195,21 @@ impl From for Option { impl ToCss for CalcLengthOrPercentage { fn to_css(&self, dest: &mut W) -> fmt::Result where W: fmt::Write { - match (self.length, self.percentage) { - (l, Some(p)) if l == Au(0) => p.to_css(dest), - (l, Some(p)) => write!(dest, "calc({}px + {}%)", Au::to_px(l), p.0 * 100.), - (l, None) => write!(dest, "{}px", Au::to_px(l)), - } + use num_traits::Zero; + + let (length, percentage) = match (self.length, self.percentage) { + (l, None) => return l.to_css(dest), + (l, Some(p)) if l == Au(0) => return p.to_css(dest), + (l, Some(p)) => (l, p), + }; + + dest.write_str("calc(")?; + percentage.to_css(dest)?; + + dest.write_str(if length < Zero::zero() { " - " } else { " + " })?; + length.abs().to_css(dest)?; + + dest.write_str(")") } } diff --git a/components/style/values/computed/percentage.rs b/components/style/values/computed/percentage.rs index bd19579bcc4..68566866b88 100644 --- a/components/style/values/computed/percentage.rs +++ b/components/style/values/computed/percentage.rs @@ -11,7 +11,7 @@ use values::CSSFloat; use values::animated::ToAnimatedZero; /// A computed percentage. -#[derive(Clone, ComputeSquaredDistance, Copy, Debug, Default, HasViewportPercentage, PartialEq)] +#[derive(Clone, ComputeSquaredDistance, Copy, Debug, Default, HasViewportPercentage, PartialEq, PartialOrd)] #[cfg_attr(feature = "servo", derive(Deserialize, HeapSizeOf, Serialize))] pub struct Percentage(pub CSSFloat); @@ -27,6 +27,12 @@ impl Percentage { pub fn hundred() -> Self { Percentage(1.) } + + /// Returns the absolute value for this percentage. + #[inline] + pub fn abs(&self) -> Self { + Percentage(self.0.abs()) + } } /// https://drafts.csswg.org/css-transitions/#animtype-percentage diff --git a/components/style/values/specified/calc.rs b/components/style/values/specified/calc.rs index e8fff3e78ed..005036d4f32 100644 --- a/components/style/values/specified/calc.rs +++ b/components/style/values/specified/calc.rs @@ -90,16 +90,26 @@ impl HasViewportPercentage for CalcLengthOrPercentage { } impl ToCss for CalcLengthOrPercentage { + /// https://drafts.csswg.org/css-values/#calc-serialize + /// + /// FIXME(emilio): Should this simplify away zeros? #[allow(unused_assignments)] fn to_css(&self, dest: &mut W) -> fmt::Result where W: fmt::Write { + use num_traits::Zero; + let mut first_value = true; macro_rules! first_value_check { - () => { + ($val:expr) => { if !first_value { - dest.write_str(" + ")?; - } else { - first_value = false; + dest.write_str(if $val < Zero::zero() { + " - " + } else { + " + " + })?; + } else if $val < Zero::zero() { + dest.write_str("-")?; } + first_value = false; }; } @@ -107,8 +117,8 @@ impl ToCss for CalcLengthOrPercentage { ( $( $val:ident ),* ) => { $( if let Some(val) = self.$val { - first_value_check!(); - val.to_css(dest)?; + first_value_check!(val); + val.abs().to_css(dest)?; dest.write_str(stringify!($val))?; } )* @@ -117,7 +127,16 @@ impl ToCss for CalcLengthOrPercentage { dest.write_str("calc(")?; - serialize!(ch, em, ex, rem, vh, vmax, vmin, vw); + // NOTE(emilio): Percentages first because of web-compat problems, see: + // https://github.com/w3c/csswg-drafts/issues/1731 + if let Some(val) = self.percentage { + first_value_check!(val.0); + val.abs().to_css(dest)?; + } + + // NOTE(emilio): The order here it's very intentional, and alphabetic + // per the spec linked above. + serialize!(ch, em, ex); #[cfg(feature = "gecko")] { @@ -125,16 +144,13 @@ impl ToCss for CalcLengthOrPercentage { } if let Some(val) = self.absolute { - first_value_check!(); - val.to_css(dest)?; + first_value_check!(val); + val.abs().to_css(dest)?; } - if let Some(val) = self.percentage { - first_value_check!(); - val.to_css(dest)?; - } + serialize!(rem, vh, vmax, vmin, vw); - write!(dest, ")") + dest.write_str(")") } } diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json index 903fbda1e2a..f39a8b44904 100644 --- a/tests/wpt/mozilla/meta/MANIFEST.json +++ b/tests/wpt/mozilla/meta/MANIFEST.json @@ -13512,6 +13512,12 @@ {} ] ], + "css/calc-serialization.html": [ + [ + "/_mozilla/css/calc-serialization.html", + {} + ] + ], "css/empty-keyframes.html": [ [ "/_mozilla/css/empty-keyframes.html", @@ -22847,6 +22853,10 @@ "b9e77c824d0c96e51d51fb8f1e923d3ab67be027", "testharness" ], + "css/calc-serialization.html": [ + "628597eb36bf21a1ec982c7f6935ee7949c62044", + "testharness" + ], "css/canvas_as_block_element_a.html": [ "668d93da2dab9722998cc7c5785c20e2ab9a1ced", "reftest" @@ -26508,7 +26518,7 @@ "testharness" ], "mozilla/calc.html": [ - "5d59d5b367a023e778ce6968acdeca6b8b7c3197", + "5b3ea33205a9f2404bd6976a2c7f6fc451be8e96", "testharness" ], "mozilla/canvas.initial.reset.2dstate.html": [ diff --git a/tests/wpt/mozilla/tests/css/calc-serialization.html b/tests/wpt/mozilla/tests/css/calc-serialization.html new file mode 100644 index 00000000000..b423557a1b8 --- /dev/null +++ b/tests/wpt/mozilla/tests/css/calc-serialization.html @@ -0,0 +1,34 @@ + + +CSS Values and Units: calc() serialization. + + + + + +
+ diff --git a/tests/wpt/mozilla/tests/mozilla/calc.html b/tests/wpt/mozilla/tests/mozilla/calc.html index a2494e9f3de..415f0b1f174 100644 --- a/tests/wpt/mozilla/tests/mozilla/calc.html +++ b/tests/wpt/mozilla/tests/mozilla/calc.html @@ -46,13 +46,13 @@ var widthTests = [ // Alphabetical order ['calc(0ch + 0px + 0pt + 0pc + 0in + 0cm + 0mm + 0rem + 0em + 0ex + 0% + 0vw + 0vh + 0vmin + 0vmax)', - 'calc(0ch + 0em + 0ex + 0rem + 0vh + 0vmax + 0vmin + 0vw + 0px + 0%)', + 'calc(0% + 0ch + 0em + 0ex + 0px + 0rem + 0vh + 0vmax + 0vmin + 0vw)', '0px'], // Simplification ['calc((2 - 1) * 10px)', 'calc(10px)', '10px'], ['calc(((3 - 1) * (8 + 4)) * 10px)', 'calc(240px)', '240px'], - ['calc(5 * (20px / 2 + 7 * (3em + 12px/4 + (8 - 2) * 2rem)))', 'calc(105em + 420rem + 155px)', '8555px'], + ['calc(5 * (20px / 2 + 7 * (3em + 12px/4 + (8 - 2) * 2rem)))', 'calc(105em + 155px + 420rem)', '8555px'], ]; @@ -107,7 +107,7 @@ var lengthOrPercentageProperties = [ lengthOrPercentageProperties.forEach(function(prop) { test(function() { div.style.setProperty(prop, 'calc(1px + 0%)'); - assert_equals(div.style.getPropertyValue(prop), 'calc(1px + 0%)'); + assert_equals(div.style.getPropertyValue(prop), 'calc(0% + 1px)'); }, 'calc for ' + prop); }); @@ -142,14 +142,14 @@ numberProperties.forEach(function(prop) { var otherProperties = [ ['border-width', 'calc(1px)', 'calc(1px)'], ['border-spacing', 'calc(1px)', 'calc(1px)'], - ['transform-origin', 'calc(1px + 0%)', 'calc(1px + 0%) center 0px'], - ['perspective-origin', 'calc(1px + 0%)', 'calc(1px + 0%) center'], - ['background-size', 'calc(1px + 0%)', 'calc(1px + 0%) auto'], - ['background-position', 'calc(1px + 0%) calc(2px + 0%)', 'calc(1px + 0%) calc(2px + 0%)'], - ['border-top-left-radius', 'calc(1px + 0%)', 'calc(1px + 0%) calc(1px + 0%)'], - ['border-bottom-left-radius', 'calc(1px + 0%)', 'calc(1px + 0%) calc(1px + 0%)'], - ['border-top-right-radius', 'calc(1px + 0%)', 'calc(1px + 0%) calc(1px + 0%)'], - ['border-bottom-right-radius', 'calc(1px + 0%)', 'calc(1px + 0%) calc(1px + 0%)'], + ['transform-origin', 'calc(1px + 0%)', 'calc(0% + 1px) center 0px'], + ['perspective-origin', 'calc(1px + 0%)', 'calc(0% + 1px) center'], + ['background-size', 'calc(1px + 0%)', 'calc(0% + 1px) auto'], + ['background-position', 'calc(1px + 0%) calc(2px + 0%)', 'calc(0% + 1px) calc(0% + 2px)'], + ['border-top-left-radius', 'calc(1px + 0%)', 'calc(0% + 1px) calc(0% + 1px)'], + ['border-bottom-left-radius', 'calc(1px + 0%)', 'calc(0% + 1px) calc(0% + 1px)'], + ['border-top-right-radius', 'calc(1px + 0%)', 'calc(0% + 1px) calc(0% + 1px)'], + ['border-bottom-right-radius', 'calc(1px + 0%)', 'calc(0% + 1px) calc(0% + 1px)'], ['counter-increment', 'foo calc(1 + 1)', 'foo calc(2)'], ];