зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1598234
- [css-grid][cssom] Make 'grid-area'/'grid-column'/'grid-row' shorthands serialize to shortest possible form. r=emilio
Differential Revision: https://phabricator.services.mozilla.com/D54386 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Родитель
f96607afa0
Коммит
6bb620e019
|
@ -181,8 +181,18 @@
|
|||
}
|
||||
|
||||
impl<'a> ToCss for LonghandsToSerialize<'a> {
|
||||
// Return the shortest possible serialization of the `grid-${kind}-[start/end]` values.
|
||||
// This function exploits the opportunities to omit the end value per this spec text:
|
||||
//
|
||||
// https://drafts.csswg.org/css-grid/#propdef-grid-column
|
||||
// "When the second value is omitted, if the first value is a <custom-ident>,
|
||||
// the grid-row-end/grid-column-end longhand is also set to that <custom-ident>;
|
||||
// otherwise, it is set to auto."
|
||||
fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
|
||||
self.grid_${kind}_start.to_css(dest)?;
|
||||
if self.grid_${kind}_start.can_omit(self.grid_${kind}_end) {
|
||||
return Ok(()); // the end value is redundant
|
||||
}
|
||||
dest.write_str(" / ")?;
|
||||
self.grid_${kind}_end.to_css(dest)
|
||||
}
|
||||
|
@ -247,14 +257,39 @@
|
|||
}
|
||||
|
||||
impl<'a> ToCss for LonghandsToSerialize<'a> {
|
||||
// Return the shortest possible serialization of the `grid-[column/row]-[start/end]` values.
|
||||
// This function exploits the opportunities to omit trailing values per this spec text:
|
||||
//
|
||||
// https://drafts.csswg.org/css-grid/#propdef-grid-area
|
||||
// "If four <grid-line> values are specified, grid-row-start is set to the first value,
|
||||
// grid-column-start is set to the second value, grid-row-end is set to the third value,
|
||||
// and grid-column-end is set to the fourth value.
|
||||
//
|
||||
// When grid-column-end is omitted, if grid-column-start is a <custom-ident>,
|
||||
// grid-column-end is set to that <custom-ident>; otherwise, it is set to auto.
|
||||
//
|
||||
// When grid-row-end is omitted, if grid-row-start is a <custom-ident>, grid-row-end is
|
||||
// set to that <custom-ident>; otherwise, it is set to auto.
|
||||
//
|
||||
// When grid-column-start is omitted, if grid-row-start is a <custom-ident>, all four
|
||||
// longhands are set to that value. Otherwise, it is set to auto."
|
||||
fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
|
||||
self.grid_row_start.to_css(dest)?;
|
||||
let mut trailing_values = 3;
|
||||
if self.grid_column_start.can_omit(self.grid_column_end) {
|
||||
trailing_values -= 1;
|
||||
if self.grid_row_start.can_omit(self.grid_row_end) {
|
||||
trailing_values -= 1;
|
||||
if self.grid_row_start.can_omit(self.grid_column_start) {
|
||||
trailing_values -= 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
let values = [&self.grid_column_start, &self.grid_row_end, &self.grid_column_end];
|
||||
for value in &values {
|
||||
for value in values.iter().take(trailing_values) {
|
||||
dest.write_str(" / ")?;
|
||||
value.to_css(dest)?;
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
}
|
||||
|
|
|
@ -58,7 +58,7 @@ pub use self::GenericGridLine as GridLine;
|
|||
|
||||
impl<Integer> GridLine<Integer>
|
||||
where
|
||||
Integer: Zero,
|
||||
Integer: PartialEq + Zero,
|
||||
{
|
||||
/// The `auto` value.
|
||||
pub fn auto() -> Self {
|
||||
|
@ -73,11 +73,27 @@ where
|
|||
pub fn is_auto(&self) -> bool {
|
||||
self.ident == atom!("") && self.line_num.is_zero() && !self.is_span
|
||||
}
|
||||
|
||||
/// Check whether this `<grid-line>` represents a `<custom-ident>` value.
|
||||
pub fn is_ident_only(&self) -> bool {
|
||||
self.ident != atom!("") && self.line_num.is_zero() && !self.is_span
|
||||
}
|
||||
|
||||
/// Check if `self` makes `other` omittable according to the rules at:
|
||||
/// https://drafts.csswg.org/css-grid/#propdef-grid-column
|
||||
/// https://drafts.csswg.org/css-grid/#propdef-grid-area
|
||||
pub fn can_omit(&self, other: &Self) -> bool {
|
||||
if self.is_ident_only() {
|
||||
self == other
|
||||
} else {
|
||||
other.is_auto()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl<Integer> ToCss for GridLine<Integer>
|
||||
where
|
||||
Integer: ToCss + Zero,
|
||||
Integer: ToCss + PartialEq + Zero,
|
||||
{
|
||||
fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
|
||||
where
|
||||
|
|
|
@ -13,26 +13,32 @@
|
|||
<body>
|
||||
<script>
|
||||
// auto
|
||||
test_valid_value("grid-area", "auto", "auto / auto / auto / auto");
|
||||
test_valid_value("grid-area", "AuTo", "auto / auto / auto / auto");
|
||||
test_valid_value("grid-row", "auto", "auto / auto");
|
||||
test_valid_value("grid-area", "auto");
|
||||
test_valid_value("grid-area", "auto / auto", "auto");
|
||||
test_valid_value("grid-area", "auto / auto / auto", "auto");
|
||||
test_valid_value("grid-area", "auto / auto / auto / auto", "auto");
|
||||
test_valid_value("grid-area", "AuTo", "auto");
|
||||
test_valid_value("grid-row", "auto");
|
||||
test_valid_value("grid-row", "auto/auto", "auto");
|
||||
test_valid_value("grid-column-end", "AuTo", "auto");
|
||||
|
||||
// <custom-ident>
|
||||
test_valid_value("grid-area", "--a", "--a / --a / --a / --a");
|
||||
test_valid_value("grid-row", "-zπ", "-zπ / -zπ");
|
||||
test_valid_value("grid-area", "--a");
|
||||
test_valid_value("grid-row", "-zπ");
|
||||
test_valid_value("grid-row", "-zπ/-zπ", "-zπ");
|
||||
test_valid_value("grid-row", "i / i", "i");
|
||||
test_valid_value("grid-row-start", "AZ");
|
||||
test_valid_value("grid-column-start", "-_π");
|
||||
test_valid_value("grid-row-end", "_9");
|
||||
|
||||
|
||||
// <integer> && <custom-ident>?
|
||||
test_valid_value("grid-area", "1", "1 / auto / auto / auto");
|
||||
test_valid_value("grid-area", "+90 -a-", "90 -a- / auto / auto / auto");
|
||||
test_valid_value("grid-row", "az 2", "2 az / auto");
|
||||
test_valid_value("grid-column", "9", "9 / auto");
|
||||
test_valid_value("grid-column", "-19 zA", "-19 zA / auto");
|
||||
test_valid_value("grid-column", "-A0 33", "33 -A0 / auto");
|
||||
test_valid_value("grid-area", "1");
|
||||
test_valid_value("grid-area", "+90 -a-", "90 -a-");
|
||||
test_valid_value("grid-row", "az 2", "2 az");
|
||||
test_valid_value("grid-column", "9");
|
||||
test_valid_value("grid-column", "-19 zA");
|
||||
test_valid_value("grid-column", "-A0 33", "33 -A0");
|
||||
test_valid_value("grid-row-start", "-19");
|
||||
test_valid_value("grid-row-start", "9 -Z_");
|
||||
test_valid_value("grid-column-start", "+90", "90");
|
||||
|
@ -41,20 +47,33 @@ test_valid_value("grid-row-end", "1 -πA");
|
|||
test_valid_value("grid-column-end", "π_ +5", "5 π_");
|
||||
|
||||
// span && [ <integer> || <custom-ident> ]
|
||||
test_valid_value("grid-area", "span 2 i", "span 2 i / auto / auto / auto");
|
||||
test_valid_value("grid-area", "i 2 SpAn", "span 2 i / auto / auto / auto");
|
||||
test_valid_value("grid-row", "span 2", "span 2 / auto");
|
||||
test_valid_value("grid-column", "i SpAn", "span i / auto");
|
||||
test_valid_value("grid-row-start", "span i", "span i");
|
||||
test_valid_value("grid-area", "span 2 i");
|
||||
test_valid_value("grid-area", "i 2 SpAn", "span 2 i");
|
||||
test_valid_value("grid-row", "span 2");
|
||||
test_valid_value("grid-column", "i SpAn", "span i");
|
||||
test_valid_value("grid-row-start", "span i");
|
||||
test_valid_value("grid-column-start", "SpAn i 2", "span 2 i");
|
||||
test_valid_value("grid-row-end", "2 i span", "span 2 i");
|
||||
test_valid_value("grid-column-end", "2 SpAn", "span 2");
|
||||
|
||||
// <grid-line> [ / <grid-line> ]{0,3}
|
||||
test_valid_value("grid-area", "auto / i", "auto / i / auto / i");
|
||||
test_valid_value("grid-area", "auto / i / 2 j", "auto / i / 2 j / i");
|
||||
test_valid_value("grid-area", "auto / i");
|
||||
test_valid_value("grid-area", "auto / i / auto / i", "auto / i");
|
||||
test_valid_value("grid-area", "auto / i / auto / 2 i");
|
||||
test_valid_value("grid-area", "1 / i / auto / i", "1 / i");
|
||||
test_valid_value("grid-area", "1 / auto / auto / auto", "1");
|
||||
test_valid_value("grid-area", "1 / auto / i / auto", "1 / auto / i");
|
||||
test_valid_value("grid-area", "1 / j / i / k");
|
||||
test_valid_value("grid-area", "1 / auto / 2 / auto", "1 / auto / 2");
|
||||
test_valid_value("grid-area", "1 / i / 2 / auto");
|
||||
test_valid_value("grid-area", "i / i / auto / auto");
|
||||
test_valid_value("grid-area", "i / auto / i / auto", "i / auto");
|
||||
test_valid_value("grid-area", "auto / i / 2 j");
|
||||
test_valid_value("grid-area", "auto / i / 2 j / span 3 k");
|
||||
test_valid_value("grid-row", "auto / i");
|
||||
test_valid_value("grid-row", "i / auto");
|
||||
test_valid_value("grid-row", "2 i / auto", "2 i");
|
||||
test_valid_value("grid-row", "1 / auto", "1");
|
||||
test_valid_value("grid-column", "2 j / span 3 k");
|
||||
|
||||
|
||||
|
|
Загрузка…
Ссылка в новой задаче