Bug 1754897 - Part 2: Support scroll-timeline-axis longhand in style system. r=emilio

Implement "scroll-timeline-axis: block | inline | vertical | horizontal". Differential Revision: https://phabricator.services.mozilla.com/D146019
2022-06-13 20:26:45 +00:00
parent 56b24a3676
commit 8950553d8b
13 changed files with 105 additions and 11 deletions
--- a/devtools/server/actors/animation-type-longhand.js
+++ b/devtools/server/actors/animation-type-longhand.js
@@ -236,6 +236,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
      "padding-inline-start",
      "math-depth",
      "-moz-top-layer",
+      "scroll-timeline-axis",
      "scroll-timeline-name",
      "size",
      "transition-delay",
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -3223,6 +3223,7 @@ exports.CSS_PROPERTIES = {
      "animation-delay",
      "animation-timeline",
      "scroll-timeline-name",
+      "scroll-timeline-axis",
      "-moz-box-align",
      "-moz-box-direction",
      "-moz-box-flex",
@@ -11802,6 +11803,10 @@ exports.PREFERENCES = [
    "scale",
    "layout.css.individual-transform.enabled"
  ],
+  [
+    "scroll-timeline-axis",
+    "layout.css.scroll-linked-animations.enabled"
+  ],
  [
    "scroll-timeline-name",
    "layout.css.scroll-linked-animations.enabled"
--- a/layout/style/ServoBindings.toml
+++ b/layout/style/ServoBindings.toml
@@ -447,6 +447,7 @@ cbindgen-types = [
    { gecko = "StyleScrollSnapStrictness", servo = "crate::values::computed::ScrollSnapStrictness" },
    { gecko = "StyleScrollSnapType", servo = "crate::values::computed::ScrollSnapType" },
    { gecko = "StyleScrollTimelineName", servo = "crate::values::computed::ScrollTimelineName" },
+    { gecko = "StyleScrollAxis", servo = "crate::values::computed::ScrollAxis" },
    { gecko = "StyleResize", servo = "crate::values::computed::Resize" },
    { gecko = "StyleOverflowClipBox", servo = "crate::values::computed::OverflowClipBox" },
    { gecko = "StyleFloat", servo = "crate::values::computed::Float" },
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -3183,7 +3183,8 @@ nsStyleUIReset::nsStyleUIReset(const Document& aDocument)
      mAnimationFillModeCount(1),
      mAnimationPlayStateCount(1),
      mAnimationIterationCountCount(1),
-      mAnimationTimelineCount(1) {
+      mAnimationTimelineCount(1),
+      mScrollTimelineAxis(StyleScrollAxis::Block) {
  MOZ_COUNT_CTOR(nsStyleUIReset);
  mTransitions[0].SetInitialValues();
  mAnimations[0].SetInitialValues();
@@ -3215,7 +3216,8 @@ nsStyleUIReset::nsStyleUIReset(const nsStyleUIReset& aSource)
      mAnimationPlayStateCount(aSource.mAnimationPlayStateCount),
      mAnimationIterationCountCount(aSource.mAnimationIterationCountCount),
      mAnimationTimelineCount(aSource.mAnimationTimelineCount),
-      mScrollTimelineName(aSource.mScrollTimelineName) {
+      mScrollTimelineName(aSource.mScrollTimelineName),
+      mScrollTimelineAxis(aSource.mScrollTimelineAxis) {
  MOZ_COUNT_CTOR(nsStyleUIReset);
 }

@@ -3271,7 +3273,8 @@ nsChangeHint nsStyleUIReset::CalcDifference(
       mWindowOpacity != aNewData.mWindowOpacity ||
       mMozWindowInputRegionMargin != aNewData.mMozWindowInputRegionMargin ||
       mMozWindowTransform != aNewData.mMozWindowTransform ||
-       mScrollTimelineName != aNewData.mScrollTimelineName)) {
+       mScrollTimelineName != aNewData.mScrollTimelineName ||
+       mScrollTimelineAxis != aNewData.mScrollTimelineAxis)) {
    hint |= nsChangeHint_NeutralChange;
  }

--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -1848,6 +1848,7 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleUIReset {
  uint32_t mAnimationTimelineCount;

  mozilla::StyleScrollTimelineName mScrollTimelineName;
+  mozilla::StyleScrollAxis mScrollTimelineAxis;
 };

 struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleUI {
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -13625,6 +13625,15 @@ if (IsCSSPropertyPrefEnabled("layout.css.scroll-linked-animations.enabled")) {
      "rgb(1, 2, 3)",
    ],
  };
+
+  gCSSProperties["scroll-timeline-axis"] = {
+    domProp: "scrollTimelineAxis",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    initial_values: ["block"],
+    other_values: ["inline", "vertical", "horizontal"],
+    invalid_values: ["auto", "none", "abc"],
+  };
 }

 if (IsCSSPropertyPrefEnabled("layout.css.scrollbar-gutter.enabled")) {
--- a/servo/components/style/properties/longhands/ui.mako.rs
+++ b/servo/components/style/properties/longhands/ui.mako.rs
@@ -314,3 +314,14 @@ ${helpers.predefined_type(
    spec="https://github.com/w3c/csswg-drafts/issues/6674",
    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
 )}
+
+${helpers.predefined_type(
+    "scroll-timeline-axis",
+    "ScrollAxis",
+    "computed::ScrollAxis::default()",
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-linked-animations.enabled",
+    spec="https://github.com/w3c/csswg-drafts/issues/6674",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
--- a/servo/components/style/values/computed/box.rs
+++ b/servo/components/style/values/computed/box.rs
@@ -15,8 +15,9 @@ pub use crate::values::specified::box_::{
    AnimationName, AnimationTimeline, Appearance, BreakBetween, BreakWithin,
    Clear as SpecifiedClear, Contain, ContainerName, ContainerType, ContentVisibility, Display,
    Float as SpecifiedFloat, Overflow, OverflowAnchor, OverflowClipBox, OverscrollBehavior,
-    ScrollSnapAlign, ScrollSnapAxis, ScrollSnapStop, ScrollSnapStrictness, ScrollSnapType,
-    ScrollTimelineName, ScrollbarGutter, TouchAction, TransitionProperty, WillChange,
+    ScrollAxis, ScrollSnapAlign, ScrollSnapAxis, ScrollSnapStop, ScrollSnapStrictness,
+    ScrollSnapType, ScrollTimelineName, ScrollbarGutter, TouchAction, TransitionProperty,
+    WillChange,
 };

 /// A computed value for the `vertical-align` property.
--- a/servo/components/style/values/computed/mod.rs
+++ b/servo/components/style/values/computed/mod.rs
@@ -47,7 +47,7 @@ pub use self::box_::{AnimationIterationCount, AnimationName, AnimationTimeline,
 pub use self::box_::{Appearance, BreakBetween, BreakWithin, Clear, ContentVisibility, Float};
 pub use self::box_::{Display, Overflow, OverflowAnchor, TransitionProperty};
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective, Resize, ScrollbarGutter};
-pub use self::box_::{ScrollSnapAlign, ScrollSnapAxis, ScrollSnapStop};
+pub use self::box_::{ScrollAxis, ScrollSnapAlign, ScrollSnapAxis, ScrollSnapStop};
 pub use self::box_::{ScrollSnapStrictness, ScrollSnapType, ScrollTimelineName};
 pub use self::box_::{TouchAction, VerticalAlign, WillChange};
 pub use self::color::{Color, ColorOrAuto, ColorPropertyValue, ColorScheme, PrintColorAdjust};
--- a/servo/components/style/values/specified/box.rs
+++ b/servo/components/style/values/specified/box.rs
@@ -803,13 +803,13 @@ impl Default for Scroller {
 #[repr(u8)]
 pub enum ScrollAxis {
    /// The block axis of the scroll container. (Default.)
-    Block,
+    Block = 0,
    /// The inline axis of the scroll container.
-    Inline,
+    Inline = 1,
    /// The vertical block axis of the scroll container.
-    Vertical,
+    Vertical = 2,
    /// The horizontal axis of the scroll container.
-    Horizontal,
+    Horizontal = 3,
 }

 impl Default for ScrollAxis {
--- a/servo/components/style/values/specified/mod.rs
+++ b/servo/components/style/values/specified/mod.rs
@@ -40,7 +40,7 @@ pub use self::box_::{AnimationIterationCount, AnimationName, AnimationTimeline,
 pub use self::box_::{Appearance, BreakBetween, BreakWithin, ContainerName, ContainerType};
 pub use self::box_::{Clear, ContentVisibility, Float, Overflow, OverflowAnchor};
 pub use self::box_::{OverflowClipBox, OverscrollBehavior, Perspective, Resize, ScrollbarGutter};
-pub use self::box_::{ScrollSnapAlign, ScrollSnapAxis, ScrollSnapStop};
+pub use self::box_::{ScrollAxis, ScrollSnapAlign, ScrollSnapAxis, ScrollSnapStop};
 pub use self::box_::{ScrollSnapStrictness, ScrollSnapType, ScrollTimelineName};
 pub use self::box_::{TouchAction, TransitionProperty, VerticalAlign, WillChange};
 pub use self::color::{Color, ColorOrAuto, ColorPropertyValue, ColorScheme, PrintColorAdjust};
--- a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-computed.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-computed.tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674">
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<style>
+  #outer { scroll-timeline-axis: inline; }
+  #target { scroll-timeline-axis: vertical; }
+</style>
+<div id="outer">
+  <div id="target"></div>
+</div>
+<script>
+test_computed_value('scroll-timeline-axis', 'initial', 'block');
+test_computed_value('scroll-timeline-axis', 'inherit', 'inline');
+test_computed_value('scroll-timeline-axis', 'unset', 'block');
+test_computed_value('scroll-timeline-axis', 'revert', 'block');
+test_computed_value('scroll-timeline-axis', 'block');
+test_computed_value('scroll-timeline-axis', 'inline');
+test_computed_value('scroll-timeline-axis', 'vertical');
+test_computed_value('scroll-timeline-axis', 'horizontal');
+
+test(() => {
+  let style = getComputedStyle(document.getElementById('target'));
+  assert_not_equals(Array.from(style).indexOf('scroll-timeline-axis'), -1);
+}, 'The scroll-timeline-axis property shows up in CSSStyleDeclaration enumeration');
+
+test(() => {
+  let style = document.getElementById('target').style;
+  assert_not_equals(style.cssText.indexOf('scroll-timeline-axis'), -1);
+}, 'The scroll-timeline-axis property shows up in CSSStyleDeclaration.cssText');
+
+</script>
--- a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-parsing.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-axis-parsing.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6674">
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/rewrite#scroll-timeline-axis">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<div id="target"></div>
+
+<script>
+
+test_valid_value('scroll-timeline-axis', 'initial');
+test_valid_value('scroll-timeline-axis', 'inherit');
+test_valid_value('scroll-timeline-axis', 'unset');
+test_valid_value('scroll-timeline-axis', 'revert');
+
+test_valid_value('scroll-timeline-axis', 'block');
+test_valid_value('scroll-timeline-axis', 'inline');
+test_valid_value('scroll-timeline-axis', 'vertical');
+test_valid_value('scroll-timeline-axis', 'horizontal');
+
+test_invalid_value('scroll-timeline-axis', 'abc');
+test_invalid_value('scroll-timeline-axis', '10px');
+test_invalid_value('scroll-timeline-axis', 'auto');
+test_invalid_value('scroll-timeline-axis', 'none');
+
+</script>