Handle ref layer preceding referent

js/style/style.js

@@ -103,16 +103,25 @@ Style.prototype = util.inherit(Evented, {
 
         processLayers(this.stylesheet.layers);
 
-        var group, ordered = [];
+        var id, layer, group, ordered = [];
 
-        // Resolve layers and split into groups of consecutive top-level
-        // layers with the same source.
-        for (var id in this._layers) {
-            var layer = this._layers[id];
+        // Resolve layout properties.
+        for (id in this._layers) {
+            this._layers[id].resolveLayout(this._layers,
+                this.stylesheet.constants,
+                this.stylesheet.transition);
+        }
 
-            layer.resolve(this._layers,
+        // Resolve paint properties.
+        for (id in this._layers) {
+            this._layers[id].resolvePaint(this._layers,
                 this.stylesheet.constants,
                 this.stylesheet.transition);
+        }
+
+        // Split into groups of consecutive top-level layers with the same source.
+        for (id in this._layers) {
+            layer = this._layers[id];
 
             ordered.push(layer.transferable());
 

js/style/style_layer.js

@@ -29,12 +29,8 @@ StyleLayer.prototype = {
         this.layout          = layer.layout;
     },
 
-    resolve(layers, constants, globalTrans) {
-        globalTrans = globalTrans || {};
-
-        if (this.ref) {
-            this.assign(layers[this.ref]);
-        } else {
+    resolveLayout(layers, constants) {
+        if (!this.ref) {
             this.layout = new LayoutProperties[this.type](
                 StyleConstant.resolve(this._layer.layout, constants));
 
@@ -52,6 +48,14 @@ StyleLayer.prototype = {
         if (this._layer.layers) {
             this.layers = this._layer.layers.map(l => layers[l.id]);
         }
+    },
+
+    resolvePaint(layers, constants, globalTrans) {
+        globalTrans = globalTrans || {};
+
+        if (this.ref) {
+            this.assign(layers[this.ref]);
+        }
 
         // Resolved and cascaded paint properties.
         this._resolved = {}; // class name -> (property name -> StyleDeclaration)

test/js/style/style.test.js

@@ -10,6 +10,7 @@ var Style = require('../../../js/style/style');
 var VectorTileSource = require('../../../js/source/vector_tile_source');
 var LayoutProperties = require('../../../js/style/layout_properties');
 var PaintProperties = require('../../../js/style/paint_properties');
+var StyleLayer = require('../../../js/style/style_layer');
 var util = require('../../../js/util/util');
 
 function createStyleJSON() {
@@ -70,6 +71,46 @@ test('Style', function(t) {
     });
 });
 
+test('Style#_resolve', function(t) {
+    t.test('creates StyleLayers', function(t) {
+        var style = new Style({
+            "version": 6,
+            "sources": {},
+            "layers": [{
+                id: 'fill',
+                type: 'fill'
+            }]
+        });
+
+        style.on('load', function() {
+            t.ok(style.getLayer('fill') instanceof StyleLayer);
+            t.end();
+        });
+    });
+
+    t.test('handles ref layer preceding referent', function(t) {
+        var style = new Style({
+            "version": 6,
+            "sources": {},
+            "layers": [{
+                id: 'ref',
+                ref: 'referent'
+            }, {
+                id: 'referent',
+                type: 'fill'
+            }]
+        });
+
+        style.on('load', function() {
+            var ref = style.getLayer('ref'),
+                referent = style.getLayer('referent');
+            t.equal(ref.type, 'fill');
+            t.equal(ref.layout, referent.layout);
+            t.end();
+        });
+    });
+});
+
 test('Style#addSource', function(t) {
     t.test('returns self', function(t) {
         var style = new Style(createStyleJSON()),

test/js/style/style_layer.test.js

@@ -16,37 +16,39 @@ test('StyleLayer', function(t) {
     });
 });
 
-test('StyleLayer#resolve', function(t) {
-    t.test('sets properties from ref', function (t) {
-        var layer = new StyleLayer({ref: 'ref'}),
-            referent = new StyleLayer({type: 'fill'});
-        layer.resolve({ref: referent}, {});
-        t.equal(layer.type, 'fill');
-        t.end();
-    });
-
-    t.test('creates layout properties', function(t) {
+test('StyleLayer#resolveLayout', function(t) {
+    t.test('creates layout properties', function (t) {
         var layer = new StyleLayer({type: 'fill'});
-        layer.resolve({}, {});
+        layer.resolveLayout({}, {});
         t.ok(layer.layout instanceof LayoutProperties.fill);
         t.end();
     });
 
-    t.test('resolves layout constants', function(t) {
+    t.test('resolves layout constants', function (t) {
         var layer = new StyleLayer({
             type: 'line',
             layout: {
                 'line-cap': '@square'
             }
         });
 
-        layer.resolve({}, {
+        layer.resolveLayout({}, {
             '@square': 'square'
         });
 
         t.equal(layer.layout['line-cap'], 'square');
         t.end();
     });
+});
+
+test('StyleLayer#resolvePaint', function(t) {
+    t.test('sets properties from ref', function (t) {
+        var layer = new StyleLayer({ref: 'ref'}),
+            referent = new StyleLayer({type: 'fill'});
+        layer.resolvePaint({ref: referent}, {});
+        t.equal(layer.type, 'fill');
+        t.end();
+    });
 
     t.test('calculates paint classes', function(t) {
         var layer = new StyleLayer({
@@ -55,7 +57,7 @@ test('StyleLayer#resolve', function(t) {
             'paint.night': {}
         });
 
-        layer.resolve({}, {});
+        layer.resolvePaint({}, {});
 
         t.deepEqual(Object.keys(layer._resolved), ['', 'night']);
         t.end();
@@ -73,7 +75,7 @@ test('StyleLayer#resolve', function(t) {
             }
         });
 
-        layer.resolve({}, {});
+        layer.resolvePaint({}, {});
 
         var declaration = layer._resolved['']['fill-color'];
         t.deepEqual(declaration.value, [0, 0, 1, 1]);
@@ -90,7 +92,7 @@ test('StyleLayer#resolve', function(t) {
             }
         });
 
-        layer.resolve({}, {});
+        layer.resolvePaint({}, {});
 
         var declaration = layer._resolved['']['fill-color'];
         t.deepEqual(declaration.value, [0, 0, 1, 1]);
@@ -110,14 +112,26 @@ test('StyleLayer#resolve', function(t) {
             }
         });
 
-        layer.resolve({}, {});
+        layer.resolvePaint({}, {});
 
         t.equal(layer._resolved['']['fill-color'], undefined);
         t.end();
     });
 
     t.test('resolves paint constants', function(t) {
-        // TODO
+        var layer = new StyleLayer({
+            type: 'fill',
+            paint: {
+                'fill-color': '@blue'
+            }
+        });
+
+        layer.resolvePaint({}, {
+            '@blue': 'blue'
+        });
+
+        var declaration = layer._resolved['']['fill-color'];
+        t.deepEqual(declaration.value, [0, 0, 1, 1]);
         t.end();
     });
 });