diff --git a/layout/reftests/transform/scale-percent-1-ref.html b/layout/reftests/transform/scale-percent-1-ref.html index a6baeab57a12..78c05acc5473 100644 --- a/layout/reftests/transform/scale-percent-1-ref.html +++ b/layout/reftests/transform/scale-percent-1-ref.html @@ -6,6 +6,7 @@ background: green; width: 100px; height: 100px; + -moz-transform: scale(0.5, 0.75); } diff --git a/layout/reftests/transform/scale-percent-1.html b/layout/reftests/transform/scale-percent-1.html index a76ecd7edd05..45e2c0abd540 100644 --- a/layout/reftests/transform/scale-percent-1.html +++ b/layout/reftests/transform/scale-percent-1.html @@ -1,13 +1,13 @@ - + diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js index 2b14a3ee9ba6..bee8e3f2c766 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -3626,9 +3626,23 @@ var gCSSProperties = { "rotate(0.25turn)", "rotate(0)", "scalex(10)", + "scalex(10%)", + "scalex(-10)", + "scalex(-10%)", "scaley(10)", + "scaley(10%)", + "scaley(-10)", + "scaley(-10%)", "scale(10)", + "scale(10%)", "scale(10, 20)", + "scale(10%, 20%)", + "scale(-10)", + "scale(-10%)", + "scale(-10, 20)", + "scale(10%, -20%)", + "scale(10, 20%)", + "scale(-10, 20%)", "skewx(30deg)", "skewx(0)", "skewy(0)", @@ -3663,9 +3677,13 @@ var gCSSProperties = { "translate3d(2em, 3px, 1em)", "translatex(2px) translate3d(4px, 5px, 6px) translatey(1px)", "scale3d(4, 4, 4)", + "scale3d(4%, 4%, 4%)", "scale3d(-2, 3, -7)", + "scale3d(-2%, 3%, -7%)", "scalez(4)", + "scalez(4%)", "scalez(-6)", + "scalez(-6%)", "rotate3d(2, 3, 4, 45deg)", "rotate3d(-3, 7, 0, 12rad)", "rotatex(15deg)", @@ -3692,7 +3710,6 @@ var gCSSProperties = { "translatex(red)", "translatey()", "matrix(1px, 2px, 3px, 4px, 5px, 6px)", - "scale(150%)", "skewx(red)", "matrix(1%, 0, 0, 0, 0px, 0px)", "matrix(0, 1%, 2, 3, 4px,5px)", @@ -11484,15 +11501,25 @@ if (IsCSSPropertyPrefEnabled("layout.css.individual-transform.enabled")) { initial_values: ["none"], other_values: [ "10", + "10%", "10 20", + "10% 20%", "10 20 30", + "10% 20% 30%", + "10 20% 30", + "-10", + "-10%", + "-10 20", + "-10% 20%", + "-10 20 -30", + "-10% 20% -30%", + "-10 20% -30", "0 2.0", /* valid calc() values */ "calc(1 + 2)", "calc(10) calc(20) 30", ], invalid_values: [ - "150%", "10px", "10deg", "10, 20, 30", @@ -12566,9 +12593,23 @@ if (false) { "rotate(0.25turn)", "rotate(0)", "scalex(10)", + "scalex(10%)", + "scalex(-10)", + "scalex(-10%)", "scaley(10)", + "scaley(10%)", + "scaley(-10)", + "scaley(-10%)", "scale(10)", + "scale(10%)", "scale(10, 20)", + "scale(10%, 20%)", + "scale(-10)", + "scale(-10%)", + "scale(-10, 20)", + "scale(10%, -20%)", + "scale(10, 20%)", + "scale(-10, 20%)", "skewx(30deg)", "skewx(0)", "skewy(0)", @@ -12603,9 +12644,13 @@ if (false) { "translate3d(2em, 3px, 1em)", "translatex(2px) translate3d(4px, 5px, 6px) translatey(1px)", "scale3d(4, 4, 4)", + "scale3d(4%, 4%, 4%)", "scale3d(-2, 3, -7)", + "scale3d(-2%, 3%, -7%)", "scalez(4)", + "scalez(4%)", "scalez(-6)", + "scalez(-6%)", "rotate3d(2, 3, 4, 45deg)", "rotate3d(-3, 7, 0, 12rad)", "rotatex(15deg)", @@ -12631,7 +12676,6 @@ if (false) { "translatex(red)", "translatey()", "matrix(1px, 2px, 3px, 4px, 5px, 6px)", - "scale(150%)", "skewx(red)", "matrix(1%, 0, 0, 0, 0px, 0px)", "matrix(0, 1%, 2, 3, 4px,5px)", diff --git a/servo/components/style/values/specified/transform.rs b/servo/components/style/values/specified/transform.rs index 6a33b6654630..44f1afe83d1b 100644 --- a/servo/components/style/values/specified/transform.rs +++ b/servo/components/style/values/specified/transform.rs @@ -12,7 +12,7 @@ use crate::values::generics::transform::{Matrix, Matrix3D}; use crate::values::specified::position::{ HorizontalPositionKeyword, Side, VerticalPositionKeyword, }; -use crate::values::specified::{self, Angle, Integer, Length, LengthPercentage, Number}; +use crate::values::specified::{self, Angle, Integer, Length, LengthPercentage, Number, NumberOrPercentage}; use crate::Zero; use cssparser::Parser; use style_traits::{ParseError, StyleParseErrorKind}; @@ -163,32 +163,32 @@ impl Transform { Ok(generic::TransformOperation::Translate3D(tx, ty, tz)) }, "scale" => { - let sx = Number::parse(context, input)?; + let sx = NumberOrPercentage::parse(context, input)?.to_number(); if input.try(|input| input.expect_comma()).is_ok() { - let sy = Number::parse(context, input)?; + let sy = NumberOrPercentage::parse(context, input)?.to_number(); Ok(generic::TransformOperation::Scale(sx, sy)) } else { Ok(generic::TransformOperation::Scale(sx, sx)) } }, "scalex" => { - let sx = Number::parse(context, input)?; + let sx = NumberOrPercentage::parse(context, input)?.to_number(); Ok(generic::TransformOperation::ScaleX(sx)) }, "scaley" => { - let sy = Number::parse(context, input)?; + let sy = NumberOrPercentage::parse(context, input)?.to_number(); Ok(generic::TransformOperation::ScaleY(sy)) }, "scalez" => { - let sz = Number::parse(context, input)?; + let sz = NumberOrPercentage::parse(context, input)?.to_number(); Ok(generic::TransformOperation::ScaleZ(sz)) }, "scale3d" => { - let sx = Number::parse(context, input)?; + let sx = NumberOrPercentage::parse(context, input)?.to_number(); input.expect_comma()?; - let sy = Number::parse(context, input)?; + let sy = NumberOrPercentage::parse(context, input)?.to_number(); input.expect_comma()?; - let sz = Number::parse(context, input)?; + let sz = NumberOrPercentage::parse(context, input)?.to_number(); Ok(generic::TransformOperation::Scale3D(sx, sy, sz)) }, "rotate" => { @@ -445,6 +445,9 @@ impl Parse for Translate { pub type Scale = generic::Scale; impl Parse for Scale { + /// Scale accepts | , so we parse it as NumberOrPercentage, + /// and then convert into an Number if it's a Percentage. + /// https://github.com/w3c/csswg-drafts/pull/4396 fn parse<'i, 't>( context: &ParserContext, input: &mut Parser<'i, 't>, @@ -453,11 +456,12 @@ impl Parse for Scale { return Ok(generic::Scale::None); } - let sx = Number::parse(context, input)?; - if let Ok(sy) = input.try(|i| Number::parse(context, i)) { - if let Ok(sz) = input.try(|i| Number::parse(context, i)) { + let sx = NumberOrPercentage::parse(context, input)?.to_number(); + if let Ok(sy) = input.try(|i| NumberOrPercentage::parse(context, i)) { + let sy = sy.to_number(); + if let Ok(sz) = input.try(|i| NumberOrPercentage::parse(context, i)) { // 'scale: ' - return Ok(generic::Scale::Scale(sx, sy, sz)); + return Ok(generic::Scale::Scale(sx, sy, sz.to_number())); } // 'scale: ' diff --git a/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html index bbd443a717ab..9055e7dfd5f4 100644 --- a/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html +++ b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html @@ -14,14 +14,28 @@ test_valid_value("scale", "none"); test_valid_value("scale", "1"); +test_valid_value("scale", "1%", "0.01"); test_valid_value("scale", "100"); +test_valid_value("scale", "100%", "1"); test_valid_value("scale", "100 100", "100"); +test_valid_value("scale", "100% 100%", "1"); test_valid_value("scale", "100 100 1", "100"); +test_valid_value("scale", "100% 100% 1", "1"); + +test_valid_value("scale", "-100"); +test_valid_value("scale", "-100%", "-1"); +test_valid_value("scale", "-100 -100", "-100"); +test_valid_value("scale", "-100% -100%", "-1"); +test_valid_value("scale", "-100 -100 1", "-100"); +test_valid_value("scale", "-100% -100% 1", "-1"); test_valid_value("scale", "100 200"); +test_valid_value("scale", "100% 200%", "1 2"); test_valid_value("scale", "100 200 1", "100 200"); +test_valid_value("scale", "100% 200% 1", "1 2"); test_valid_value("scale", "100 200 300"); + diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html index 25aeeae4e5df..8985720622c6 100644 --- a/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html @@ -23,10 +23,13 @@ test_invalid_value("transform", "translateX(-4px, 5px)"); test_invalid_value("transform", "translateY(4%, 5%)"); test_invalid_value("transform", "scale(6, 7, 8)"); +test_invalid_value("transform", "scale(6%, 7%, 8%)"); test_invalid_value("transform", "scaleX(1, 2)"); +test_invalid_value("transform", "scaleX(1%, 2%)"); test_invalid_value("transform", "scaleY(3, 4)"); +test_invalid_value("transform", "scaleY(3%, 4%)"); test_invalid_value("transform", "rotate(0, 0)"); test_invalid_value("transform", "rotate(0, 0, 0)"); diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html index 8237a9a4a688..ce32e2b44e6e 100644 --- a/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html @@ -26,11 +26,27 @@ test_valid_value("transform", "translateY(5%)"); test_valid_value("transform", "scale(2)"); test_valid_value("transform", "scale(3, 4)"); + +test_valid_value("transform", "scale(-2)"); test_valid_value("transform", "scale(-5, -6)"); +test_valid_value("transform", "scale(250%)", "scale(2.5)"); +test_valid_value("transform", "scale(325%, 475%)", "scale(3.25, 4.75)"); + +test_valid_value("transform", "scale(-250%)", "scale(-2.5)"); +test_valid_value("transform", "scale(-500%, -620%)", "scale(-5, -6.2)"); + test_valid_value("transform", "scaleX(7)"); +test_valid_value("transform", "scaleX(720%)", "scaleX(7.2)"); test_valid_value("transform", "scaleY(-8)"); +test_valid_value("transform", "scaleY(-85%)", "scaleY(-0.85)"); + +test_valid_value("transform", "scale3d(0.5, 2.5, 3)"); +test_valid_value("transform", "scale3d(50%, 250%, 300%)", "scale3d(0.5, 2.5, 3)"); + +test_valid_value("transform", "scale3d(-0.5, 2.5, -3)"); +test_valid_value("transform", "scale3d(-50%, 250%, -300%)", "scale3d(-0.5, 2.5, -3)"); test_valid_value("transform", "rotate(0)", "rotate(0deg)"); test_valid_value("transform", "rotate(90deg)"); diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-percent-001.html b/testing/web-platform/tests/css/css-transforms/transform-scale-percent-001.html index 79d32b5c0453..09874988628c 100644 --- a/testing/web-platform/tests/css/css-transforms/transform-scale-percent-001.html +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-percent-001.html @@ -6,15 +6,15 @@ - + diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-percent-ref.html b/testing/web-platform/tests/css/css-transforms/transform-scale-percent-ref.html index be0bac656b65..f6bd01413536 100644 --- a/testing/web-platform/tests/css/css-transforms/transform-scale-percent-ref.html +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-percent-ref.html @@ -9,6 +9,7 @@ background: green; width: 100px; height: 100px; + transform: scale(0.5, 0.75) }