Bug 1507103 - Account for empty circle() and ellipse() in Shape Path Editor. r=gl
authorRazvan Caliman <rcaliman@mozilla.com>
Mon, 21 Jan 2019 17:33:52 +0000
changeset 454721 e25a1ed32b5347b86843580e66b344bf11dcceba
parent 454720 fcef3b13bb1c0ea091dc09a07e35ad758e0a56f2
child 454722 32541f2f057571ac075a6893689e30e676ac7d23
push id35411
push usercsabou@mozilla.com
push dateTue, 22 Jan 2019 03:53:40 +0000
treeherdermozilla-central@ada22b635f8d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1507103, 1521508
milestone66.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 1507103 - Account for empty circle() and ellipse() in Shape Path Editor. r=gl This patch handles empty circle() and ellipse() basic shape definitions. Their computed values will hold default values for center and radius. For circle(), it is just a case of treating identifiers like "center" as unitless to allow falling back to computed sizes and pixels. For ellipse(), the solution is identical, but the issue is compounded by an incomplete computed style value tracked in Bug 1521508 which is missing the default values for x and y radii. Differential Revision: https://phabricator.services.mozilla.com/D17129
devtools/server/actors/highlighters/shapes.js
--- a/devtools/server/actors/highlighters/shapes.js
+++ b/devtools/server/actors/highlighters/shapes.js
@@ -1940,29 +1940,36 @@ class ShapesHighlighter extends AutoRefr
       // Undo the insertion of &nbsp; that was done in splitCoords.
       return coord.replace(/\u00a0/g, " ");
     }) : [];
     const radius = (values[0]) ? values[0].trim() : "closest-side";
     return { cx, cy, radius };
   }
 
   /**
-   * Parses the definition of the CSS ellipse() function and returns the x/y radiuses and
-   * center coordinates, converted to percentages.
+   * Parses the computed style definition of the CSS ellipse() function and returns the
+   * x/y radii and center coordinates, converted to percentages.
    * @param {String} definition the arguments of the ellipse() function
    * @returns {Object} an object of the form { rx, ry, cx, cy }, where rx and ry are the
    *          radiuses for the x and y axes, and cx and cy are the x/y coordinates for the
    *          center of the ellipse. All values are evaluated and converted to percentages
    */
   ellipsePoints(definition) {
     this.coordUnits = this.ellipseRawPoints();
     if (!this.origCoordUnits) {
       this.origCoordUnits = this.coordUnits;
     }
-    const values = definition.split(" at ");
+    let values = definition.split(" at ");
+
+    // Until Bug 1521508 is fixed, we need to shim the computed style value of empty
+    // ellipse() declarations because they're missing the "closest-side" default radii.
+    if (values[0] === definition) {
+      values = `closest-side closest-side ${definition}`.split(" at ");
+    }
+
     const center = splitCoords(values[1]).map(this.convertCoordsToPercent.bind(this));
 
     const radii = splitCoords(values[0]).map((radius, i) => {
       if (radius === "closest-side") {
         // radius is the distance from center to closest x/y side of reference box
         return i % 2 === 0 ? Math.min(center[0], 100 - center[0])
                            : Math.min(center[1], 100 - center[1]);
       } else if (radius === "farthest-side") {
@@ -2761,16 +2768,17 @@ exports.getUnit = getUnit;
  * @returns {Boolean} whether the given value has a unit.
  */
 const isUnitless = (point) => {
   return !point ||
          !point.match(/[^\d]+$/) ||
          // If zero doesn't have a unit, its numeric and string forms should be equal.
          (parseFloat(point) === 0 && (parseFloat(point).toString() === point)) ||
          point.includes("(") ||
+         point === "center" ||
          point === "closest-side" ||
          point === "farthest-side";
 };
 
 /**
  * Return the anchor corresponding to the given scale type.
  * @param {String} type a scale type, of form "scale-[direction]"
  * @returns {String} a string describing the anchor, one of the 8 cardinal directions.