From c1efd53aa1414460f56f374950eb5633bb69fa17 Mon Sep 17 00:00:00 2001
From: Molly Lloyd <molly@mapbox.com>
Date: Thu, 14 Sep 2017 17:35:09 -0700
Subject: [PATCH] correct tile sorting and fix rendering when mask is empty

---
 src/render/tile_mask.js       |  2 ++
 src/source/tile.js            |  3 +++
 src/source/tile_coord.js      |  6 +++++
 test/unit/source/tile.test.js | 46 +++++++++++++++++++++++++++++++++++
 4 files changed, 57 insertions(+)

diff --git a/src/render/tile_mask.js b/src/render/tile_mask.js
index d359355f295..244c4b8c703 100644
--- a/src/render/tile_mask.js
+++ b/src/render/tile_mask.js
@@ -77,6 +77,8 @@ function computeTileMasks(rootTile: TileCoord, ref: TileCoord, childArray: Array
     // If the reference or any of its children is found in the list, we need to recurse.
     for (let i = 0; i < childArray.length; i++) {
         const childTile = childArray[i];
+        // childTile is from a larger wrap than the rootTile so it cannot be a child tile
+        if (lowerBound.isLessThan(childTile.coord)) break;
         // The current tile is masked out, so we don't need to add them to the mask set.
         if (ref.id === childTile.coord.id) {
             return;
diff --git a/src/source/tile.js b/src/source/tile.js
index 32b5a771471..bcba8fc99f9 100644
--- a/src/source/tile.js
+++ b/src/source/tile.js
@@ -375,6 +375,9 @@ class Tile {
         // using the global shared buffers for covering the entire tile.
         if (util.deepEqual(mask, [0])) return;
 
+        // mask is empty because all four children are loaded
+        if (mask.length === 0) return;
+
         const maskedBoundsArray = new RasterBoundsArray();
         for (let i = 0; i < mask.length; i++) {
             const maskCoord = TileCoord.fromID(mask[i]);
diff --git a/src/source/tile_coord.js b/src/source/tile_coord.js
index 547d16a0459..a480ebeaaf4 100644
--- a/src/source/tile_coord.js
+++ b/src/source/tile_coord.js
@@ -78,8 +78,14 @@ class TileCoord {
 
     isLessThan(rhs: TileCoord) {
         if (this.w < rhs.w) return true;
+        if (this.w > rhs.w) return false;
+
         if (this.z < rhs.z) return true;
+        if (this.z > rhs.z) return false;
+
         if (this.x < rhs.x) return true;
+        if (this.x > rhs.x) return false;
+
         if (this.y < rhs.y) return true;
         return false;
     }
diff --git a/test/unit/source/tile.test.js b/test/unit/source/tile.test.js
index 6b2f9aa0fbd..0c7b4fb9298 100644
--- a/test/unit/source/tile.test.js
+++ b/test/unit/source/tile.test.js
@@ -156,6 +156,52 @@ test('Tile#setMask', (t) => {
 
 });
 
+test('Tile#isLessThan', (t)=>{
+    t.test('correctly sorts tiles', (t)=>{
+        const tiles = [
+            new TileCoord(9, 146, 195, 0),
+            new TileCoord(9, 147, 195, 0),
+            new TileCoord(9, 148, 195, 0),
+            new TileCoord(9, 149, 195, 0),
+            new TileCoord(9, 144, 196, 1),
+            new TileCoord(9, 145, 196, 0),
+            new TileCoord(9, 146, 196, 0),
+            new TileCoord(9, 147, 196, 1),
+            new TileCoord(9, 145, 194, 0),
+            new TileCoord(9, 149, 196, 0),
+            new TileCoord(10, 293, 391, 0),
+            new TileCoord(10, 291, 390, 0),
+            new TileCoord(10, 293, 390, 1),
+            new TileCoord(10, 294, 390, 0),
+            new TileCoord(10, 295, 390, 0),
+            new TileCoord(10, 291, 391, 0),
+        ];
+
+        const sortedTiles = tiles.sort((a, b) => { return a.isLessThan(b) ? -1 : b.isLessThan(a) ? 1 : 0; });
+
+        t.deepEqual(sortedTiles, [
+            new TileCoord(9, 145, 194, 0),
+            new TileCoord(9, 145, 196, 0),
+            new TileCoord(9, 146, 195, 0),
+            new TileCoord(9, 146, 196, 0),
+            new TileCoord(9, 147, 195, 0),
+            new TileCoord(9, 148, 195, 0),
+            new TileCoord(9, 149, 195, 0),
+            new TileCoord(9, 149, 196, 0),
+            new TileCoord(10, 291, 390, 0),
+            new TileCoord(10, 291, 391, 0),
+            new TileCoord(10, 293, 391, 0),
+            new TileCoord(10, 294, 390, 0),
+            new TileCoord(10, 295, 390, 0),
+            new TileCoord(9, 144, 196, 1),
+            new TileCoord(9, 147, 196, 1),
+            new TileCoord(10, 293, 390, 1)
+        ]);
+        t.end();
+    });
+    t.end();
+});
+
 test('Tile#redoPlacement', (t) => {
 
     test('redoPlacement on an empty tile', (t) => {