Bug 1504387 - Remove preference "layout.css.shape-outside.enabled". r=bradwerth,xidorn
authorTing-Yu Lin <tlin@mozilla.com>
Mon, 05 Nov 2018 15:27:36 +0000
changeset 444481 6e528251fad42087432100835b1e3fe8c59f5fec
parent 444480 848152c22f8bd814a564a2306bd249b88099aba8
child 444482 16689402ad9502b0945f998b2d68c4a3bfdd6aeb
push id72359
push useraethanyc@gmail.com
push dateMon, 05 Nov 2018 19:56:24 +0000
treeherderautoland@6e528251fad4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbradwerth, xidorn
bugs1504387
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1504387 - Remove preference "layout.css.shape-outside.enabled". r=bradwerth,xidorn shape-outside, shape-margin, shape-image-threshold have been shipped in Firefox 62. We can remove the preference. The change in devtools/shared/css/generated/properties-db.js is generated by "./mach devtools-css-db" The actual shape-image CORS mode tests in file_shape_outside_CORS.html are moved into test_shape_outside_CORS.html because we don't need the <iframe> trick to enable the feature. Differential Revision: https://phabricator.services.mozilla.com/D10804
devtools/client/shared/output-parser.js
devtools/shared/css/generated/properties-db.js
layout/reftests/w3c-css/submitted/shapes1/reftest.list
layout/style/test/file_shape_outside_CORS.html
layout/style/test/mochitest.ini
layout/style/test/property_database.js
layout/style/test/test_shape_outside_CORS.html
layout/style/test/test_transitions_per_property.html
modules/libpref/init/all.js
servo/components/style/properties/longhands/box.mako.rs
testing/profiles/unittest/user.js
--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -33,17 +33,16 @@ const COLOR_TAKING_FUNCTIONS = ["linear-
                                 "-moz-repeating-radial-gradient", "drop-shadow"];
 // Functions that accept a shape argument.
 const BASIC_SHAPE_FUNCTIONS = ["polygon", "circle", "ellipse", "inset"];
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
 const FLEXBOX_HIGHLIGHTER_ENABLED_PREF = "devtools.inspector.flexboxHighlighter.enabled";
 const CSS_SHAPES_ENABLED_PREF = "devtools.inspector.shapesHighlighter.enabled";
-const CSS_SHAPE_OUTSIDE_ENABLED_PREF = "layout.css.shape-outside.enabled";
 
 /**
  * This module is used to process text for output by developer tools. This means
  * linking JS files with the debugger, CSS files with the style editor, JS
  * functions with the debugger, placing color swatches next to colors and
  * adding doorhanger previews where possible (images, angles, lengths,
  * border radius, cubic-bezier etc.).
  *
@@ -93,19 +92,17 @@ OutputParser.prototype = {
    *         A document fragment containing color swatches etc.
    */
   parseCssProperty: function(name, value, options = {}) {
     options = this._mergeOptions(options);
 
     options.expectCubicBezier = this.supportsType(name, CSS_TYPES.TIMING_FUNCTION);
     options.expectDisplay = name === "display";
     options.expectFilter = name === "filter";
-    options.expectShape = name === "clip-path" ||
-                          (name === "shape-outside"
-                           && Services.prefs.getBoolPref(CSS_SHAPE_OUTSIDE_ENABLED_PREF));
+    options.expectShape = name === "clip-path" || name === "shape-outside";
     options.expectFont = name === "font-family";
     options.supportsColor = this.supportsType(name, CSS_TYPES.COLOR) ||
                             this.supportsType(name, CSS_TYPES.GRADIENT);
 
     // The filter property is special in that we want to show the
     // swatch even if the value is invalid, because this way the user
     // can easily use the editor to fix it.
     if (options.expectFilter || this._cssPropertySupportsValue(name, value)) {
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -9358,20 +9358,16 @@ exports.PREFERENCES = [
     "scroll-snap-type-x",
     "layout.css.scroll-snap.enabled"
   ],
   [
     "scroll-snap-type-y",
     "layout.css.scroll-snap.enabled"
   ],
   [
-    "shape-image-threshold",
-    "layout.css.shape-outside.enabled"
-  ],
-  [
     "background-blend-mode",
     "layout.css.background-blend-mode.enabled"
   ],
   [
     "font-variation-settings",
     "layout.css.font-variations.enabled"
   ],
   [
@@ -9390,40 +9386,32 @@ exports.PREFERENCES = [
     "scroll-snap-coordinate",
     "layout.css.scroll-snap.enabled"
   ],
   [
     "scrollbar-color",
     "layout.css.scrollbar-color.enabled"
   ],
   [
-    "shape-outside",
-    "layout.css.shape-outside.enabled"
-  ],
-  [
     "translate",
     "layout.css.individual-transform.enabled"
   ],
   [
     "scroll-snap-points-x",
     "layout.css.scroll-snap.enabled"
   ],
   [
     "scroll-snap-points-y",
     "layout.css.scroll-snap.enabled"
   ],
   [
     "scroll-snap-destination",
     "layout.css.scroll-snap.enabled"
   ],
   [
-    "shape-margin",
-    "layout.css.shape-outside.enabled"
-  ],
-  [
     "-webkit-text-stroke-width",
     "layout.css.prefixes.webkit"
   ],
   [
     "-webkit-text-fill-color",
     "layout.css.prefixes.webkit"
   ],
   [
--- a/layout/reftests/w3c-css/submitted/shapes1/reftest.list
+++ b/layout/reftests/w3c-css/submitted/shapes1/reftest.list
@@ -1,10 +1,8 @@
-default-preferences pref(layout.css.shape-outside.enabled,true)
-
 # <shape-box> only
 == shape-outside-margin-box-001.html shape-outside-margin-box-001-ref.html
 == shape-outside-margin-box-002.html shape-outside-margin-box-002-ref.html
 == shape-outside-border-box-001.html shape-outside-border-box-001-ref.html
 == shape-outside-border-box-002.html shape-outside-border-box-002-ref.html
 == shape-outside-padding-box-001.html shape-outside-padding-box-001-ref.html
 == shape-outside-padding-box-002.html shape-outside-padding-box-002-ref.html
 == shape-outside-content-box-001.html shape-outside-content-box-001-ref.html
deleted file mode 100644
--- a/layout/style/test/file_shape_outside_CORS.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<style>
-.container {
-  clear: both;
-  width: 500px;
-}
-.shaper {
-  width: 50px;
-  height: 50px;
-  float: left;
-  background-color: green;
-}
-.shapeAllow {
-  shape-outside: url("support/1x1-transparent.png");
-}
-.shapeRefuse {
-  shape-outside: url("http://example.com/layout/style/test/support/1x1-transparent.png");
-}
-.sibling {
-  display: inline-block;
-}
-</style>
-
-<script>
-const DOMAIN = "http://mochi.test:8888";
-
-function sendResults() {
-  let divAllow = document.getElementById("allow");
-  let divAllowSib = divAllow.nextElementSibling;
-  window.parent.postMessage({
-    "result": (divAllowSib.getBoundingClientRect().left == divAllow.getBoundingClientRect().left),
-    "message": "Test 1: Sibling should be at same left offset as div (shape-outside should be allowed), and onload should only fire after layout is complete.",
-    },
-    DOMAIN);
-
-  let divRefuse = document.getElementById("refuse");
-  let divRefuseSib = divRefuse.nextElementSibling;
-  window.parent.postMessage({
-    "result": (divRefuseSib.getBoundingClientRect().left != divRefuse.getBoundingClientRect().left),
-    "message": "Test 2: Sibling should be at different left offset from div (shape-outside should be refused).",
-    },
-    DOMAIN);
-
-  window.parent.postMessage({"done": true}, DOMAIN);
-}
-</script>
-</head>
-<body onload="sendResults()">
-  <div class="container">
-    <div id="allow" class="shaper shapeAllow"></div><div class="sibling">allow (image is blank, so text is flush left)</div>
-  </div>
-  <div class="container">
-    <div id="refuse" class="shaper shapeRefuse"></div><div class="sibling">refuse (image unread, so text is moved to box edge)</div>
-  </div>
-</body>
-</html>
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -302,17 +302,16 @@ skip-if = toolkit == 'android' # bug 132
 [test_rule_serialization.html]
 [test_rules_out_of_sheets.html]
 [test_selectors.html]
 skip-if = toolkit == 'android' #bug 775227
 [test_selectors_on_anonymous_content.html]
 [test_setPropertyWithNull.html]
 [test_shape_outside_CORS.html]
 support-files =
-  file_shape_outside_CORS.html
   support/1x1-transparent.png
 [test_shorthand_property_getters.html]
 [test_specified_value_serialization.html]
 support-files = file_specified_value_serialization_individual_transforms.html
 [test_style_attr_listener.html]
 [test_style_attribute_quirks.html]
 [test_style_attribute_standards.html]
 [test_style_struct_copy_constructors.html]
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -5193,16 +5193,56 @@ var gCSSProperties = {
   "marker-start": {
     domProp: "markerStart",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "none" ],
     other_values: [ "url(#mysym)" ],
     invalid_values: []
   },
+  "shape-image-threshold": {
+    domProp: "shapeImageThreshold",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: [ "0", "0.0000", "-3", ],
+    other_values: [ "0.4", "1", "17", "397.376", "3e1", "3e+1", "3e-1", "3e0", "3e+0", "3e-0" ],
+    invalid_values: [ "0px", "1px", "20%", "default", "auto" ]
+  },
+  "shape-margin": {
+    domProp: "shapeMargin",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: [ "0", ],
+    other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)" ],
+    invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%" ],
+  },
+  "shape-outside": {
+    domProp: "shapeOutside",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_first_letter: true,
+    initial_values: [ "none" ],
+    other_values: [
+      "url(#my-shape-outside)",
+    ].concat(
+      basicShapeOtherValues,
+      validGradientAndElementValues
+    ),
+    invalid_values: [].concat(
+      basicShapeSVGBoxValues,
+      basicShapeInvalidValues,
+      invalidGradientAndElementValues
+    ),
+    unbalanced_values: [].concat(
+      basicShapeUnbalancedValues,
+      unbalancedGradientAndElementValues
+    )
+  },
   "shape-rendering": {
     domProp: "shapeRendering",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "auto" ],
     other_values: [ "optimizeSpeed", "crispEdges", "geometricPrecision" ],
     invalid_values: []
   },
@@ -6445,61 +6485,16 @@ if (IsCSSPropertyPrefEnabled("svg.transf
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "border-box" ],
     other_values: [ "fill-box", "view-box" ],
     invalid_values: ["content-box", "padding-box", "stroke-box", "margin-box"]
   };
 }
 
-if (IsCSSPropertyPrefEnabled("layout.css.shape-outside.enabled")) {
-  gCSSProperties["shape-image-threshold"] = {
-    domProp: "shapeImageThreshold",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    applies_to_first_letter: true,
-    initial_values: [ "0", "0.0000", "-3", ],
-    other_values: [ "0.4", "1", "17", "397.376", "3e1", "3e+1", "3e-1", "3e0", "3e+0", "3e-0" ],
-    invalid_values: [ "0px", "1px", "20%", "default", "auto" ]
-  };
-
-  gCSSProperties["shape-margin"] = {
-    domProp: "shapeMargin",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    applies_to_first_letter: true,
-    initial_values: [ "0", ],
-    other_values: [ "2px", "2%", "1em", "calc(1px + 1em)", "calc(1%)" ],
-    invalid_values: [ "-1px", "auto", "none", "1px 1px", "-1%" ],
-  };
-
-  gCSSProperties["shape-outside"] = {
-    domProp: "shapeOutside",
-    inherited: false,
-    type: CSS_TYPE_LONGHAND,
-    applies_to_first_letter: true,
-    initial_values: [ "none" ],
-    other_values: [
-      "url(#my-shape-outside)",
-    ].concat(
-      basicShapeOtherValues,
-      validGradientAndElementValues
-    ),
-    invalid_values: [].concat(
-      basicShapeSVGBoxValues,
-      basicShapeInvalidValues,
-      invalidGradientAndElementValues
-    ),
-    unbalanced_values: [].concat(
-      basicShapeUnbalancedValues,
-      unbalancedGradientAndElementValues
-    )
-  };
-}
-
 var isGridTemplateSubgridValueEnabled =
   IsCSSPropertyPrefEnabled("layout.css.grid-template-subgrid-value.enabled");
 
 gCSSProperties["display"].other_values.push("grid", "inline-grid");
 gCSSProperties["grid-auto-flow"] = {
   domProp: "gridAutoFlow",
   inherited: false,
   type: CSS_TYPE_LONGHAND,
--- a/layout/style/test/test_shape_outside_CORS.html
+++ b/layout/style/test/test_shape_outside_CORS.html
@@ -3,46 +3,57 @@
 <head>
 <meta charset="utf-8">
 <title>CSS Test: shape-outside with a CORS violation</title>
 <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
 <link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"/>
 <script src="/tests/SimpleTest/SimpleTest.js"></script>
 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
 
+<style>
+.container {
+  clear: both;
+  width: 500px;
+}
+.shaper {
+  width: 50px;
+  height: 50px;
+  float: left;
+  background-color: green;
+}
+.shapeAllow {
+  shape-outside: url("support/1x1-transparent.png");
+}
+.shapeRefuse {
+  shape-outside: url("http://example.com/layout/style/test/support/1x1-transparent.png");
+}
+.sibling {
+  display: inline-block;
+}
+</style>
+
 <script>
 SimpleTest.waitForExplicitFinish();
 
-// We'll eventually receive messages from our iframe, so prep to receive them here.
-function receiveMessage(event)
-{
-  if (event.data.done) {
-    // Remove ourself as an event listener, just to be thorough.
-    window.removeEventListener("message", receiveMessage);
-    // Undo our meddling in preferences, then finish the test.
-    SpecialPowers.popPrefEnv(SimpleTest.finish);
-    return;
-  }
+function runTests() {
+  let divAllow = document.getElementById("allow");
+  let divAllowSib = divAllow.nextElementSibling;
+  ok(divAllowSib.getBoundingClientRect().left == divAllow.getBoundingClientRect().left,
+     "Test 1: Sibling should be at same left offset as div (shape-outside should be allowed), and onload should only fire after layout is complete.");
 
-  let reportResult = event.data.todo ? todo : ok;
-  reportResult(event.data.result, event.data.message);
-}
-
-function runTests()
-{
-  window.addEventListener("message", receiveMessage);
+  let divRefuse = document.getElementById("refuse");
+  let divRefuseSib = divRefuse.nextElementSibling;
+  ok(divRefuseSib.getBoundingClientRect().left != divRefuse.getBoundingClientRect().left,
+     "Test 2: Sibling should be at different left offset from div (shape-outside should be refused).");
 
-  // Set a pref that we'll need, then set the source of the iframe.
-  // Once the iframe source is set, the contents will start sending
-  // messages to us.
-  SpecialPowers.pushPrefEnv({"set": [
-    ["layout.css.shape-outside.enabled", true],
-  ]}, () => {
-    let content = document.getElementById("content");
-    content.src = "file_shape_outside_CORS.html";
-  });
+  SimpleTest.finish();
 }
 </script>
 </head>
 <body onload="runTests()">
-<iframe id="content"></iframe>
+  <div class="container">
+    <div id="allow" class="shaper shapeAllow"></div><div class="sibling">allow (image is blank, so text is flush left)</div>
+  </div>
+  <div class="container">
+    <div id="refuse" class="shaper shapeRefuse"></div><div class="sibling">refuse (image unread, so text is moved to box edge)</div>
+  </div>
 </body>
 </html>
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -235,16 +235,24 @@ var supported_properties = {
                      test_length_clamped, test_percent_clamped ],
     "perspective": [ test_length_transition ],
     "perspective-origin": [ test_length_pair_transition,
                             test_length_percent_pair_transition,
                             test_length_percent_pair_unclamped ],
     "right": [ test_length_transition, test_percent_transition,
                test_length_percent_calc_transition,
                test_length_unclamped, test_percent_unclamped ],
+    "shape-image-threshold": [ test_float_zeroToOne_transition,
+                               // shape-image-threshold (like opacity) is
+                               // clamped in computed style
+                               // (not parsing/interpolation)
+                               test_float_zeroToOne_clamped ],
+    "shape-margin": [ test_length_transition, test_percent_transition,
+                      test_length_clamped, test_percent_clamped ],
+    "shape-outside": [ test_basic_shape_or_url_transition ],
     "stop-color": [ test_color_transition,
                     test_currentcolor_transition ],
     "stop-opacity" : [ test_float_zeroToOne_transition,
                        // opacity is clamped in computed style
                        // (not parsing/interpolation)
                        test_float_zeroToOne_clamped ],
     "stroke": [ test_color_transition,
                 test_currentcolor_transition ],
@@ -290,31 +298,16 @@ var supported_properties = {
     "word-spacing": [ test_length_transition, test_length_unclamped ],
     "z-index": [ test_integer_transition, test_pos_integer_or_auto_transition ],
     "-webkit-text-fill-color": [ test_color_transition,
                                  test_currentcolor_transition ],
     "-webkit-text-stroke-color": [ test_color_transition,
                                    test_currentcolor_transition ]
 };
 
-if (SpecialPowers.getBoolPref("layout.css.shape-outside.enabled")) {
-  supported_properties["shape-image-threshold"] =
-    [ test_float_zeroToOne_transition,
-      // shape-image-threshold (like opacity) is clamped in computed style
-      // (not parsing/interpolation)
-      test_float_zeroToOne_clamped ];
-
-  supported_properties["shape-margin"] =
-    [ test_length_transition, test_percent_transition,
-      test_length_clamped, test_percent_clamped ];
-
-  supported_properties["shape-outside"] =
-    [ test_basic_shape_or_url_transition ];
-}
-
 if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) {
   supported_properties["offset-path"] = [ test_path_function ];
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.clip-path-path.enabled")) {
   supported_properties["clip-path"].push(test_path_function);
 }
 
--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -3085,19 +3085,16 @@ pref("layout.css.scroll-behavior.spring-
 // reduced speed without overshooting.
 // When equal to 1.0, the system is critically-damped; it will reach the target
 // at the greatest speed without overshooting.
 pref("layout.css.scroll-behavior.damping-ratio", "1.0");
 
 // Is support for scroll-snap enabled?
 pref("layout.css.scroll-snap.enabled", true);
 
-// Is support for CSS shape-outside enabled?
-pref("layout.css.shape-outside.enabled", true);
-
 // Is support for document.fonts enabled?
 pref("layout.css.font-loading-api.enabled", true);
 
 // Are inter-character ruby annotations enabled?
 pref("layout.css.ruby.intercharacter.enabled", false);
 
 // Is support for overscroll-behavior enabled?
 pref("layout.css.overscroll-behavior.enabled", true);
--- a/servo/components/style/properties/longhands/box.mako.rs
+++ b/servo/components/style/properties/longhands/box.mako.rs
@@ -599,40 +599,37 @@
     products="gecko",
     animation_value_type="none",
     spec="https://drafts.csswg.org/css-will-change/#will-change",
 )}
 
 ${helpers.predefined_type(
     "shape-image-threshold", "Opacity", "0.0",
     products="gecko",
-    gecko_pref="layout.css.shape-outside.enabled",
     animation_value_type="ComputedValue",
     flags="APPLIES_TO_FIRST_LETTER",
     spec="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property",
 )}
 
 ${helpers.predefined_type(
     "shape-margin",
     "NonNegativeLengthOrPercentage",
     "computed::NonNegativeLengthOrPercentage::zero()",
     products="gecko",
-    gecko_pref="layout.css.shape-outside.enabled",
     animation_value_type="NonNegativeLengthOrPercentage",
     flags="APPLIES_TO_FIRST_LETTER",
     spec="https://drafts.csswg.org/css-shapes/#shape-margin-property",
 )}
 
 ${helpers.predefined_type(
     "shape-outside",
     "basic_shape::FloatAreaShape",
     "generics::basic_shape::ShapeSource::None",
     products="gecko",
     boxed=True,
-    gecko_pref="layout.css.shape-outside.enabled",
     animation_value_type="ComputedValue",
     flags="APPLIES_TO_FIRST_LETTER",
     spec="https://drafts.csswg.org/css-shapes/#shape-outside-property",
 )}
 
 ${helpers.predefined_type(
     "touch-action",
     "TouchAction",
--- a/testing/profiles/unittest/user.js
+++ b/testing/profiles/unittest/user.js
@@ -178,18 +178,16 @@ user_pref("layout.css.grid-template-subg
 // Enable CSS initial-letter for testing
 user_pref("layout.css.initial-letter.enabled", true);
 // Enable -webkit-{min|max}-device-pixel-ratio media queries for testing
 user_pref("layout.css.prefixes.device-pixel-ratio-webkit", true);
 // Enable webkit prefixed CSS features for testing
 user_pref("layout.css.prefixes.webkit", true);
 // Make sure CSS error reporting is enabled for tests
 user_pref("layout.css.report_errors", true);
-// Enable CSS shape-outside for testing
-user_pref("layout.css.shape-outside.enabled", true);
 // Disable spammy layout warnings because they pollute test logs
 user_pref("layout.spammy_warnings.enabled", false);
 // Make tests run consistently on DevEdition (which has a lightweight theme
 // selected by default).
 user_pref("lightweightThemes.selectedThemeID", "");
 // Disable all recommended Marionette preferences for Gecko tests.
 // The prefs recommended by Marionette are typically geared towards
 // consumer automation; not vendor testing.