From 320fb92c62b78d219168272cf596aa33a557ae81 Mon Sep 17 00:00:00 2001 From: Boris Chiou Date: Mon, 23 Jan 2023 21:39:25 +0000 Subject: [PATCH] Bug 1808409 - Part 3: Support view-timeline shorthand. r=emilio view-timeline shorthand includes view-timeline-name and view-timeline-axis, but excludes view-timeline-inset. Note: We will fix the test of "view-timeline-name: auto" in the next patch. Differential Revision: https://phabricator.services.mozilla.com/D166404 --- .../shared/css/generated/properties-db.js | 4 + layout/style/test/property_database.js | 19 ++++ .../style/properties/shorthands/ui.mako.rs | 65 +++++++++++ ...view-timeline-shorthand.tentative.html.ini | 101 ------------------ 4 files changed, 88 insertions(+), 101 deletions(-) diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js index 347087ccde1e..5be8ee6c9c78 100644 --- a/devtools/shared/css/generated/properties-db.js +++ b/devtools/shared/css/generated/properties-db.js @@ -12172,6 +12172,10 @@ exports.PREFERENCES = [ "scroll-timeline", "layout.css.scroll-driven-animations.enabled" ], + [ + "view-timeline", + "layout.css.scroll-driven-animations.enabled" + ], [ "-moz-transform", "layout.css.prefixes.transforms" diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js index 8844a9f89aaa..1ab15c57aca8 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -13741,6 +13741,25 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-driven-animations.enabled")) { other_values: ["auto", "1%", "1px 1%", "auto auto", "calc(0px) auto"], invalid_values: ["none", "rgb(1, 2, 3)", "foo bar", "1px 2px 3px"], }; + + gCSSProperties["view-timeline"] = { + domProp: "viewTimeline", + inherited: false, + type: CSS_TYPE_TRUE_SHORTHAND, + subproperties: ["view-timeline-name", "view-timeline-axis"], + initial_values: ["none block", "none"], + other_values: [ + "bounce inline", + "bounce vertical", + "\\32bounce inline", + "-bounce block", + "\\32 0bounce vertical", + "-\\32 0bounce horizontal", + "a, b, c", + "a block, b inline, c vertical", + ], + invalid_values: ["", ",", "abc abc", "horizontal a", "block abc"], + }; } if (IsCSSPropertyPrefEnabled("layout.css.scrollbar-gutter.enabled")) { diff --git a/servo/components/style/properties/shorthands/ui.mako.rs b/servo/components/style/properties/shorthands/ui.mako.rs index fc84e74e2319..6ed3053b77c8 100644 --- a/servo/components/style/properties/shorthands/ui.mako.rs +++ b/servo/components/style/properties/shorthands/ui.mako.rs @@ -325,6 +325,7 @@ macro_rules! try_parse_one { let mut name = None; let mut axis = None; + // FIXME: Bug 1804573: The order of |name| and |axis| should be fixed. loop { // Note: When parsing positionally-ambiguous keywords in a property value, a // production can only claim the keyword if no other unfulfilled @@ -380,3 +381,67 @@ macro_rules! try_parse_one { } } + +// Note: view-timeline shorthand doesn't take view-timeline-inset into account. +<%helpers:shorthand + engines="gecko" + name="view-timeline" + sub_properties="view-timeline-name view-timeline-axis" + gecko_pref="layout.css.scroll-driven-animations.enabled", + spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-shorthand" +> + pub fn parse_value<'i>( + context: &ParserContext, + input: &mut Parser<'i, '_>, + ) -> Result> { + use crate::properties::longhands::{view_timeline_axis, view_timeline_name}; + + let mut names = Vec::with_capacity(1); + let mut axes = Vec::with_capacity(1); + input.parse_comma_separated(|input| { + let name = view_timeline_name::single_value::parse(context, input)?; + let axis = input.try_parse(|i| view_timeline_axis::single_value::parse(context, i)); + + names.push(name); + axes.push(axis.unwrap_or_default()); + + Ok(()) + })?; + + Ok(expanded! { + view_timeline_name: view_timeline_name::SpecifiedValue(names.into()), + view_timeline_axis: view_timeline_axis::SpecifiedValue(axes.into()), + }) + } + + impl<'a> ToCss for LonghandsToSerialize<'a> { + fn to_css(&self, dest: &mut CssWriter) -> fmt::Result where W: fmt::Write { + let len = self.view_timeline_name.0.len(); + // There should be at least one declared value + if len == 0 { + return Ok(()); + } + + // If any value list length is differs then we don't do a shorthand serialization + // either. + if len != self.view_timeline_axis.0.len() { + return Ok(()); + } + + for i in 0..len { + if i != 0 { + dest.write_str(", ")?; + } + + self.view_timeline_name.0[i].to_css(dest)?; + + if self.view_timeline_axis.0[i] != Default::default() { + dest.write_char(' ')?; + self.view_timeline_axis.0[i].to_css(dest)?; + } + + } + Ok(()) + } + } + diff --git a/testing/web-platform/meta/scroll-animations/css/view-timeline-shorthand.tentative.html.ini b/testing/web-platform/meta/scroll-animations/css/view-timeline-shorthand.tentative.html.ini index b5e2cef65b66..343b5c7c5212 100644 --- a/testing/web-platform/meta/scroll-animations/css/view-timeline-shorthand.tentative.html.ini +++ b/testing/web-platform/meta/scroll-animations/css/view-timeline-shorthand.tentative.html.ini @@ -1,104 +1,3 @@ [view-timeline-shorthand.tentative.html] - expected: - if (os == "android") and fission: [OK, TIMEOUT] - [e.style['view-timeline'\] = "abcd" should set the property value] - expected: FAIL - - [e.style['view-timeline'\] = "none block" should set the property value] - expected: FAIL - - [e.style['view-timeline'\] = "none inline" should set the property value] - expected: FAIL - - [e.style['view-timeline'\] = "inline block" should set the property value] - expected: FAIL - - [e.style['view-timeline'\] = "block block" should set the property value] - expected: FAIL - - [e.style['view-timeline'\] = "vertical block" should set the property value] - expected: FAIL - - [e.style['view-timeline'\] = "horizontal block" should set the property value] - expected: FAIL - - [e.style['view-timeline'\] = "a, b, c" should set the property value] - expected: FAIL - - [e.style['view-timeline'\] = "a inline, b block, c vertical" should set the property value] - expected: FAIL - - [Property view-timeline value 'abcd'] - expected: FAIL - - [Property view-timeline value 'none block'] - expected: FAIL - - [Property view-timeline value 'none inline'] - expected: FAIL - - [Property view-timeline value 'inline block'] - expected: FAIL - - [Property view-timeline value 'block block'] - expected: FAIL - - [Property view-timeline value 'vertical block'] - expected: FAIL - - [Property view-timeline value 'horizontal block'] - expected: FAIL - - [Property view-timeline value 'a, b, c'] - expected: FAIL - - [Property view-timeline value 'a inline, b block, c vertical'] - expected: FAIL - - [e.style['view-timeline'\] = "abc vertical" should set view-timeline-axis] - expected: FAIL - - [e.style['view-timeline'\] = "abc vertical" should set view-timeline-name] - expected: FAIL - - [e.style['view-timeline'\] = "abc vertical" should not set unrelated longhands] - expected: FAIL - - [e.style['view-timeline'\] = "abc vertical, def" should set view-timeline-axis] - expected: FAIL - - [e.style['view-timeline'\] = "abc vertical, def" should set view-timeline-name] - expected: FAIL - - [e.style['view-timeline'\] = "abc vertical, def" should not set unrelated longhands] - expected: FAIL - - [e.style['view-timeline'\] = "abc, def" should set view-timeline-axis] - expected: FAIL - - [e.style['view-timeline'\] = "abc, def" should set view-timeline-name] - expected: FAIL - - [e.style['view-timeline'\] = "abc, def" should not set unrelated longhands] - expected: FAIL - - [e.style['view-timeline'\] = "inline horizontal" should set view-timeline-axis] - expected: FAIL - - [e.style['view-timeline'\] = "inline horizontal" should set view-timeline-name] - expected: FAIL - - [e.style['view-timeline'\] = "inline horizontal" should not set unrelated longhands] - expected: FAIL - - [Shorthand contraction of view-timeline-name:abc;view-timeline-axis:inline] - expected: FAIL - - [Shorthand contraction of view-timeline-name:a, b;view-timeline-axis:inline, block] - expected: FAIL - - [Shorthand contraction of view-timeline-name:none, none;view-timeline-axis:block, block] - expected: FAIL - [e.style['view-timeline'\] = "auto" should set the property value] expected: FAIL