Bug 1487838 - Add a pref for |clip-path:path()|. r=xidorn

Add a preference, layout.css.clip-path-path.enabled, for |clip-path:path()|. Differential Revision: https://phabricator.services.mozilla.com/D4965 --HG-- extra : moz-landing-system : lando
2024-11-28 15:23:51 +00:00 · 2018-09-05 04:50:33 +00:00 · 2018-09-05 04:50:33 +00:00 · 8e384ca9b3
commit 8e384ca9b3
parent 817c2cd883
9 changed files with 41 additions and 32 deletions
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-path-001.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-path-001.html
@ -7,7 +7,6 @@
 <head>
  <title>CSS Masking: Test clip-path property and path function with nonzero</title>
  <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
-  <link rel="stylesheet" href="chrome://reftest/content/path.css">
  <link rel="match" href="clip-path-path-001-ref.html">
 </head>
 <style>
@ -15,10 +14,11 @@
    width: 100px;
    height: 100px;
    background-color: green;
+    clip-path: path(nonzero, 'M10,10h80v80h-80zM25,25h50v50h-50z');
  }
 </style>
 <body>
  <p>The test passes if there are a green filled rect.</p>
-  <div id="rect" class="path_nonzero_rect"></div>
+  <div id="rect"></div>
 </body>
 </html>
--- a/layout/reftests/svg/svg-integration/clip-path/clip-path-path-002.html
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-path-002.html
@ -7,7 +7,6 @@
 <head>
  <title>CSS Masking: Test clip-path property and path function with evenodd</title>
  <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
-  <link rel="stylesheet" href="chrome://reftest/content/path.css">
  <link rel="match" href="clip-path-path-002-ref.html">
 </head>
 <style>
@ -15,10 +14,11 @@
    width: 100px;
    height: 100px;
    background-color: green;
+    clip-path: path(evenodd, 'M10,10h80v80h-80zM25,25h50v50h-50z');
  }
 </style>
 <body>
  <p>The test passes if there are a green hollow rect.</p>
-  <div id="rect" class="path_evenodd_rect"></div>
+  <div id="rect"></div>
 </body>
 </html>
--- a/layout/reftests/svg/svg-integration/clip-path/path.css
+++ b/layout/reftests/svg/svg-integration/clip-path/path.css
@ -1,7 +0,0 @@
-.path_nonzero_rect {
-  clip-path: path(nonzero, 'M10,10h80v80h-80zM25,25h50v50h-50z');
-}
-
-.path_evenodd_rect {
-  clip-path: path(evenodd, 'M10,10h80v80h-80zM25,25h50v50h-50z');
-}
--- a/layout/reftests/svg/svg-integration/clip-path/reftest.list
+++ b/layout/reftests/svg/svg-integration/clip-path/reftest.list
@ -60,5 +60,5 @@ fuzzy(0-64,0-340) fuzzy-if(webrender,104-104,311-311) == clip-path-inset-003.htm

 == clip-path-transform-001.html clip-path-transform-001-ref.html

-== clip-path-path-001.html clip-path-path-001-ref.html
-== clip-path-path-002.html clip-path-path-002-ref.html
+pref(layout.css.clip-path-path.enabled,true) == clip-path-path-001.html clip-path-path-001-ref.html
+pref(layout.css.clip-path-path.enabled,true) == clip-path-path-002.html clip-path-path-002-ref.html
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@ -8101,19 +8101,6 @@ if (false) {
    other_values: [ "green", "#fc3" ],
    invalid_values: [ "000000", "ff00ff" ]
  };
-
-  // |clip-path: path()| is chrome-only.
-  gCSSProperties["clip-path"].other_values.push(
-    "path(nonzero, 'M 10 10 h 100 v 100 h-100 v-100 z')",
-    "path(evenodd, 'M 10 10 h 100 v 100 h-100 v-100 z')",
-    "path('M10,30A20,20 0,0,1 50,30A20,20 0,0,1 90,30Q90,60 50,90Q10,60 10,30z')",
-  );
-
-  gCSSProperties["clip-path"].invalid_values.push(
-    "path(nonzero)",
-    "path(evenodd, '')",
-    "path(abs, 'M 10 10 L 10 10 z')",
-  );
 }

 if (IsCSSPropertyPrefEnabled("layout.css.filters.enabled")) {
@ -8180,6 +8167,20 @@ if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) {
  };
 }

+if (IsCSSPropertyPrefEnabled("layout.css.clip-path-path.enabled")) {
+  gCSSProperties["clip-path"].other_values.push(
+    "path(nonzero, 'M 10 10 h 100 v 100 h-100 v-100 z')",
+    "path(evenodd, 'M 10 10 h 100 v 100 h-100 v-100 z')",
+    "path('M10,30A20,20 0,0,1 50,30A20,20 0,0,1 90,30Q90,60 50,90Q10,60 10,30z')",
+  );
+
+  gCSSProperties["clip-path"].invalid_values.push(
+    "path(nonzero)",
+    "path(evenodd, '')",
+    "path(abs, 'M 10 10 L 10 10 z')",
+  );
+}
+
 const OVERFLOW_MOZKWS = [
  "-moz-scrollbars-none",
  "-moz-scrollbars-horizontal",
--- a/layout/tools/reftest/jar.mn
+++ b/layout/tools/reftest/jar.mn
@ -8,7 +8,6 @@ reftest.jar:
  content/PerTestCoverageUtils.jsm (../../../tools/code-coverage/PerTestCoverageUtils.jsm)
  content/input.css (../../../editor/reftests/xul/input.css)
  content/moz-bool-pref.css (../../../layout/reftests/css-parsing/moz-bool-pref.css)
-  content/path.css (../../../layout/reftests/svg/svg-integration/clip-path/path.css)
  content/progress.css (../../../layout/reftests/forms/progress/style.css)
 *  content/manifest.jsm (manifest.jsm)
 *  content/reftest.jsm (reftest.jsm)
--- a/modules/libpref/init/StaticPrefList.h
+++ b/modules/libpref/init/StaticPrefList.h
@ -477,6 +477,13 @@ VARCACHE_PREF(
  bool, false
 )

+// Is path() supported in clip-path?
+VARCACHE_PREF(
+  "layout.css.clip-path-path.enabled",
+   layout_css_clip_path_path_enabled,
+  bool, false
+)
+
 // Is support for CSS column-span enabled?
 VARCACHE_PREF(
  "layout.css.column-span.enabled",
--- a/servo/components/style/values/specified/basic_shape.rs
+++ b/servo/components/style/values/specified/basic_shape.rs
@ -49,17 +49,24 @@ pub type ShapeRadius = generic::ShapeRadius<LengthOrPercentage>;
 /// The specified value of `Polygon`
 pub type Polygon = generic::Polygon<LengthOrPercentage>;

+#[cfg(feature = "gecko")]
+fn is_clip_path_path_enabled(context: &ParserContext) -> bool {
+    use gecko_bindings::structs::mozilla;
+    context.chrome_rules_enabled() ||
+        unsafe { mozilla::StaticPrefs_sVarCache_layout_css_clip_path_path_enabled }
+}
+#[cfg(feature = "servo")]
+fn is_clip_path_path_enabled(_: &ParserContext) -> bool {
+    false
+}
+
 impl Parse for ClippingShape {
    #[inline]
    fn parse<'i, 't>(
        context: &ParserContext,
        input: &mut Parser<'i, 't>,
    ) -> Result<Self, ParseError<'i>> {
-        // |clip-path:path()| is a chrome-only property value support for now. `path()` is
-        // defined in css-shape-2, but the spec is not stable enough, and we haven't decided
-        // to make it public yet. However, it has some benefits for the front-end, so we
-        // implement it.
-        if context.chrome_rules_enabled() {
+        if is_clip_path_path_enabled(context) {
            if let Ok(p) = input.try(|i| Path::parse(context, i)) {
                return Ok(ShapeSource::Path(p));
            }
--- a/testing/profiles/unittest/user.js
+++ b/testing/profiles/unittest/user.js
@ -169,6 +169,8 @@ user_pref("identity.fxaccounts.auth.uri", "https://{server}/fxa-dummy/");
 user_pref("identity.fxaccounts.remote.root", "https://{server}/");
 user_pref("javascript.options.showInConsole", true);
 user_pref("layout.accessiblecaret.enabled_on_touch", false);
+// Enable CSS clip-path `path()` for testing
+user_pref("layout.css.clip-path-path.enabled", true);
 // Enable CSS 'contain' for testing
 user_pref("layout.css.contain.enabled", true);
 // Enable CSS Grid 'subgrid' feature for testing