@breakside/jskit 2026.11.0 → 2026.27.0

package/Root/Frameworks/Foundation/JSCubicBezier.js

@@ -19,6 +19,9 @@
 
 JSGlobalObject.JSCubicBezier = function(p1, cp1, cp2, p2){
     if (this === undefined){
+        if (p1 === null){
+            return null;
+        }
         return new JSCubicBezier(p1, cp1, cp2, p2);
     }
     if (p1 instanceof JSCubicBezier){
@@ -126,6 +129,56 @@ JSCubicBezier.prototype = {
             points.push(this.pointAtInterval(t[1]));
         }
         return points;
+    },
+
+    curvesBySplittingAtInterval: function(t){
+        var q0 = this.p1.interpolation(this.cp1, t);
+        var q1 = this.cp1.interpolation(this.cp2, t);
+        var q2 = this.cp2.interpolation(this.p2, t);
+        var r0 = q0.interpolation(q1, t);
+        var r1 = q1.interpolation(q2, t);
+        var p = r0.interpolation(r1, t);
+        var cp1 = this.p1.interpolation(this.cp1, t);
+        var cp2 = this.p2.interpolation(this.cp2, (1 - t));
+        return [
+            JSCubicBezier(this.p1, cp1, r0, p),
+            JSCubicBezier(p, r1, cp2, this.p2)
+        ];
+    },
+
+    pointsWithFlatness: function(flatness){
+        var points = [JSPoint(this.p1)];
+        var dt = 0.1;
+        var t = 0;
+        var p0 = this.p1;
+        var p;
+        var q;
+        var mid;
+        var delta;
+        var iterationCount = 0;
+        var acceptable;
+        while (t < 1 && iterationCount < 1000){
+            p = this.pointAtInterval(t + dt);
+            q = this.pointAtInterval(t + dt / 2);
+            mid = p0.interpolation(p, 0.5);
+            acceptable = q.distanceToPoint(mid) <= flatness;
+            if (acceptable){
+                points.push(p);
+                t += dt;
+                dt = Math.min(dt * 2, 1 - t);
+                p0 = p;
+            }else{
+                dt /= 2;
+            }
+            ++iterationCount;
+        }
+        return points;
     }
 
-};
+};
+
+JSCubicBezier.fromQuadradicBezier = function(p1, cp, p2){
+    var cp1 = p1.interpolation(cp, 2/3);
+    var cp2 = p2.interpolation(cp, 2/3);
+    return JSCubicBezier(p1, cp1, cp2, p2);
+};

package/Root/Frameworks/Foundation/JSFont.js

@@ -88,12 +88,6 @@ JSClass("JSFont", JSObject, {
 
     initFromDictionary: function(dictionary){
         var descriptor = JSFontDescriptor.descriptorWithFamily(dictionary.family, dictionary.weight, dictionary.style);
-        if (descriptor === null){
-            if (dictionary.url){
-                descriptor = JSURLFontDescriptor.initWithURL(JSURL.initWithString(dictionary.url), dictionary.family, dictionary.weight, dictionary.style);
-                JSFontDescriptor.registerDescriptor(descriptor);
-            }
-        }
         if (descriptor !== null){
             return JSFont.initWithDescriptor(descriptor, dictionary.size);
         }
@@ -102,7 +96,6 @@ JSClass("JSFont", JSObject, {
 
     dictionaryRepresentation: function(){
         return {
-            url: this.descriptor instanceof JSURLFontDescriptor ? this._descriptor.url : undefined,
             family: this._descriptor.family,
             weight: this._descriptor.weight,
             style: this._descriptor.style,
@@ -164,8 +157,14 @@ JSClass("JSFont", JSObject, {
     },
 
     _calculateDisplayMetrics: function(){
-        this._displayAscender = Math.round(this._ascender);
-        this._displayDescender = Math.round(this._descender);
+        // Math.round always rounds towards +Infinity when a given number
+        // has a fractional part exactly equal to 0.5.
+        // So, 2.5 rounds to 3 but -2.5 rounds to -2.
+        //
+        // For the purposes of this calculation, we want negative
+        // values like -2.5 to round to -3.
+        this._displayAscender = this._ascender < 0 ? -Math.round(-this._ascender) : Math.round(this._ascender);
+        this._displayDescender = this._descender < 0 ? -Math.round(-this._descender) : Math.round(this._descender);
         this._displayLineHeight = this._displayAscender - this._displayDescender;
     },
 

package/Root/Frameworks/Foundation/JSGradient.js

@@ -142,7 +142,17 @@ JSClass('JSGradient', JSObject, {
     },
 
     addStop: function(position, color){
-        this.stops.push({position: position, color: color});
+        var l = this.stops.length;
+        var stop = {position: position, color: color};
+        var i = l - 1;
+        for (; i >= 0; --i){
+            if (this.stops[i].position <= position){
+                break;
+            }
+        }
+        i++;
+        this.stops.splice(i, 0, stop);
+        return i;
     },
 
     cssString: function(size){
@@ -167,6 +177,19 @@ JSClass('JSGradient', JSObject, {
         return 'linear-gradient(%fdeg, %s)'.sprintf(angle, cssStops.join(', '));
     },
 
+    radialCSSString: function(size){
+        var cssStops = [];
+        var stop;
+        for (var i = 0, l = this.stops.length; i < l; ++i){
+            stop = this.stops[i];
+            cssStops.push('%s %f%%'.sprintf(stop.color.cssString(), stop.position * 100));
+        }
+        var start = JSPoint(this.start.x * size.width, this.start.y * size.height);
+        var end = JSPoint(this.end.x * size.width, this.end.y * size.height);
+        var d = start.distanceToPoint(end);
+        return 'radial-gradient(%fpx at %f%% %f%%, %s)'.sprintf(d, this.start.x * 100, this.start.y * 100, cssStops.join(', '));
+    },
+
     colorAtPosition: function(position){
         if (position <= this.stops[0].position){
             return this.stops[0].color;
@@ -229,7 +252,10 @@ JSClass('JSGradient', JSObject, {
         var gradient = JSGradient.init();
         gradient.start = transform.convertPointFromTransform(this.start);
         gradient.end = transform.convertPointFromTransform(this.end);
-        gradient.stops = JSCopy(this.stops);
+        var i, l;
+        for (i = 0, l = this.stops.length; i < l; ++i){
+            gradient.addStop(this.stops[i].position, this.stops[i].color);
+        }
         return gradient;
     }
 

package/Root/Frameworks/Foundation/JSImage+HTML.js

@@ -32,4 +32,30 @@ _JSURLImage.definePropertiesFromExtensions({
     htmlURLString: function(){
         return this.url.encodedString;
     }
-});
+});
+
+JSImage.definePropertiesFromExtensions({
+
+    _htmlImage: null,
+    _htmlImagePromise: null,
+
+    preloadForHTMLContexts: function(){
+        if (this._htmlImagePromise === null){
+            var image = this;
+            this._htmlImagePromise = new Promise(function(resolve, reject){
+                var htmlImage = new JSGlobalObject.Image();
+                htmlImage.src = image.htmlURLString();
+                htmlImage.onload = function(){
+                    resolve(htmlImage);
+                };
+                htmlImage.onerror = function(){
+                    reject(new Error("failed to load image"));
+                };
+            }).then(function(htmlImage){
+                image._htmlImage = htmlImage;
+            });
+        }
+        return this._htmlImagePromise;
+    }
+
+});

package/Root/Frameworks/Foundation/JSNumberFormatter.js

@@ -560,6 +560,8 @@ JSClass("JSNumberFormatter", JSObject, {
         var canSeePercent = false;
         var canSeeGroup = false;
         var seenDigit = false;
+        var prefix = "";
+        var suffix = "";
         var stringMatches = function(substr){
             if (substr.length === 0){
                 return false;
@@ -588,6 +590,7 @@ JSClass("JSNumberFormatter", JSObject, {
                 sign = -1;
                 canSeeSign = false;
                 i += this.minusSign.length;
+                prefix += this.minusSign;
             }else if (canSeeSign && stringMatches(this.plusSign)){
                 canSeeSign = false;
                 i += this.plusSign.length;
@@ -625,8 +628,12 @@ JSClass("JSNumberFormatter", JSObject, {
                 i += this.groupingSeparator.length;
             }else if (c == 0x20){
                 ++i;
+            }else if (!seenDigit){
+                prefix += string[i];
+                ++i;
             }else{
-                return null;
+                suffix += string[i];
+                ++i;
             }
         }
         if (!seenDigit){
@@ -639,6 +646,21 @@ JSClass("JSNumberFormatter", JSObject, {
         if (sign < 0){
             n = -n;
         }
+        if (n >= 0){
+            if (prefix !== "" && prefix !== this.positivePrefix){
+                return null;
+            }
+            if (suffix !== "" && suffix !== this.positiveSuffix){
+                return null;
+            }
+        }else{
+            if (prefix !== "" && prefix !== this.negativePrefix){
+                return null;
+            }
+            if (suffix !== "" && suffix !== this.negativeSuffix){
+                return null;
+            }
+        }
         return n;
     },
 

package/Root/Frameworks/Foundation/JSPath.js

@@ -53,6 +53,40 @@ JSClass("JSPath", JSObject, {
         return true;
     },
 
+    elements: JSReadOnlyProperty(),
+
+    _elements: null,
+
+    _invalidateElements: function(){
+        this._elements = null;
+    },
+
+    getElements: function(){
+        if (this._elements === null){
+            this._elements = [];
+            var i, l, j, k;
+            var subpath, segment;
+            for (i = 0, l = this.subpaths.length; i < l; ++i){
+                subpath = this.subpaths[i];
+                this._elements.push(JSPathElement(JSPathElement.Type.move, subpath.firstPoint));
+                if (subpath.segments.length > 0){
+                    for (j = 0, k = subpath.segments.length; j < k; ++j){
+                        segment = subpath.segments[j];
+                        if (segment.type == JSPath.SegmentType.line){
+                            this._elements.push(JSPathElement(JSPathElement.Type.line, segment.end));
+                        }else if (segment.type == JSPath.SegmentType.curve){
+                            this._elements.push(JSPathElement(JSPathElement.Type.cubicCurve, segment.curve.p2, segment.curve.p1, segment.curve.cp1, segment.curve.cp2));
+                        }
+                    }
+                }
+                if (subpath.closed){
+                    this._elements.push(JSPathElement(JSPathElement.Type.close));
+                }
+            }
+        }
+        return this._elements;
+    },
+
     subpaths: null,
     currentPoint: JSReadOnlyProperty('_currentPoint', null),
     currentSubpath: null,
@@ -68,6 +102,7 @@ JSClass("JSPath", JSObject, {
         this.subpaths.push(this.currentSubpath);
         this._currentPoint = point;
         this._invalidateBoundingRect();
+        this._invalidateElements();
     },
 
     addLineToPoint: function(point, transform){
@@ -80,6 +115,7 @@ JSClass("JSPath", JSObject, {
         this.currentSubpath.segments.push({type: JSPath.SegmentType.line, end: point});
         this._currentPoint = point;
         this._invalidateBoundingRect();
+        this._invalidateElements();
     },
 
     addCurveToPoint: function(point, control1, control2, transform){
@@ -93,6 +129,15 @@ JSClass("JSPath", JSObject, {
         this.currentSubpath.segments.push({type: JSPath.SegmentType.curve, curve: curve});
         this._currentPoint = point;
         this._invalidateBoundingRect();
+        this._invalidateElements();
+    },
+
+    addQuadraticCurveToPoint: function(point, control, transform){
+        if (transform !== undefined){
+            point = transform.convertPointFromTransform(point);
+            control = transform.convertPointFromTransform(control);
+        }
+        this.addCurveToPoint(point, this._currentPoint.interpolation(control, 2/3), point.interpolation(control, 2/3));
     },
 
     addRect: function(rect, transform){
@@ -328,7 +373,9 @@ JSClass("JSPath", JSObject, {
         if (this.subpaths.length === 0){
             this.moveToPoint(p1, transform);
         }else{
-            this.addLineToPoint(p1, transform);
+            if (Math.abs(p1.x - this._currentPoint.x) > 0.00001 || Math.abs(p1.y - this._currentPoint.y) > 0.00001){
+                this.addLineToPoint(p1, transform);
+            }
         }
 
         // If there's no radius, then there's nothing left to do
@@ -512,10 +559,10 @@ JSClass("JSPath", JSObject, {
         // distance is clockwise or counter clockwise.
         // Note: we could swap the angles and always arc in a fixed direction,
         // but I think it makes more sense to always arc from p0 to p2.
-        if (startAngle < 0){
+        if (startAngle <= 0){
             startAngle += TWO_PI;
         }
-        if (endAngle < 0){
+        if (endAngle <= 0){
             endAngle += TWO_PI;
         }
         var clockwise;
@@ -524,7 +571,9 @@ JSClass("JSPath", JSObject, {
         }else{
             clockwise = endAngle - startAngle <= Math.PI;
         }
-        this.moveToPoint(t1);
+        if (Math.abs(t1.x - this._currentPoint.x) > 0.00001 || Math.abs(t1.y - this._currentPoint.y) > 0.00001){
+            this.moveToPoint(t1);
+        }
         this.addArc(center, radius, startAngle, endAngle, clockwise);
     },
 
@@ -533,6 +582,25 @@ JSClass("JSPath", JSObject, {
             this._currentPoint = this.currentSubpath.firstPoint;
             this.currentSubpath.closed = true;
             this.currentSubpath = null;
+            this._invalidateElements();
+        }
+    },
+
+    addPath: function(path, transform){
+        var i, l;
+        var elements = path.elements;
+        var element;
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                this.moveToPoint(element.point, transform);
+            }else if (element.type === JSPathElement.Type.line){
+                this.addLineToPoint(element.point, transform);
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                this.addCurveToPoint(element.curve.p2, element.curve.cp1, element.curve.cp2, transform);
+            }else if (element.type === JSPathElement.Type.close){
+                this.closeSubpath();
+            }
         }
     },
 
@@ -841,6 +909,9 @@ JSClass("JSPath", JSObject, {
     intersectsPath: function(other, fillRule){
         var boundingRect = this.boundingRect;
         // no need to check if bounding rect don't intersect
+        if (boundingRect === null){
+            return false;
+        }
         if (!boundingRect.intersectsRect(other.boundingRect)){
             return false;
         }
@@ -989,8 +1060,59 @@ JSClass("JSPath", JSObject, {
         return path;
     },
 
+    pathWithFlatness: function(flatness){
+        var path = JSPath.init();
+        var i, l, j, k;
+        var element;
+        var elements = this.elements;
+        var points;
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                path.moveToPoint(element.point);
+            }else if (element.type === JSPathElement.Type.line){
+                path.addLineToPoint(element.point);
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                points = element.curve.pointsWithFlatness(flatness);
+                for (j = 1, k = points.length; j < k; ++j){
+                    path.addLineToPoint(points[j]);
+                }
+            }else if (element.type === JSPathElement.Type.close){
+                path.closeSubpath();
+            }
+        }
+        return path;
+    },
+
+    outlineContainsPoint: function(point, tolerance){
+        // Only works on an already flattened path (we don't check curves)
+        var firstPoint = JSPoint.Zero;
+        var currentPoint = JSPoint.firstPoint;
+        var elements = this.elements;
+        var element;
+        var i, l;
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                firstPoint = element.point;
+                currentPoint = firstPoint;
+            }else if (element.type === JSPathElement.Type.line){
+                if (currentPoint.lineToPointContainsPoint(element.point, point, tolerance)){
+                    return true;
+                }
+                currentPoint = element.point;
+            }else if (element.type === JSPathElement.Type.close){
+                if (currentPoint.lineToPointContainsPoint(firstPoint, point, tolerance)){
+                    return true;
+                }
+                currentPoint = firstPoint;
+            }
+        }
+        return false;
+    },
+
     initWithSVGPathData: function(svgPathData){
-        // TODO: Q, q, T, t, A, a
+        // TODO: T, t, A, a
         //
         // - All instructions are expressed as one character (e.g., a moveto
         //   is expressed as an M).
@@ -1066,6 +1188,8 @@ JSClass("JSPath", JSObject, {
                 if (
                     c === "M" || c === "m" ||
                     c === "L" || c === "l" ||
+                    c === "H" || c === "h" ||
+                    c === "V" || c === "v" ||
                     c === "C" || c === "c" ||
                     c === "S" || c === "s" ||
                     c === "Z" || c === "z" ||
@@ -1161,7 +1285,7 @@ JSClass("JSPath", JSObject, {
                     break;
                 }
                 if (point !== null){
-                    point = point.adding(JSPoint(command.values[0], command.values[1]))
+                    point = point.adding(JSPoint(command.values[0], command.values[1]));
                 }else{
                     point = JSPoint(command.values[0], command.values[1]);
                 }
@@ -1291,6 +1415,42 @@ JSClass("JSPath", JSObject, {
                     subpath.segments.push(segment);
                     point = curve.p2;
                 }
+            }else if (command.name === "Q"){
+                if (command.values.length < 4){
+                    break;
+                }
+                if (subpath === null){
+                    subpath = Subpath(point);
+                    this.subpaths.push(subpath);
+                }
+                for (v = 0; v < command.values.length - 3; v += 4){
+                    curve = JSCubicBezier.fromQuadradicBezier(
+                        point,
+                        JSPoint(command.values[v], command.values[v + 1]),
+                        JSPoint(command.values[v + 2], command.values[v + 3])
+                    );
+                    segment = {type: JSPath.SegmentType.curve, curve: curve};
+                    subpath.segments.push(segment);
+                    point = curve.p2;
+                }
+            }else if (command.name === "q"){
+                if (command.values.length < 4){
+                    break;
+                }
+                if (subpath === null){
+                    subpath = Subpath(point);
+                    this.subpaths.push(subpath);
+                }
+                for (v = 0; v < command.values.length - 3; v += 4){
+                    curve = JSCubicBezier.fromQuadradicBezier(
+                        point,
+                        point.adding(JSPoint(command.values[v], command.values[v + 1])),
+                        point.adding(JSPoint(command.values[v + 2], command.values[v + 3]))
+                    );
+                    segment = {type: JSPath.SegmentType.curve, curve: curve};
+                    subpath.segments.push(segment);
+                    point = curve.p2;
+                }
             }else if (command.name === "S"){
                 if (command.values.length < 4){
                     break;
@@ -1502,6 +1662,34 @@ JSPath.Sides = {
     }
 };
 
+JSGlobalObject.JSPathElement = function(type, point, point1, point2, point3){
+    if (this === undefined){
+        if (type === null){
+            return null;
+        }
+        return new JSPathElement(type, point, point1, point2, point3);
+    }
+    if (type instanceof JSPathElement){
+        this.type = type.type;
+        this.point = JSPoint(type.point);
+        this.curve = JSCubicBezier(type.curve);
+    }else{
+        this.type = type;
+        this.point = JSPoint(point || null);
+        if (type === JSPathElement.Type.cubicCurve){
+            this.curve = JSCubicBezier(point1, point2, point3, point);
+        }
+    }
+};
+
+JSPathElement.Type = {
+    move: 1,
+    line: 2,
+    cubicCurve: 3,
+    close: 4
+};
+
+
 JSPath.Sides.minYmaxY = JSPath.Sides.minY | JSPath.Sides.maxY;
 JSPath.Sides.minXmaxX = JSPath.Sides.minX | JSPath.Sides.maxX;
 

package/Root/Frameworks/Foundation/JSPoint.js

@@ -72,6 +72,62 @@ JSPoint.prototype = {
 
     subtracting: function(other){
         return JSPoint(this.x - other.x, this.y - other.y);
+    },
+
+    interpolation: function(p1, percentage){
+        return JSPoint(
+            this.x + (p1.x - this.x) * percentage,
+            this.y + (p1.y - this.y) * percentage
+        );
+    },
+
+    lineToPointContainsPoint: function(other, point, tolerance){
+        // first check if we're within the box defined by the segment
+        var minX, maxX;
+        if (this.x <= other.x){
+            minX = this.x - tolerance;
+            maxX = other.x + tolerance;
+        }else{
+            minX = other.x - tolerance;
+            maxX = this.x + tolerance;
+        }
+        var minY, maxY;
+        if (this.y <= other.y){
+            minY = this.y - tolerance;
+            maxY = other.y + tolerance;
+        }else{
+            minY = other.y - tolerance;
+            maxY = this.y + tolerance;
+        }
+        if (point.x < minX){
+            return false;
+        }
+        if (point.x > maxX){
+            return false;
+        }
+        if (point.y < minY){
+            return false;
+        }
+        if (point.y > maxY){
+            return false;
+        }
+
+        // next check for the special cases of a vertical and horizontal line,
+        // where we must be near the line if we're within the box
+        var dx = (other.x - this.x);
+        var dy = (other.y - this.y);
+        if (Math.abs(dx) < 0.00001 || (Math.abs(dy) < 0.00001)){
+            return true;
+        }
+
+        // Finally, find the nearest point to the line and see how far away we are
+        var m1 = dy / dx;
+        var b1 = this.y - m1 * this.x;
+        var m2 = -1/m1;
+        var b2 = point.y - m2 * point.x;
+        var x = (b2 - b1) / (m1 - m2);
+        var y = m1 * x + b1;
+        return JSPoint(x, y).distanceToPoint(point) <= tolerance;
     }
 };
 

package/Root/Frameworks/Foundation/JSTextRun.js

@@ -16,6 +16,7 @@
 // #import "JSObject.js"
 // #import "CoreTypes.js"
 // #import "JSAttributedString.js"
+// #import "JSContext.js"
 'use strict';
 
 (function(){
@@ -31,8 +32,10 @@ JSClass("JSTextRun", JSObject, {
     attributes: null,
     font: null,
     attachment: null,
+    _useDisplayMetrics: false,
 
-    initWithGlyphs: function(glyphs, glyphCharacterLengths, font, attributes, range){
+    initWithGlyphs: function(glyphs, glyphCharacterLengths, font, attributes, range, useDisplayMetrics){
+        this._useDisplayMetrics = useDisplayMetrics === true;
         this.glyphs = glyphs;
         this.glyphCharacterLengths = glyphCharacterLengths;
         this.attributes = attributes;
@@ -42,8 +45,13 @@ JSClass("JSTextRun", JSObject, {
             this._size = JSSize(this.attachment.size);
         }else{
             this.font = font;
-            this.baseline = -font.descender;
-            this._size = JSSize(0, font.lineHeight);
+            if (this._useDisplayMetrics){
+                this.baseline = -font.displayDescender;
+                this._size = JSSize(0, font.displayLineHeight);
+            }else{
+                this.baseline = -font.descender;
+                this._size = JSSize(0, font.lineHeight);
+            }
             for (var i = 0, l = glyphs.length; i < l; ++i){
                 this._size.width += font.widthOfGlyph(glyphs[i]);
             }
@@ -67,9 +75,18 @@ JSClass("JSTextRun", JSObject, {
             context.restore();
         }else{
             context.save();
-            context.translateBy(point.x, point.y + this.font.ascender);
+            if (this._useDisplayMetrics){
+                context.translateBy(point.x, point.y + this.font.displayAscender);
+            }else{
+                context.translateBy(point.x, point.y + this.font.ascender);
+            }
             context.setFont(this.font);
             context.setFillColor(this.attributes.textColor);
+            if (this.attributes.strokeWidth){
+                context.setLineWidth(this.attributes.strokeWidth);
+                context.setStrokeColor(this.attributes.strokeColor);
+                context.setTextDrawingMode(JSContext.TextDrawingMode.fillStroke);
+            }
             context.showGlyphs(this.glyphs);
             context.restore();
         }

package/Root/Frameworks/Foundation/JSTextStorage.js

@@ -30,6 +30,11 @@ JSClass("JSTextStorage", JSAttributedString, {
         this._commonTextStorageInit();
     },
 
+    initFromDictionary: function(dictionary){
+        JSTextStorage.$super.initFromDictionary.call(this, dictionary);
+        this._commonTextStorageInit();        
+    },
+
     _commonTextStorageInit: function(){
         this._layoutManagers = [];
     },