Skip to content

Commit c196b6b

Browse files
devongovettdevongovett
committed
Fix background-position
1 parent 34de9db commit c196b6b

File tree

3 files changed

+76
-32
lines changed

3 files changed

+76
-32
lines changed

‎src/lib.rs‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -897,7 +897,13 @@ mod tests {
897897
"#
898898
});
899899

900-
minify_test(".foo { background-position: bottom left }", ".foo{background-position:0% 100%}");
900+
minify_test(".foo { background-position: bottom left }", ".foo{background-position:0 100%}");
901+
minify_test(".foo { background-position: left 10px center }", ".foo{background-position:10px 50%}");
902+
minify_test(".foo { background-position: right 10px center }", ".foo{background-position:right 10px center}");
903+
minify_test(".foo { background-position: right 10px top 20px }", ".foo{background-position:right 10px top 20px}");
904+
minify_test(".foo { background-position: left 10px top 20px }", ".foo{background-position:10px 20px}");
905+
minify_test(".foo { background-position: left 10px bottom 20px }", ".foo{background-position:left 10px bottom 20px}");
906+
minify_test(".foo { background-position: left 10px top }", ".foo{background-position:10px 0}");
901907
}
902908

903909
#[test]
@@ -3674,11 +3680,11 @@ mod tests {
36743680
);
36753681
minify_test(
36763682
".foo { background: radial-gradient(at top left, yellow, blue) }",
3677-
".foo{background:radial-gradient(at 0% 0%,#ff0,#00f)}"
3683+
".foo{background:radial-gradient(at 0 0,#ff0,#00f)}"
36783684
);
36793685
minify_test(
36803686
".foo { background: radial-gradient(5em circle at top left, yellow, blue) }",
3681-
".foo{background:radial-gradient(5em at 0% 0%,#ff0,#00f)}"
3687+
".foo{background:radial-gradient(5em at 0 0,#ff0,#00f)}"
36823688
);
36833689
minify_test(
36843690
".foo { background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%) }",
@@ -4051,8 +4057,8 @@ mod tests {
40514057
indoc! {r#"
40524058
.foo {
40534059
background-image: -webkit-gradient(radial, left top, 0, left top, 20, from(red), to(#00f));
4054-
background-image: -webkit-radial-gradient(20px at 0% 0%, red, #00f);
4055-
background-image: radial-gradient(20px at 0% 0%, red, #00f);
4060+
background-image: -webkit-radial-gradient(20px at 0 0, red, #00f);
4061+
background-image: radial-gradient(20px at 0 0, red, #00f);
40564062
}
40574063
"#},
40584064
Browsers {

‎src/values/gradient.rs‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -838,7 +838,7 @@ impl<S: Parse> Parse for WebKitGradientPointComponent<S> {
838838
}
839839
}
840840

841-
impl<S: ToCss + Clone + Into<Percentage>> ToCss for WebKitGradientPointComponent<S> {
841+
impl<S: ToCss + Clone + Into<LengthPercentage>> ToCss for WebKitGradientPointComponent<S> {
842842
fn to_css<W>(&self, dest: &mut Printer<W>) -> std::fmt::Result where W: std::fmt::Write {
843843
use WebKitGradientPointComponent::*;
844844
match &self {
@@ -858,12 +858,8 @@ impl<S: ToCss + Clone + Into<Percentage>> ToCss for WebKitGradientPointComponent
858858
},
859859
Side(s) => {
860860
if dest.minify {
861-
let percentage: Percentage = s.clone().into();
862-
if percentage == 0.0 {
863-
dest.write_char('0')?;
864-
} else {
865-
percentage.to_css(dest)?;
866-
}
861+
let lp: LengthPercentage = s.clone().into();
862+
lp.to_css(dest)?;
867863
} else {
868864
s.to_css(dest)?;
869865
}

‎src/values/position.rs‎

Lines changed: 62 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ use cssparser::*;
22
use crate::traits::{Parse, ToCss};
33
use crate::macros::enum_property;
44
use crate::printer::Printer;
5-
use super::length::LengthPercentage;
5+
use super::length::{LengthPercentage, LengthValue};
66
use super::percentage::Percentage;
77

88
/// https://www.w3.org/TR/css-backgrounds-3/#background-position
@@ -126,17 +126,25 @@ impl ToCss for Position {
126126
fn to_css<W>(&self, dest: &mut Printer<W>) -> std::fmt::Result where W: std::fmt::Write {
127127
match (&self.x, &self.y) {
128128
(
129-
x_pos @ &HorizontalPosition::Side(_, Some(_)),
129+
x_pos @ &HorizontalPosition::Side(side, Some(_)),
130130
&VerticalPosition::Length(ref y_lp),
131-
) => {
131+
) if side != HorizontalPositionKeyword::Left => {
132132
x_pos.to_css(dest)?;
133133
dest.write_str(" top ")?;
134134
y_lp.to_css(dest)
135135
},
136+
(
137+
x_pos @ &HorizontalPosition::Side(side, Some(_)),
138+
&VerticalPosition::Center
139+
) if side != HorizontalPositionKeyword::Left => {
140+
// If there is a side keyword with an offset, "center" must be a keyword not a percentage.
141+
x_pos.to_css(dest)?;
142+
dest.write_str(" center")
143+
},
136144
(
137145
&HorizontalPosition::Length(ref x_lp),
138-
y_pos @ &VerticalPosition::Side(_, Some(_)),
139-
) => {
146+
y_pos @ &VerticalPosition::Side(side, Some(_)),
147+
) if side != VerticalPositionKeyword::Top => {
140148
dest.write_str("left ")?;
141149
x_lp.to_css(dest)?;
142150
dest.write_str(" ")?;
@@ -153,7 +161,7 @@ impl ToCss for Position {
153161
&HorizontalPosition::Side(side, None),
154162
&VerticalPosition::Center,
155163
) => {
156-
let p: Percentage = side.into();
164+
let p: LengthPercentage = side.into();
157165
p.to_css(dest)
158166
},
159167
(
@@ -173,7 +181,7 @@ impl ToCss for Position {
173181
&HorizontalPosition::Side(side, None),
174182
&VerticalPosition::Length(LengthPercentage::Percentage(Percentage(y_lp))),
175183
) if y_lp == 0.5 => {
176-
let p: Percentage = side.into();
184+
let p: LengthPercentage = side.into();
177185
p.to_css(dest)
178186
},
179187
(
@@ -186,16 +194,50 @@ impl ToCss for Position {
186194
&HorizontalPosition::Side(x, None),
187195
&VerticalPosition::Side(y, None)
188196
) => {
189-
let x: Percentage = x.into();
190-
let y: Percentage = y.into();
197+
let x: LengthPercentage = x.into();
198+
let y: LengthPercentage = y.into();
191199
x.to_css(dest)?;
192200
dest.write_str(" ")?;
193201
y.to_css(dest)
194202
},
195203
(x_pos, y_pos) => {
196-
x_pos.to_css(dest)?;
197-
dest.write_str(" ")?;
198-
y_pos.to_css(dest)
204+
let zero = LengthPercentage::Dimension(LengthValue::Px(0.0));
205+
let fifty = LengthPercentage::Percentage(Percentage(0.5));
206+
let x_len = match &x_pos {
207+
HorizontalPosition::Side(HorizontalPositionKeyword::Left, len) => {
208+
if let Some(len) = len {
209+
Some(len)
210+
} else {
211+
Some(&zero)
212+
}
213+
},
214+
HorizontalPosition::Length(len) => Some(len),
215+
HorizontalPosition::Center => Some(&fifty),
216+
_ => None
217+
};
218+
219+
let y_len = match &y_pos {
220+
VerticalPosition::Side(VerticalPositionKeyword::Top, len) => {
221+
if let Some(len) = len {
222+
Some(len)
223+
} else {
224+
Some(&zero)
225+
}
226+
},
227+
VerticalPosition::Length(len) => Some(len),
228+
VerticalPosition::Center => Some(&fifty),
229+
_ => None
230+
};
231+
232+
if let (Some(x), Some(y)) = (x_len, y_len) {
233+
x.to_css(dest)?;
234+
dest.write_str(" ")?;
235+
y.to_css(dest)
236+
} else {
237+
x_pos.to_css(dest)?;
238+
dest.write_str(" ")?;
239+
y_pos.to_css(dest)
240+
}
199241
},
200242
}
201243
}
@@ -256,11 +298,11 @@ enum_property!(HorizontalPositionKeyword,
256298
Right
257299
);
258300

259-
impl Into<Percentage> for HorizontalPositionKeyword {
260-
fn into(self) -> Percentage {
301+
impl Into<LengthPercentage> for HorizontalPositionKeyword {
302+
fn into(self) -> LengthPercentage {
261303
match self {
262-
HorizontalPositionKeyword::Left => Percentage(0.0),
263-
HorizontalPositionKeyword::Right => Percentage(1.0)
304+
HorizontalPositionKeyword::Left => LengthPercentage::Dimension(LengthValue::Px(0.0)),
305+
HorizontalPositionKeyword::Right => LengthPercentage::Percentage(Percentage(1.0))
264306
}
265307
}
266308
}
@@ -270,11 +312,11 @@ enum_property!(VerticalPositionKeyword,
270312
Bottom
271313
);
272314

273-
impl Into<Percentage> for VerticalPositionKeyword {
274-
fn into(self) -> Percentage {
315+
impl Into<LengthPercentage> for VerticalPositionKeyword {
316+
fn into(self) -> LengthPercentage {
275317
match self {
276-
VerticalPositionKeyword::Top => Percentage(0.0),
277-
VerticalPositionKeyword::Bottom => Percentage(1.0)
318+
VerticalPositionKeyword::Top => LengthPercentage::Dimension(LengthValue::Px(0.0)),
319+
VerticalPositionKeyword::Bottom => LengthPercentage::Percentage(Percentage(1.0))
278320
}
279321
}
280322
}

0 commit comments

Comments
 (0)