@breakside/jskit 2026.11.0 → 2026.26.0

package/Root/Frameworks/TestKit/TKAssert.js

@@ -145,28 +145,28 @@ JSGlobalObject.TKAssertExactEquals = function(a, b, message){
 JSGlobalObject.TKAssertLessThan = function(a, b, message){
     if (a >= b){
         message = message || '';
-        throw TKAssertion('TKAssertExactEquals failed, ' + (a) + ' >= ' + (b) + '. ' + (message || ''));
+        throw TKAssertion('TKAssertLessThan failed, ' + (a) + ' >= ' + (b) + '. ' + (message || ''));
     }
 };
 
 JSGlobalObject.TKAssertGreaterThan = function(a, b, message){
     if (a <= b){
         message = message || '';
-        throw TKAssertion('TKAssertExactEquals failed, ' + (a) + ' ,+ ' + (b) + '. ' + (message || ''));
+        throw TKAssertion('TKAssertGreaterThan failed, ' + (a) + ' <= ' + (b) + '. ' + (message || ''));
     }
 };
 
 JSGlobalObject.TKAssertLessThanOrEquals = function(a, b, message){
     if (a > b){
         message = message || '';
-        throw TKAssertion('TKAssertExactEquals failed, ' + (a) + ' > ' + (b) + '. ' + (message || ''));
+        throw TKAssertion('TKAssertLessThanOrEquals failed, ' + (a) + ' > ' + (b) + '. ' + (message || ''));
     }
 };
 
 JSGlobalObject.TKAssertGreaterThanOrEquals = function(a, b, message){
     if (a < b){
         message = message || '';
-        throw TKAssertion('TKAssertExactEquals failed, ' + (a) + ' < ' + (b) + '. ' + (message || ''));
+        throw TKAssertion('TKAssertGreaterThanOrEquals failed, ' + (a) + ' < ' + (b) + '. ' + (message || ''));
     }
 };
 

package/Root/Frameworks/UIKit/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.UIKit
-JSBundleVersion: 2026.11.0
+JSBundleVersion: 2026.26.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSBundleEnvironments:

package/Root/Frameworks/UIKit/UIApplication.js

@@ -372,7 +372,7 @@ JSClass('UIApplication', UIResponder, {
     // MARK: - Sending Events & Actions
 
     sendEvent: function(event){
-        if (event.category === UIEvent.Category.key && event.type === UIEvent.Type.keyDown && UIPlatform.shared && event.hasModifier(UIPlatform.shared.commandModifier)){
+        if (event.category === UIEvent.Category.key && event.type === UIEvent.Type.keyDown && UIPlatform.shared && event.hasModifier(UIPlatform.shared.commandModifier) && event.key !== UIPlatform.shared.commandKey){
             var mainMenu = this.mainMenu;
             if (mainMenu){
                 if (mainMenu.performKeyEquivalent(event)){
@@ -384,6 +384,14 @@ JSClass('UIApplication', UIResponder, {
                     return;
                 }
             }
+            if (this.keyWindow !== null && this.keyWindow.firstResponder !== null){
+                var shortcutMenu = this.keyWindow.firstResponder.getShortcutMenu();
+                if (shortcutMenu !== null){
+                    if (shortcutMenu.performKeyEquivalent(event)){
+                        return;
+                    }
+                }
+            }
         }
         if (event.category === UIEvent.Category.touches){
             var sentWindowIds = new Set();

package/Root/Frameworks/UIKit/UICollectionView.js

@@ -1454,6 +1454,10 @@ JSClass("UICollectionView", UIScrollView, {
                 if (this.delegate && this.delegate.collectionViewWillBeginDraggingSession){
                     this.delegate.collectionViewWillBeginDraggingSession(this, session, indexPaths, location);
                 }
+                if (cell.over){
+                    cell.over = false;
+                }
+                cell.active = false;
             }
         }else{
             // TODO: scrolling (see UITextEditor for similar use case)

package/Root/Frameworks/UIKit/UIColorPanel.js

@@ -21,6 +21,8 @@
 
 JSProtocol("UIColorPanelDelegate", JSProtocol, {
 
+    colorPanelDidBeginEditing: function(panel, event){},
+    colorPanelDidEndEditing: function(panel, event){},
     colorPanelDidChangeColor: function(panel, color){},
     colorPanelDidClose: function(panel){}
 
@@ -239,8 +241,14 @@ JSClass("UIColorPanelViewController", UIViewController, {
         this.hexField.leftAccessoryVisibility = UITextField.AccessoryVisibility.always;
 
         this.saturationBrightnessControl.addAction(this.saturationBrightnessChanged, this);
+        this.saturationBrightnessControl.addAction(this.saturationBrightnessEditingBegan, this, UIControl.Event.editingDidBegin);
+        this.saturationBrightnessControl.addAction(this.saturationBrightnessEditingEnded, this, UIControl.Event.editingDidEnd);
         this.hueSlider.addAction(this.hueSliderChanged, this);
+        this.hueSlider.addAction(this.hueSliderEditingBegan, this, UIControl.Event.editingDidBegin);
+        this.hueSlider.addAction(this.hueSliderEditingEnded, this, UIControl.Event.editingDidEnd);
         this.alphaSlider.addAction(this.alphaSliderChanged, this);
+        this.alphaSlider.addAction(this.alphaSliderEditingBegan, this, UIControl.Event.editingDidBegin);
+        this.alphaSlider.addAction(this.alphaSliderEditingEnded, this, UIControl.Event.editingDidEnd);
         this.hexField.addAction(this.hexFieldChanged, this);
         this.component1Field.addAction(this.component1FieldChanged, this);
         this.component2Field.addAction(this.component2FieldChanged, this);
@@ -308,6 +316,18 @@ JSClass("UIColorPanelViewController", UIViewController, {
         this.notifyDelegateOfColor();
     },
 
+    saturationBrightnessEditingBegan: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidBeginEditing){
+            this.delegate.colorPanelDidBeginEditing(this, event);
+        }
+    },
+
+    saturationBrightnessEditingEnded: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidEndEditing){
+            this.delegate.colorPanelDidEndEditing(this, event);
+        }
+    },
+
     hueSliderChanged: function(slider){
         this._hsvComponents[0] = slider.value;
         this._recalculateColorFromHSV();
@@ -315,12 +335,36 @@ JSClass("UIColorPanelViewController", UIViewController, {
         this.notifyDelegateOfColor();
     },
 
+    hueSliderEditingBegan: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidBeginEditing){
+            this.delegate.colorPanelDidBeginEditing(this, event);
+        }
+    },
+
+    hueSliderEditingEnded: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidEndEditing){
+            this.delegate.colorPanelDidEndEditing(this, event);
+        }
+    },
+
     alphaSliderChanged: function(slider){
         this._color = this._color.colorWithAlpha(slider.value);
         this._alphaChanged(slider);
         this.notifyDelegateOfColor();
     },
 
+    alphaSliderEditingBegan: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidBeginEditing){
+            this.delegate.colorPanelDidBeginEditing(this, event);
+        }
+    },
+
+    alphaSliderEditingEnded: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidEndEditing){
+            this.delegate.colorPanelDidEndEditing(this, event);
+        }
+    },
+
     component1FieldChanged: function(textField){
         var value = textField.integerValue;
         if (isNaN(value)){
@@ -829,6 +873,7 @@ JSClass("UIColorPanelTwoAxisSlider", UIControl, {
             initialOffset: JSPoint.Zero,
         };
         this.active = true;
+        this.sendActionsForEvents(UIControl.Event.editingDidBegin, event);
         if (!isOnKnob){
             this.value = this.valueForPoint(location);
             this.didChangeValueForBinding('value');
@@ -852,6 +897,7 @@ JSClass("UIColorPanelTwoAxisSlider", UIControl, {
     _endSlide: function(event){
         if (this.active){
             this.active = false;
+            this.sendActionsForEvents(UIControl.Event.editingDidEnd, event);
         }
         this._drag = null;
     },

package/Root/Frameworks/UIKit/UIColorWell.js

@@ -211,6 +211,14 @@ JSClass("UIColorWell", UIControl, {
     // ----------------------------------------------------------------------
     // MARK: - Color Panel
 
+    colorPanelDidBeginEditing: function(panel, event){
+        this.sendActionsForEvents(UIControl.Event.editingDidBegin, event);
+    },
+
+    colorPanelDidEndEditing: function(panel, event){
+        this.sendActionsForEvents(UIControl.Event.editingDidEnd, event);
+    },
+
     colorPanelDidChangeColor: function(panel, color){
         this._changeColor(color);
     },

package/Root/Frameworks/UIKit/UIHTMLDisplayServer.js

@@ -419,12 +419,31 @@ JSClass("UIHTMLDisplayServer", UIDisplayServer, {
             }
             insertedLayersByParentContext[info.parentContext.objectID].push(info.layer);
         }
+        var parentContext;
+        var context;
+        var i, l;
         for (var contextId in insertedLayersByParentContext){
             insertedLayersByParentContext[contextId].sort(function(a, b){
                 return a.sublayerIndex - b.sublayerIndex;
             });
-            for (var i = 0, l = insertedLayersByParentContext[contextId].length; i < l; ++i){
-                this._insertLayerIntoDOM(insertedLayersByParentContext[contextId][i], parentContextsById[contextId]);
+            parentContext = parentContextsById[contextId];
+            // If a layer's element is already in the parent element (meaning it
+            // is just changing order), first remove it from the parent element
+            // so sublayer index calculations will work correctly. 
+            // NOTE: UIHTMLDisplayServerCanvasContext.insertSublayerContext()
+            // already checked for this, but its check only worked when moving a
+            // single layer.  When adding moving and adding multiple layers at
+            // a time, we need first to remove all elements that moving before
+            // trying to insert or re-insert any of moved/added elements.
+            for (i = 0, l = insertedLayersByParentContext[contextId].length; i < l; ++i){
+                layer = insertedLayersByParentContext[contextId][i];
+                context = this.contextsByObjectID[layer.objectID];
+                if (context && context.element.parentNode === parentContext.element){
+                    parentContext.element.removeChild(context.element);
+                }
+            }
+            for (i = 0, l = insertedLayersByParentContext[contextId].length; i < l; ++i){
+                this._insertLayerIntoDOM(insertedLayersByParentContext[contextId][i], parentContext);
             }
         }
         this._insertedLayers = {};

package/Root/Frameworks/UIKit/UIHTMLDisplayServerCanvasContext.js

@@ -578,6 +578,18 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
     },
 
     fillMaskedRect: function(rect, maskImage){
+        if (maskImage._htmlImage !== undefined && maskImage._htmlImage !== null){
+            var maskCanvas = this.canvasContext.canvas.ownerDocument.createElement("canvas");
+            maskCanvas.width = rect.size.width;
+            maskCanvas.height = rect.size.height;
+            var maskContext = maskCanvas.getContext('2d');
+            maskContext.fillStyle = this.state.fillColor.cssString();
+            maskContext.fillRect(0, 0, rect.size.width, rect.size.height);
+            maskContext.globalCompositeOperation = 'destination-in';
+            maskContext.drawImage(maskImage._htmlImage, 0, 0, rect.size.width, rect.size.height);
+            this.canvasContext.drawImage(maskCanvas, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
+            return;
+        }
         var imageElement = this._dequeueReusableImageElement();
         this._positionImageElement(imageElement, maskImage, rect);
         var url = maskImage.htmlURLString();
@@ -602,6 +614,10 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
     _imageElementIndex: 0,
 
     drawImage: function(image, rect){
+        if (image._htmlImage !== null && image._htmlImage !== undefined){
+            this.canvasContext.drawImage(image._htmlImage, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
+            return;
+        }
         if (image !== null){
             var url = image.htmlURLString();
             // FIXME: proof of concept, but really shouldn't do async
@@ -687,57 +703,96 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
 
     drawLinearGradient: function(gradient, rect){
         this.canvasContext.save();
-        var canvasGradient = this.canvasContext.createLinearGradient(
-            rect.origin.x + gradient.start.x * rect.size.width,
-            rect.origin.y + gradient.start.y * rect.size.height,
-            rect.origin.x + gradient.end.x * rect.size.width,
-            rect.origin.y + gradient.end.y * rect.size.height
-        );
-        var stop;
-        for (var i = 0, l = gradient.stops.length; i < l; ++i){
-            stop = gradient.stops[i];
-            canvasGradient.addColorStop(stop.position, stop.color.cssString());
-        }
+        var canvasGradient = this._linearGradientForCanvasContext(this.canvasContext, gradient, rect);
         this.canvasContext.fillStyle = canvasGradient;
         this.canvasContext.fillRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
         this.canvasContext.restore();
     },
 
     drawRadialGradient: function(gradient, rect){
-        var r0 = 0;
-        var start = JSPoint(
-            rect.origin.x + gradient.start.x * rect.size.width,
-            rect.origin.y + gradient.start.y * rect.size.height
-        );
-        var end = JSPoint(
-            rect.origin.x + gradient.end.x * rect.size.width,
-            rect.origin.y + gradient.end.y * rect.size.height
-        );
-        var r1 = start.distanceToPoint(end);
         this.canvasContext.save();
-        var canvasGradient = this.canvasContext.createRadialGradient(
-            start.x,
-            start.y,
-            r0,
-            start.x,
-            start.y,
-            r1
-        );
-        var stop;
-        for (var i = 0, l = gradient.stops.length; i < l; ++i){
-            stop = gradient.stops[i];
-            canvasGradient.addColorStop(stop.position, stop.color.cssString());
-        }
+        var canvasGradient = this._radialGradientForCanvasContext(this.canvasContext, gradient, rect);
         this.canvasContext.fillStyle = canvasGradient;
         this.canvasContext.fillRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
         this.canvasContext.restore();
     },
 
-    drawLinearGradientStroke: function(gradient, path){
+    drawMaskedLinearGradient: function(gradient, rect, maskImage){
+        if (maskImage._htmlImage !== undefined && maskImage._htmlImage !== null){
+            var maskCanvas = this.canvasContext.canvas.ownerDocument.createElement("canvas");
+            maskCanvas.width = rect.size.width;
+            maskCanvas.height = rect.size.height;
+            var maskContext = maskCanvas.getContext('2d');
+            var canvasGradient = this._linearGradientForCanvasContext(maskContext, gradient, JSRect(JSPoint.Zero, rect.size));
+            maskContext.fillStyle = canvasGradient;
+            maskContext.fillRect(0, 0, rect.size.width, rect.size.height);
+            maskContext.globalCompositeOperation = 'destination-in';
+            maskContext.drawImage(maskImage._htmlImage, 0, 0, rect.size.width, rect.size.height);
+            this.canvasContext.drawImage(maskCanvas, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
+            return;
+        }
+        var imageElement = this._dequeueReusableImageElement();
+        this._positionImageElement(imageElement, maskImage, rect);
+        var url = maskImage.htmlURLString();
+        var cssURL = "url('" + url + "')";
+        imageElement.style.maskImage = cssURL;
+        imageElement.style.maskSize = '100% 100%';
+        imageElement.style.webkitMaskImage = cssURL;
+        imageElement.style.webkitMaskSize = '100% 100%';
+        imageElement.style.backgroundImage = gradient.cssString(rect.size);
+        this._insertChildElement(imageElement);
+    },
+
+    drawMaskedRadialGradient: function(gradient, rect, maskImage){
+        if (maskImage._htmlImage !== undefined && maskImage._htmlImage !== null){
+            var maskCanvas = this.canvasContext.canvas.ownerDocument.createElement("canvas");
+            maskCanvas.width = rect.size.width;
+            maskCanvas.height = rect.size.height;
+            var maskContext = maskCanvas.getContext('2d');
+            var canvasGradient = this._radialGradientForCanvasContext(maskContext, gradient, JSRect(JSPoint.Zero, rect.size));
+            maskContext.fillStyle = canvasGradient;
+            maskContext.fillRect(0, 0, rect.size.width, rect.size.height);
+            maskContext.globalCompositeOperation = 'destination-in';
+            maskContext.drawImage(maskImage._htmlImage, 0, 0, rect.size.width, rect.size.height);
+            this.canvasContext.drawImage(maskCanvas, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
+            return;
+        }
+        var imageElement = this._dequeueReusableImageElement();
+        this._positionImageElement(imageElement, maskImage, rect);
+        var url = maskImage.htmlURLString();
+        var cssURL = "url('" + url + "')";
+        imageElement.style.maskImage = cssURL;
+        imageElement.style.maskSize = '100% 100%';
+        imageElement.style.webkitMaskImage = cssURL;
+        imageElement.style.webkitMaskSize = '100% 100%';
+        imageElement.style.backgroundImage = gradient.radialCSSString(rect.size);
+        this._insertChildElement(imageElement);
+    },
+
+    drawLinearGradientStroke: function(gradient, path, alternateRect){
+        var rect = path.boundingRect;
+        this.canvasContext.save();
+        this.addPath(path);
+        var canvasGradient = this._linearGradientForCanvasContext(this.canvasContext, gradient, alternateRect || rect);
+        this.canvasContext.strokeStyle = canvasGradient;
+        this.canvasContext.stroke();
+        this.canvasContext.restore();
+        this.beginPath();
+    },
+
+    drawRadialGradientStroke: function(gradient, path, alternateRect){
         var rect = path.boundingRect;
         this.canvasContext.save();
         this.addPath(path);
-        var canvasGradient = this.canvasContext.createLinearGradient(
+        var canvasGradient = this._radialGradientForCanvasContext(this.canvasContext, gradient, alternateRect || rect);
+        this.canvasContext.strokeStyle = canvasGradient;
+        this.canvasContext.stroke();
+        this.canvasContext.restore();
+        this.beginPath();
+    },
+
+    _linearGradientForCanvasContext: function(canvasContext, gradient, rect){
+        var canvasGradient = canvasContext.createLinearGradient(
             rect.origin.x + gradient.start.x * rect.size.width,
             rect.origin.y + gradient.start.y * rect.size.height,
             rect.origin.x + gradient.end.x * rect.size.width,
@@ -748,14 +803,10 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
             stop = gradient.stops[i];
             canvasGradient.addColorStop(stop.position, stop.color.cssString());
         }
-        this.canvasContext.strokeStyle = canvasGradient;
-        this.canvasContext.stroke();
-        this.canvasContext.restore();
-        this.beginPath();
+        return canvasGradient;
     },
 
-    drawRadialGradientStroke: function(gradient, path){
-        var rect = path.boundingRect;
+    _radialGradientForCanvasContext: function(canvasContext, gradient, rect){
         var r0 = 0;
         var start = JSPoint(
             rect.origin.x + gradient.start.x * rect.size.width,
@@ -766,9 +817,7 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
             rect.origin.y + gradient.end.y * rect.size.height
         );
         var r1 = start.distanceToPoint(end);
-        this.canvasContext.save();
-        this.addPath(path);
-        var canvasGradient = this.canvasContext.createRadialGradient(
+        var canvasGradient = canvasContext.createRadialGradient(
             start.x,
             start.y,
             r0,
@@ -781,10 +830,7 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
             stop = gradient.stops[i];
             canvasGradient.addColorStop(stop.position, stop.color.cssString());
         }
-        this.canvasContext.strokeStyle = canvasGradient;
-        this.canvasContext.stroke();
-        this.canvasContext.restore();
-        this.beginPath();
+        return canvasGradient;
     },
 
     // ----------------------------------------------------------------------
@@ -917,6 +963,45 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
         }
     },
 
+    // ----------------------------------------------------------------------
+    // MARK: - Transparency Layers
+
+    _reusableTransparencyLayer: null,
+
+    createTransparencyLayer: function(){
+        var scale = this.deviceScale * this.renderScale;
+        if (this._reusableTransparencyLayer !== null){
+            layer = this._reusableTransparencyLayer;
+            this._reusableTransparencyLayer = null;
+            layer.context.resetTransform();
+            layer.context.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
+            this._canvasContextAdoptState(layer.context, this.state, scale);
+            layer.parentContext = this.canvasContext;
+            this._canvasContext = layer.context;
+            return layer;
+        }
+        var parentContext = this.canvasContext;
+        var canvas = this._canvasElements[0].ownerDocument.createElement("canvas");
+        canvas.width = this._canvasElements[0].width;
+        canvas.height = this._canvasElements[0].height;
+        var context = canvas.getContext("2d");
+        this._canvasContextAdoptState(context, this.state, scale);
+        var layer = {
+            canvas: canvas,
+            context: context,
+            parentContext: parentContext
+        };
+        this._canvasContext = context;
+        return layer;
+    },
+
+    drawTransparencyLayer: function(transparencyLayer){
+        this._canvasContext = transparencyLayer.parentContext;
+        this._canvasContext.resetTransform();
+        this._canvasContext.drawImage(transparencyLayer.canvas, 0, 0);
+        this._reusableTransparencyLayer = transparencyLayer;
+    },
+
     // ----------------------------------------------------------------------
     // MARK: - Clipping
 
@@ -1296,29 +1381,25 @@ JSClass("UIHTMLDisplayServerCanvasContextPath", JSPath, {
     canvasOperations: function(prototype, transform){
         var operations = [];
         var i, l;
-        var j, k;
-        var subpath;
-        var segment;
+        var elements = this.elements;
+        var element;
         var point;
         var cp1;
         var cp2;
-        for (i = 0, l = this.subpaths.length; i < l; ++i){
-            subpath = this.subpaths[i];
-            point = transform.convertPointToTransform(subpath.firstPoint);
-            operations.push({method: prototype.moveTo, arguments: [point.x, point.y]});
-            for (j = 0, k = subpath.segments.length; j < k; ++j){
-                segment = subpath.segments[j];
-                if (segment.type === JSPath.SegmentType.line){
-                    point = transform.convertPointToTransform(segment.end);
-                    operations.push({method: prototype.lineTo, arguments: [point.x, point.y]});
-                }else if (segment.type === JSPath.SegmentType.curve){
-                    point = transform.convertPointToTransform(segment.curve.p2);
-                    cp1 = transform.convertPointToTransform(segment.curve.cp1);
-                    cp2 = transform.convertPointToTransform(segment.curve.cp2);
-                    operations.push({method: prototype.bezierCurveTo, arguments: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]});
-                }
-            }
-            if (subpath.closed){
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                point = transform.convertPointToTransform(element.point);
+                operations.push({method: prototype.moveTo, arguments: [point.x, point.y]});
+            }else if (element.type === JSPathElement.Type.line){
+                point = transform.convertPointToTransform(element.point);
+                operations.push({method: prototype.lineTo, arguments: [point.x, point.y]});
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                point = transform.convertPointToTransform(element.curve.p2);
+                cp1 = transform.convertPointToTransform(element.curve.cp1);
+                cp2 = transform.convertPointToTransform(element.curve.cp2);
+                operations.push({method: prototype.bezierCurveTo, arguments: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]});
+            }else if (element.type === JSPathElement.Type.close){
                 operations.push({method: prototype.closePath, arguments: []});
             }
         }

package/Root/Frameworks/UIKit/UIHTMLTextRun.js

@@ -99,6 +99,11 @@ JSClass("UIHTMLTextRun", JSTextRun, {
                 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.showText(this.textNode.nodeValue);
                 context.restore();
             }

package/Root/Frameworks/UIKit/UIHTMLTextTypesetter.js

@@ -37,6 +37,7 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         this._lineElementQueue = [];
     },
 
+    _useCanvasMetricsForMeasure: true,
     _suggestedHTMLLineLayout: null,
 
     canvasContext: null,
@@ -204,6 +205,14 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         span.style.color = textColor ? textColor.cssString() : 'black';
         span.style.backgroundColor = backgroundColor ? backgroundColor.cssString() : '';
         span.style.pointerEvents = 'none';
+
+        // Stroke
+        var strokeColor = attributes[JSAttributedString.Attribute.strokeColor] || null;
+        var strokeWidth = attributes[JSAttributedString.Attribute.strokeWidth] || 0;
+        if (strokeWidth > 0){
+            span.style.webkitTextStrokeWidth = '%fpx'.sprintf(strokeWidth);
+            span.style.webkitTextStrokeColor = strokeColor ? strokeColor.cssString() : 'black';
+        }
     },
 
     _styleAttachmentElementWithAttributes: function(span, attributes, attachment){
@@ -260,10 +269,16 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
                 runDescriptor.attachment = attachment;
             }else{
                 if (!newline){
-                    if (attributes[JSAttributedString.Attribute.maskCharacter] !== undefined){
-                        metrics = this.canvasContext.measureText(attributes[JSAttributedString.Attribute.maskCharacter]);
+                    if (this._useCanvasMetricsForMeasure){
+                        if (attributes[JSAttributedString.Attribute.maskCharacter] !== undefined){
+                            metrics = this.canvasContext.measureText(attributes[JSAttributedString.Attribute.maskCharacter]);
+                        }else{
+                            metrics = this.canvasContext.measureText(iterator.utf16);
+                        }
                     }else{
-                        metrics = this.canvasContext.measureText(iterator.utf16);
+                        metrics = {
+                            width: runDescriptor.font.widthOfString(iterator.utf16)
+                        };
                     }
                     usedWidth += metrics.width;
                     runDescriptor.userPerceivedCharacterWidths.push(metrics.width);

package/Root/Frameworks/UIKit/UIListView.js

@@ -2229,17 +2229,19 @@ JSClass("UIListView", UIScrollView, {
 
     _contextSelectCell: function(cell, location){
         if (this.delegate && this.delegate.menuForListViewCellAtIndexPath){
+            if (this._selectionContainsIndexPath(cell.indexPath)){
+                this._contextSelectedIndexPaths = JSCopy(this._selectedIndexPaths);
+            }else{
+                this._contextSelectedIndexPaths = [cell.indexPath];
+            }
             var menu = this.delegate.menuForListViewCellAtIndexPath(this, cell.indexPath);
             if (menu !== null){
-                if (this._selectionContainsIndexPath(cell.indexPath)){
-                    this._contextSelectedIndexPaths = JSCopy(this._selectedIndexPaths);
-                }else{
-                    this._contextSelectedIndexPaths = [cell.indexPath];
-                }
                 this._updateVisibleCellStates();
                 var locationInCell = this.convertPointToView(location, cell);
                 menu.delegate = this;
                 menu.openAtLocationInContextView(locationInCell, cell);
+            }else{
+                this._contextSelectedIndexPaths = [];
             }
         }
     },