@breakside/jskit 2026.11.0 → 2026.26.0

package/Frameworks/DOM.jsframework/Info.json

@@ -1,7 +1,7 @@
 {
   "JSBundleType": "framework",
   "JSBundleIdentifier": "io.breakside.JSKit.DOM",
-  "JSBundleVersion": "2026.11.0",
+  "JSBundleVersion": "2026.26.0",
   "JSDevelopmentLanguage": "en",
   "JSCopyright": "Copyright © 2020 Breakside Inc.",
   "JSBundleEnvironments": {
@@ -9,5 +9,5 @@
     "node": "DOM+Node.js"
   },
   "JSLicenseNotice": "Licensed under the Breakside Public License, Version 1.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nIf a copy of the License was not distributed with this file, you may\nobtain a copy at\n\n    http://breakside.io/licenses/LICENSE-1.0.txt\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n",
-  "GitRevision": "812100aa4c3e5b1ec1d0d432be903bba4db01b0e"
+  "GitRevision": "b8843098f47d4217cca519ae844e7f57f33ceae1"
 }

package/Frameworks/DOM.jsframework/io.breakside.JSKit.DOM-bundle.js

@@ -3,7 +3,7 @@ JSBundle.bundles['io.breakside.JSKit.DOM'] = {
   "Info": {
     "JSBundleType": "framework",
     "JSBundleIdentifier": "io.breakside.JSKit.DOM",
-    "JSBundleVersion": "2026.11.0",
+    "JSBundleVersion": "2026.26.0",
     "JSDevelopmentLanguage": "en",
     "JSCopyright": "Copyright © 2020 Breakside Inc.",
     "JSBundleEnvironments": {
@@ -11,7 +11,7 @@ JSBundle.bundles['io.breakside.JSKit.DOM'] = {
       "node": "DOM+Node.js"
     },
     "JSLicenseNotice": "Licensed under the Breakside Public License, Version 1.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nIf a copy of the License was not distributed with this file, you may\nobtain a copy at\n\n    http://breakside.io/licenses/LICENSE-1.0.txt\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n",
-    "GitRevision": "812100aa4c3e5b1ec1d0d432be903bba4db01b0e"
+    "GitRevision": "b8843098f47d4217cca519ae844e7f57f33ceae1"
   },
   "Resources": [],
   "ResourceLookup": {

package/Frameworks/FontKit.jsframework/Info.json

@@ -1,12 +1,12 @@
 {
   "JSBundleType": "framework",
   "JSBundleIdentifier": "io.breakside.JSKit.FontKit",
-  "JSBundleVersion": "2026.11.0",
+  "JSBundleVersion": "2026.26.0",
   "JSDevelopmentLanguage": "en",
   "JSCopyright": "Copyright © 2020 Breakside Inc.",
   "JSBundleEnvironments": {
     "html": "FontKit+HTML.js"
   },
   "JSLicenseNotice": "Licensed under the Breakside Public License, Version 1.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nIf a copy of the License was not distributed with this file, you may\nobtain a copy at\n\n    http://breakside.io/licenses/LICENSE-1.0.txt\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n",
-  "GitRevision": "812100aa4c3e5b1ec1d0d432be903bba4db01b0e"
+  "GitRevision": "b8843098f47d4217cca519ae844e7f57f33ceae1"
 }

package/Frameworks/FontKit.jsframework/JS/FNTOpenTypeFont.js

@@ -14,7 +14,7 @@
 // limitations under the License.
 
 // #import Foundation
-/* global FNTOpenTypeConstructor */
+/* global FNTOpenTypeConstructor, DataView */
 'use strict';
 
 (function(){
@@ -496,6 +496,10 @@ JSClass("FNTOpenTypeFont", JSObject, {
         return completion.promise;
     },
 
+    pathForGlyph: function(glyphIndex, transform){
+        return this.tables.glyf.pathForGlyph(glyphIndex, this.tables.loca, this.tables.head.indexToLocFormat, transform);
+    },
+
 });
 
 var tableChecksum = function(data){
@@ -1183,7 +1187,25 @@ JSClass("FNTOpenTypeFontTableCFF", FNTOpenTypeFontTable, {
 });
 
 JSClass("FNTOpenTypeFontTableGlyf", FNTOpenTypeFontTable, {
-    tag: 'glyf'
+    tag: 'glyf',
+
+    glyph: function(glyphIndex, loca, format){
+        var range = loca.rangeForGlyph(glyphIndex, format);
+        var data = this.data.subdataInRange(range);
+        var glyph = FNTOpenTypeGlyph.initWithData(data);
+        if (glyph.isKindOfClass(FNTOpenTypeCompoundGlyph)){
+            glyph.glyf = this;
+            glyph.loca = loca;
+            glyph.locaFormat = format;
+        }
+        return glyph;
+    },
+
+    pathForGlyph: function(glyphIndex, loca, format, transform){
+        var glyph = this.glyph(glyphIndex, loca, format);
+        return glyph.getPath(transform);
+    },
+
 });
 
 JSClass("FNTOpenTypeFontTableLoca", FNTOpenTypeFontTable, {
@@ -1790,10 +1812,14 @@ JSClass("FNTOpenTypeFontCmap13", FNTOpenTypeFontCmap, {
 JSClass("FNTOpenTypeGlyph", JSObject, {
 
     initWithData: function(data){
-        if (data.length >= 2 && data.dataView().getInt16(0) < 0){
-            return FNTOpenTypeCompoundGlyph.initWithData(data);
+        if (this.$class === FNTOpenTypeGlyph){
+            if (data.length >= 2 && data.dataView().getInt16(0) < 0){
+                return FNTOpenTypeCompoundGlyph.initWithData(data);
+            }
+            return FNTOpenTypeSimpleGlyph.initWithData(data);
         }
-        return FNTOpenTypeSimpleGlyph.initWithData(data);
+        this.data = data;
+        this.dataView = data.dataView();
     },
 
     data: null,
@@ -1802,27 +1828,184 @@ JSClass("FNTOpenTypeGlyph", JSObject, {
     xMin: DataBackedProperty(2, "int16"),
     yMin: DataBackedProperty(4, "int16"),
     xMax: DataBackedProperty(6, "int16"),
-    yMax: DataBackedProperty(8, "int16")
+    yMax: DataBackedProperty(8, "int16"),
+
+    getPath: function(){
+        return null;
+    },
 
 });
 
-JSClass("FNTOpenTypeSimpleGlyph", JSObject, {
+JSClass("FNTOpenTypeSimpleGlyph", FNTOpenTypeGlyph, {
 
-    initWithData: function(data){
-        this.data = data;
-        this.dataView = data.dataView();
-    },
+    numberOfCountours: DataBackedProperty(0, "int16"),
 
-    numberOfCountours: DataBackedProperty(0, "int16")
+    endPointIndexes: null,
+    flags: null,
+
+    points: JSLazyInitProperty(function(){
+        var points = [];
+        var offset = 10;
+        var end = this.data.length;
+        var i, l;
+        if (offset + this.numberOfCountours * 2 > end){
+            throw new Error("not enough data for glyph end point indexes");
+        }
+        this.endPointIndexes = [];
+        for (i = 0; i < this.numberOfCountours; ++i){
+            this.endPointIndexes.push(this.dataView.getUint16(offset));
+            offset += 2;
+        }
+        if (offset + 2 > end){
+            throw new Error("not enough data for glyph instructions");
+        }
+        var instructionLength = this.dataView.getUint16(offset);
+        offset += 2;
+        if (offset + instructionLength > end){
+            throw new Error("not enough data for glyph instructions");
+        }
+        offset += instructionLength;
+        var numberOfPoints = this.endPointIndexes[this.endPointIndexes.length - 1] + 1;
+        var repeatCount;
+        var j, k;
+        var flags;
+        i = 0;
+        this.flags = [];
+        while (i < numberOfPoints){
+            if (offset >= end){
+                return null;
+            }
+            flags = this.data[offset];
+            ++offset;
+            this.flags.push(flags);
+            ++i;
+            if ((flags & 0x08) !== 0){
+                if (offset >= end){
+                    return null;
+                }
+                repeatCount = this.data[offset];
+                ++offset;
+                for (j = 0; j < repeatCount; ++j){
+                    this.flags.push(flags);
+                    ++i;
+                }
+            }
+        }
+        i = 0;
+        var point = JSPoint.Zero;
+        var dx, dy;
+        while (i < numberOfPoints){
+            point = JSPoint(point);
+            flags = this.flags[i];
+            if ((flags & 0x02) === 0){
+                if ((flags & 0x10) === 0){
+                    if (offset + 2 > end){
+                        throw new Error("not enough data for x delta");
+                    }
+                    dx = this.dataView.getInt16(offset);
+                    offset += 2;
+                }else{
+                    dx = 0;
+                }
+            }else{
+                if (offset >= end){
+                    throw new Error("not enough data for x delta");
+                }
+                dx = this.data[offset];
+                ++offset;
+                if ((flags & 0x10) === 0){
+                    dx = -dx;
+                }
+            }
+            point.x += dx;
+            points.push(point);
+            ++i;
+        }
+        i = 0;
+        while (i < numberOfPoints){
+            points[i].y = point.y;
+            point = points[i];
+            flags = this.flags[i];
+            if ((flags & 0x04) === 0){
+                if ((flags & 0x20) === 0){
+                    if (offset + 2 > end){
+                        throw new Error("not enough data for y delta");
+                    }
+                    dy = this.dataView.getInt16(offset);
+                    offset += 2;
+                }else{
+                    dy = 0;
+                }
+            }else{
+                if (offset >= end){
+                    throw new Error("not enough data for y delta");
+                }
+                dy = this.data[offset];
+                ++offset;
+                if ((flags & 0x20) === 0){
+                    dy = -dy;
+                }
+            }
+            point.y += dy;
+            ++i;
+        }
+        return points;
+    }),
+
+    getPath: function(transform){
+        if (this.data.length < 2 || this.numberOfCountours === 0){
+            return JSPath.init();
+        }
+        var flags;
+        var point;
+        var i, j, k;
+        var p0;
+        var path = JSPath.init();
+        var cp = null;
+        j = 0;
+        var points = this.points;
+        for (i = 0; i < this.numberOfCountours; ++i){
+            flags = this.flags[j];
+            point = points[j];
+            p0 = point;
+            if ((flags & 0x01) === 0){
+                throw new Error("first point is off-curve");
+            }
+            path.moveToPoint(point, transform);
+            ++j;
+            for (k = this.endPointIndexes[i]; j <= k; ++j){
+                flags = this.flags[j];
+                point = points[j];
+                if ((flags & 0x01) === 0){
+                    if (cp !== null){
+                        path.addQuadraticCurveToPoint(cp.interpolation(point, 0.5), cp, transform);
+                    }
+                    cp = point;
+                }else{
+                    if (cp !== null){
+                        path.addQuadraticCurveToPoint(point, cp, transform);
+                    }else{
+                        path.addLineToPoint(point, transform);
+                    }
+                    cp = null;
+                }
+            }
+            if (cp !== null){
+                path.addQuadraticCurveToPoint(p0, cp, transform);
+                cp = null;
+            }
+            path.closeSubpath();
+        }
+        return path;
+    },
 
 });
 
-JSClass("FNTOpenTypeCompoundGlyph", JSObject, {
+JSClass("FNTOpenTypeCompoundGlyph", FNTOpenTypeGlyph, {
 
-    initWithData: function(data){
-        this.data = data;
-        this.dataView = data.dataView();
-    },
+    glyf: null,
+    loca: null,
+    locaFormat: null,
 
     updateReferencedGlyphs: function(glyphIndexByOriginalIndex, nextGlyphIndex){
         this.data = JSData.initWithCopyOfData(this.data);
@@ -1859,16 +2042,142 @@ JSClass("FNTOpenTypeCompoundGlyph", JSObject, {
             }
         }while ((flags & 0x20) == 0x20);
         return newGlyphs;
-    }
+    },
+
+    getPath: function(transform){
+        if (!transform){
+            transform = JSAffineTransform.Identity;
+        }
+        var points = [];
+        var path = JSPath.init();
+        var offset = 10;
+        var end = this.data.length;
+        var flags;
+        var glyphIndex;
+        var arg1;
+        var arg2;
+        var glyph;
+        var glyphTransform;
+        var glyphPath;
+        var hasMore = true;
+        var p1;
+        var p2;
+        while (hasMore && offset < end){
+            if (offset + 4 > end){
+                throw new Error("not enough data for compound glyph");
+            }
+            flags = this.dataView.getUint16(offset);
+            hasMore = (flags & 0x20) !== 0;
+            offset += 2;
+            glyphIndex = this.dataView.getUint16(offset);
+            offset += 2;
+            glyph = this.glyf.glyph(glyphIndex, this.loca, this.locaFormat);
+            glyphPath = glyph.getPath();
+            glyphTransform = JSAffineTransform.Identity;
+            points = points.concat(glyph.points);
+            if ((flags & 0x01) !== 0){
+                if (offset + 4 > end){
+                    throw new Error("not enough data for compound glyph args");
+                }
+                if ((flags & 0x02) !== 0){
+                    // x-y values
+                    arg1 = this.dataView.getInt16(offset);
+                    offset += 2;
+                    arg2 = this.dataView.getInt16(offset);
+                    offset += 2;
+                }else{
+                    // point indexes
+                    arg1 = this.dataView.getUint16(offset);
+                    offset += 2;
+                    arg2 = this.dataView.getUint16(offset);
+                    offset += 2;
+                }
+            }else{
+                if (offset + 2 > end){
+                    throw new Error("not enough data for compound glyph args");
+                }
+                if ((flags & 0x02) !== 0){
+                    // x-y values
+                    arg1 = this.dataView.getInt8(offset);
+                    ++offset;
+                    arg2 = this.dataView.getInt8(offset);
+                    ++offset;
+                }else{
+                    // point indexes
+                    arg1 = this.data[offset];
+                    ++offset;
+                    arg2 = this.data[offset];
+                    ++offset;
+                }
+            }
+            if ((flags & 0x08) !== 0){
+                if (offset + 2 > end){
+                    throw new Error("not enough data for compound glyph scale");
+                }
+                glyphTransform.a = this.dataView.getOTFFixedGlyphTranform(offset);
+                glyphTransform.d = glyphTransform.a;
+                offset += 2;
+            }
+            if ((flags & 0x40) !== 0){
+                if (offset + 4 > end){
+                    throw new Error("not enough data for compound glyph scales");
+                }
+                glyphTransform.a = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+                glyphTransform.d = this.dataView.getOTFFixedGlyphTranform(offset + 2);
+                offset += 2;
+            }
+            if ((flags & 0x80) !== 0){
+                if (offset + 8 > end){
+                    throw new Error("not enough data for compound glyph scale 2x2");
+                }
+                glyphTransform.a = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+                glyphTransform.b = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+                glyphTransform.c = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+                glyphTransform.d = this.dataView.getOTFFixedGlyphTranform(offset);
+                offset += 2;
+            }
+
+            if ((flags & 0x02) !== 0){
+                // x-y values
+                glyphTransform = glyphTransform.translatedBy(arg1, arg2);
+            }else{
+                // point indexes
+                p1 = points[arg1];
+                p2 = glyph.points[arg2];
+                glyphTransform.tx = p1.x - p2.x;
+                glyphTransform.ty = p1.y - p2.y;
+            }
+            path.addPath(glyphPath, glyphTransform.concatenatedWith(transform));
+        }
+        return path;
+    },
 
 });
 
 Object.defineProperties(DataView.prototype, {
 
-    getOTFFixed: function(offset){
-        var whole = this.getUint16(offset);
-        var frac = this.getUint16(offset + 2);
-        return whole + frac / 0x10000;
+    getOTFFixed: {
+        value: function DataView_getOTFFixed(offset){
+            var whole = this.getUint16(offset);
+            var frac = this.getUint16(offset + 2);
+            return whole + frac / 0x10000;
+        }
+    },
+
+    getOTFFixedGlyphTranform: {
+        value: function DataView_getOTFFixedGlyphTransform(offset){
+            var n = this.getUint16(offset);
+            var whole = ((n & 0x4000) !== 0) ? 1 : 0;
+            if ((n & 0x8000) !== 0){
+                whole = -whole;
+            }
+            var frac = n & 0x3FFF;
+            return whole + frac / 0x4000;
+        }
     }
 
 });

package/Frameworks/FontKit.jsframework/io.breakside.JSKit.FontKit-bundle.js

@@ -3,14 +3,14 @@ JSBundle.bundles['io.breakside.JSKit.FontKit'] = {
   "Info": {
     "JSBundleType": "framework",
     "JSBundleIdentifier": "io.breakside.JSKit.FontKit",
-    "JSBundleVersion": "2026.11.0",
+    "JSBundleVersion": "2026.26.0",
     "JSDevelopmentLanguage": "en",
     "JSCopyright": "Copyright © 2020 Breakside Inc.",
     "JSBundleEnvironments": {
       "html": "FontKit+HTML.js"
     },
     "JSLicenseNotice": "Licensed under the Breakside Public License, Version 1.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nIf a copy of the License was not distributed with this file, you may\nobtain a copy at\n\n    http://breakside.io/licenses/LICENSE-1.0.txt\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n",
-    "GitRevision": "812100aa4c3e5b1ec1d0d432be903bba4db01b0e"
+    "GitRevision": "b8843098f47d4217cca519ae844e7f57f33ceae1"
   },
   "Resources": [],
   "ResourceLookup": {

package/Frameworks/Foundation.jsframework/Info.json

@@ -1,7 +1,7 @@
 {
   "JSBundleType": "framework",
   "JSBundleIdentifier": "io.breakside.JSKit.Foundation",
-  "JSBundleVersion": "2026.11.0",
+  "JSBundleVersion": "2026.26.0",
   "JSDevelopmentLanguage": "en",
   "JSCopyright": "Copyright © 2020 Breakside Inc.",
   "JSBundleEnvironments": {
@@ -9,5 +9,5 @@
     "node": "Foundation+Node.js"
   },
   "JSLicenseNotice": "Licensed under the Breakside Public License, Version 1.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nIf a copy of the License was not distributed with this file, you may\nobtain a copy at\n\n    http://breakside.io/licenses/LICENSE-1.0.txt\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n",
-  "GitRevision": "812100aa4c3e5b1ec1d0d432be903bba4db01b0e"
+  "GitRevision": "b8843098f47d4217cca519ae844e7f57f33ceae1"
 }

package/Frameworks/Foundation.jsframework/JS/JSAttributedString.js

@@ -65,6 +65,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.font:
                     return JSAttributedString.AttributeDecoder.font(value);
                 case JSAttributedString.Attribute.textColor:
+                case JSAttributedString.Attribute.strokeColor:
                 case JSAttributedString.Attribute.backgroundColor:
                     return JSAttributedString.AttributeDecoder.color(value);
                 case JSAttributedString.Attribute.link:
@@ -90,6 +91,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.headIndent:
                 case JSAttributedString.Attribute.tailIndent:
                 case JSAttributedString.Attribute.minimumLineHeight:
+                case JSAttributedString.Attribute.strokeWidth:
                     return JSAttributedString.AttributeDecoder.number(value);
                 case JSAttributedString.Attribute.textAlignment:
                     return JSAttributedString.AttributeDecoder.enumValue(JSTextAlignment)(value);
@@ -137,6 +139,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.font:
                     return JSAttributedString.AttributeEncoder.font(value);
                 case JSAttributedString.Attribute.textColor:
+                case JSAttributedString.Attribute.strokeColor:
                 case JSAttributedString.Attribute.backgroundColor:
                     return JSAttributedString.AttributeEncoder.color(value);
                 case JSAttributedString.Attribute.link:
@@ -162,6 +165,7 @@ JSClass("JSAttributedString", JSObject, {
                 case JSAttributedString.Attribute.lineBreakMode:
                 case JSAttributedString.Attribute.maskCharacter:
                 case JSAttributedString.Attribute.paragraphStyleName:
+                case JSAttributedString.Attribute.strokeWidth:
                 default:
                     return value;
             }
@@ -680,6 +684,7 @@ JSClass("JSAttributedString", JSObject, {
 JSAttributedString.Attribute = {
     font: "font",
     textColor: "textColor",
+    strokeColor: "strokeColor",
     backgroundColor: "backgroundColor",
     bold: "bold",
     italic: "italic",
@@ -689,6 +694,7 @@ JSAttributedString.Attribute = {
     maskCharacter: "maskCharacter",
     cursor: "cursor",
     link: "link",
+    strokeWidth: "strokeWidth",
 
     // Paragraph
     paragraphStyleName: "paragraphStyleName",
@@ -745,7 +751,13 @@ JSAttributedString.AttributeDecoder = {
     dataBase64URL: function(value){ return value.dataByDecodingBase64URL(); },
     dataHex: function(value){ return value.dataByDecodingHex(); },
     url: function(value){ return JSURL.initWithString(value); },
-    font: function(value){ return JSFont.initFromDictionary(value); },
+    font: function(value){
+        var font = JSFont.initFromDictionary(value);
+        if (font === null){
+            font = JSFont.initWithDescriptor(JSFontDescriptor.system, value.size);
+        }
+        return font;
+    },
     color: function(value){ return JSColor.initFromDictionary(value); },
     boolean: function(value){ return typeof(value) === "boolean" ? value : undefined; },
     number: function(value){ return typeof(value) === "number" ? value : undefined; },

package/Frameworks/Foundation.jsframework/JS/JSContext.js

@@ -88,8 +88,7 @@ JSClass("JSContext", JSObject, {
 
     addQuadraticCurveToPoint: function(point, control){
         this.beginPathIfNeeded();
-        // FIXME: not exactly a quadradic
-        this.path.addCurveToPoint(point, control, point, this.state.transform);
+        this.path.addQuadraticCurveToPoint(point, control, this.state.transform);
     },
 
     addEllipseInRect: function(rect){
@@ -100,21 +99,17 @@ JSClass("JSContext", JSObject, {
     addPath: function(path){
         this.beginPathIfNeeded();
         var i, l;
-        var j, k;
-        var subpath;
-        var segment;
-        for (i = 0, l = path.subpaths.length; i < l; ++i){
-            subpath = path.subpaths[i];
-            this.moveToPoint(subpath.firstPoint.x, subpath.firstPoint.y);
-            for (j = 0, k = subpath.segments.length; j < k; ++j){
-                segment = subpath.segments[j];
-                if (segment.type === JSPath.SegmentType.line){
-                    this.addLineToPoint(segment.end.x, segment.end.y);
-                }else if (segment.type === JSPath.SegmentType.curve){
-                    this.addCurveToPoint(segment.curve.p2, segment.curve.cp1, segment.curve.cp2);
-                }
-            }
-            if (subpath.closed){
+        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.x, element.point.y);
+            }else if (element.type === JSPathElement.Type.line){
+                this.addLineToPoint(element.point.x, element.point.y);
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                this.addCurveToPoint(element.curve.p2, element.curve.cp1, element.curve.cp2);
+            }else if (element.type === JSPathElement.Type.close){
                 this.closePath();
             }
         }
@@ -212,6 +207,12 @@ JSClass("JSContext", JSObject, {
     drawRadialGradient: function(gradient, rect){
     },
 
+    drawMaskedLinearGradient: function(gradient, rect, maskImage){
+    },
+
+    drawMaskedRadialGradient: function(gradient, rect, maskImage){
+    },
+
     drawLinearGradientStroke: function(gradient, path){
         // FIXME: gradient should be aligned to original path rect
         var strokePath = path.pathThatFillsStroke(this.state.lineWidth, this.state.lineCap, this.state.lineJoin, this.state.miterLimit);
@@ -282,6 +283,30 @@ JSClass("JSContext", JSObject, {
         this.state.shadowColor = color;
     },
 
+    // ----------------------------------------------------------------------
+    // MARK: - Transparency Layers
+
+    beginTransparencyLayer: function(){
+        this.save();
+        this.state.transparencyLayer = this.createTransparencyLayer();
+        this.setAlpha(1);
+        this.setShadow(JSPoint.Zero, 0, null);
+    },
+
+    endTransparencyLayer: function(){
+        if (this.state.transparencyLayer === null){
+            return;
+        }
+        this.drawTransparencyLayer(this.state.transparencyLayer);
+        this.restore();
+    },
+
+    createTransparencyLayer: function(){
+    },
+
+    drawTransparencyLayer: function(transparencyLayer){
+    },
+
     // ----------------------------------------------------------------------
     // MARK: - Clipping
 
@@ -411,6 +436,8 @@ JSContext.State = {
     characterSpacing: 0,
     textDrawingMode: JSContext.TextDrawingMode.fill,
 
+    transparencyLayer: null
+
 };
 
 })();