Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 11:25:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1597642 - Have scale function and scale property accept percentage value. r=emilio

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D55012

--HG--
extra : moz-landing-system : lando
This commit is contained in:
enordin 2019-11-29 04:40:03 +00:00
parent 28517b934c
commit d69bff9bdb
9 changed files with 104 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
layout/reftests/transform/scale-percent-1-ref.html
View File

@ -6,6 +6,7 @@
background: green;
width: 100px;
height: 100px;
-moz-transform: scale(0.5, 0.75);
}
</style>
</head>

4
layout/reftests/transform/scale-percent-1.html
View File

@ -1,13 +1,13 @@
<html>
<head>
<!-- Percent values are not allowed for scale, so this shouldn't do anything -->
<!-- Percent values should function the same as their equivalent numeric values: e.g. (50% == 0.5) -->
<style>
body { margin: 0px; }
div {
background: green;
width: 100px;
height: 100px;
-moz-transform: scale(50%, 50%);
-moz-transform: scale(50%, 75%);
}
</style>
</head>

50
layout/style/test/property_database.js
View File

@ -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)",

30
servo/components/style/values/specified/transform.rs
View File

@ -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<Number>;
impl Parse for Scale {
/// Scale accepts <number> | <percentage>, 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: <number> <number> <number>'
return Ok(generic::Scale::Scale(sx, sy, sz));
return Ok(generic::Scale::Scale(sx, sy, sz.to_number()));
}
// 'scale: <number> <number>'

14
testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html
View File

@ -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");
</script>
</body>
</html>

3
testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html
View File

@ -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)");

16
testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html
View File

@ -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)");

6
testing/web-platform/tests/css/css-transforms/transform-scale-percent-001.html
View File

@ -6,15 +6,15 @@
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-scale">
<meta name="assert" content='This tests that scale(50%, 50%) does nothing,
because scale() is defined to take numbers and not percentages.'>
<meta name="assert" content='This tests that scale(50%, 75%) is equivalent to scale(0.5, 0.75),
because scale() is defined to accept both numbers and percentages.'>
<link rel="match" href="transform-scale-percent-ref.html">
<style>
div {
background: green;
width: 100px;
height: 100px;
transform: scale(50%, 50%);
transform: scale(50%, 75%);
}
</style>
</head>

1
testing/web-platform/tests/css/css-transforms/transform-scale-percent-ref.html
View File

@ -9,6 +9,7 @@
background: green;
width: 100px;
height: 100px;
transform: scale(0.5, 0.75)
}
</style>
</head>